Front-end development + UX + Accessibility

Notes from learning ReactJS

Notes from learning React using the official Reactjs.org tutorial.

Day 1

npx create-react-app my-app Installation takes a while, I went to make a cup of tea. React-app was ready when I came back.

Apart from that a pretty smooth install. Luckily I already have Node installed, so didn't need to faff around with that.

Since I'm learning something new, I decided to try out a new code editor as well, while I'm at it. Been using Atom for the last 4 years, Sublime before that, now trying out VS Code.

Originally I preferred to learn VueJS or Svelte, as they seem to be closer to my preferred front-end mindset. However, consideration for the reality that most jobs, apps etc. require ReactJS, I decided to go for it in the end. Better something than nothing.

For a while I went down the rabbit hole of finding the "best" React tutorials, but common sense won, and I'm using the documentation and tutorials on the offical React site.

Since I'm using a new IDE, I'm following the recommendations to configure syntax highlighting for Babel. Which is vscode-language-babel from the Visual Studio marketplace. The author of that syntax highlighting theme recommends using it together with the Oceanic Next theme, so I did that as well. Though I'm not seeing any initial difference. Never mind, I'm gonna move on with the tutorial.

What is React?

React is a declarative JavaScript library for building UI.

declarative: "Denoting high-level programming languages which can be used to solve problems without requiring the programmer to specify an exact procedure to be followed."

The UIs consists of isolated pieces of code called "components".

Start with React.Component subclasses

Props

"Passing props" is how information flows in React, from parents to children.

State

To remember things, components use state.

A state is remembered by setting this.state in a constructor.

A state is changed by using setState.

<button className="square" onClick={() => this.setState({ value: "X" })}>
  {this.state.value}
</button>

Store state in the parent component

To collect data from multiple children, declare the state in their parent component instead.

The parent can then pass the state back down using props.

Function Components

Function components are simpler way to write componenents that only contain a render method - AND don't have their own state.

Instead of defining a class (which extends React.Component) I can write function that takes props as input, and returns what's to be rendered.

End of day 1 thoughts

The tutorial felt easy, up to about halfway through, where I had to slow down and re-read and better comment my code.

Day 2

Mutation - don't use it.

The main benefit of immutablity is that React can then easily determine if changes has been made, and therefore if a component needs re-rendering.

Day 3

Caught up a bit on yesterday's things that I didn't quite understand. I don't understand some of the non-react javascript used in the tutorial. Tried some brief searches without luck. Made a new file called js-to-look-up.md

🕑 Store history

Moving state management up to the parent component, which led to lots of refactoring, not just cut and paste. Need to look through this part again. Quite a few lines of code changed in this commit.

🕐 Show history

Use map() method. MDN map method.

🔑 The key prop

A unique ID for each component. Not the array index.

It is strongly recommended that I assign proper keys whenever I build dynamic lists.

Create a jumpTo method which can be referred to in the other methods, to display the right move from the history.

Finished the tutorial

Well, the tutorial part of the tutorial. There are also the 6 ideas for improving the app, to figure out for myself.

I've followed the instructions, and made my own version that works as advertised. I'm understanding more about how to build with React now, but also need to improve my general JavaScript skills to be able to make full use of React.

And also to read the React.Component API reference to learn more about defining components.

Day 4

Spent 2 hours trying the first extra exercise - "Display the location for each move in the format (row, col) in the move history list.", and now I feel much dumber than yesterday.

I started by writing down how all the components and methods relate to each other on paper, drawing boxes and arrows and so on. I find it much easier to understand a script when I can visualise it. However, that didn't really help much.

I moved on to inserting console.log()'s throughout the script to pinpoint the index value(s) I was looking for, and with this I had slightly more success. I figured I could create a function to translate the index number into the (row, col) numbers after. But then I got stuck on actually using the values where I wanted them. I did find an answer on Stack Overflow though, which helped me find the index number. But I don't understand why this is working, mostly being stuck on how map() works, so that's something I also need to look up.

← Home