Get Started. It's Free
or sign up with your email address
React by Mind Map: React

1. JSX

1.1. React element

1.1.1. Plain Object

1.1.2. Immutable Object

1.2. Describe UI what see on screen

2. Render Element

2.1. Rendering an Element into the DOM

2.1.1. ReactDOM.render(<elements/>, rootDoom)

2.2. Updating the Rendered Element

2.2.1. React Only Updates What’s Necessary

3. Component

3.1. Independent, reusable pieces, and think about each piece in isolation

3.2. Function and Class Components

3.3. Rendering a Component

3.4. Composing Components

3.5. Extracting Components

3.6. Props are Read-Only

4. Props

4.1. Immutable

4.2. Pass data from top to down

4.2.1. way one data flow

4.3. re-render whenever new props

5. State and Lifecycle

5.1. private and fully controlled by the component

5.2. Mounting, updating, unmounting

5.3. re-render whenever state changes

5.4. Using State Correctly

5.4.1. Do Not Modify State Directly

5.4.2. State Updates May Be Asynchronous

5.4.3. State Updates are Merged

5.4.4. The Data Flows Down

6. Handling Events

6.1. React events are named using camelCase, rather than lowercas

6.2. With JSX you pass a function as the event handler, rather than a string

7. Conditional Rendering

7.1. Element Variables

7.2. Inline If with Logical && Operator

7.3. Inline If-Else with Conditional Operator

7.4. Preventing Component from Rendering

8. Lists and Keys

8.1. Rendering Multiple Components

8.2. Basic List Component

8.3. Keys

8.4. Extracting Components with Keys

8.5. Keys Must Only Be Unique Among Siblings

9. Forms

9.1. Controlled Components

9.2. Uncontrolled Components

10. Lifting State Up

11. Composition vs Inheritance

12. Thinking In React

12.1. Step 1: Break The UI Into A Component Hierarchy

12.1.1. single responsibility principle

12.2. Step 2: Build A Static Version in React

12.3. Step 3: Identify The Minimal (but complete) Representation Of UI State

12.3.1. DRY: Don’t Repeat Yourself

12.3.2. Is it passed in from a parent via props? If so, it probably isn’t state.

12.3.3. Does it remain unchanged over time? If so, it probably isn’t state.

12.3.4. Can you compute it based on any other state or props in your component? If so, it isn’t state.

12.4. Identify Where Your State Should Live

12.4.1. Identify every component that renders something based on that state.

12.4.2. Find a common owner component (a single component above all the components that need the state in the hierarchy).

12.4.3. Either the common owner or another component higher up in the hierarchy should own the state.

12.4.4. If you can’t find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common owner component.