Source: Tutorial: Intro to React
"React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called 'components'"
Key Concepts
Components
- They "tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components."
- They take in parameters called "props"
- Returns a "description" (in the form of a "react element") of what you will see on the screen by calling the render method. When your application is built, this description/React element is converted to something that can be inserted into the DOM for our browser to display
- The description/React element is often created using JSX, which is a syntax specific to React that resembles HTML and can include JavaScript expressions
Props:
- Short for "properties"
- Parameters that you pass into a component.
- They should be "read only" meaning that your component shouldn't update its own props
- "Passing props [from parents to children] is how information flows in React apps."
State
- "To 'remember' things, components use state."
- For example, was a square on the tick-tac-toe board clicked? Was it blank, or did it contain an X, or an O? Each square shouldn't remember this. Rather, the game board should keep track of all of this and just tell the square what to render by passing that data in through a prop
- Set
this.state
in a component's constructor
"Lifting up state"
- Store the state in the parent when you have parent and child components (the board is the parent to the square components)
- Declare state in a parent component to have two child components to talk to each other or to have your app collect data from multiple components
- You then pass the state down from the parent to the child components using a prop for example:
<Square value={this.state.squares[i]} />
- You then pass the state down from the parent to the child components using a prop for example:
- To change the state of the parent when an action on the child happens (click on the square of a tic-tac-toe game and update the board's state), pass in a function defined in the parent component down to the child component that will get called when the action happens
<Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} />
- After you "lift up state" so your child components no longer handle their own state, they are referred to as "controlled components"
Other Stuff
Naming conventions when dealing with events
- "In React, it’s conventional to use on[Event] names for props which represent events and handle[Event] for the methods which handle the events."
Immutability
- "The main benefit of immutability is that it helps you build pure components in React. Immutable data can easily determine if changes have been made which helps to determine when a component requires re-rendering." (I am still a little hazy about what I was supposed to be getting from this at this time. However, it might have to do with the idea that props are read-only and a component shouldn't change its own props: https://reactjs.org/docs/components-and-props.html#props-are-read-only)
Keys
- When you generate a list, make sure to use a unique key (which looks like a prop names key, but it is actually its own thing in react). React will use it to determine what it needs to update.
- Don't use an array index as your key because it can cause problems "when trying to re-order a list's items or inserting/removing list times"
- "Keys do not need to be globally unique; they only need to be unique between components and their siblings"
Questions
- When describing using an arrow function as a prop, they say to use it for onClick. (see the yellow note box here in this section: https://reactjs.org/tutorial/tutorial.html#making-an-interactive-component) Does this mean there are "special" prop names that already exist for us in React? If so, what are they?
- One of them is probably className?
- Is any word in any attribute name in a component considered a prop?
- "By calling this.setState from an onClick handler in the Square’s render method, we tell React to re-render that Square whenever its
<button>
is clicked." Does React always re-render a component and its children when its state is changed?- In theory, it will only re-render elements when they need to be updated. "React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state." https://reactjs.org/docs/rendering-elements.html#react-only-updates-whats-necessary