ReactJS basic

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

1. Information

1.1. A JavaScript library for building user interfaces specifically for single page applications.

1.2. can change data, without reloading the page.

1.3. you compose complex UIs from small and isolated pieces of code

1.4. main purpose of React is to be fast, scalable, and simple.

2. Install

2.1. npx create-react-app

3. Introducing JSX

3.1. what?

3.1.1. it is a syntax extension to JavaScript.

3.1.2. We will explore rendering them to the DOM

3.2. why?

3.2.1. You can add element alike HTML

3.2.2. it helpful as a visual aid when working with UI inside the JavaScript code.

3.2.3. show more useful error and warning messages.

3.2.4. examples

3.2.4.1. const element = ( <h1 className="greeting"> Hello, world! </h1> );

3.2.4.2. not using JSX: const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

4. Rendering Elements

4.1. Rendering an Element into the DOM

4.2. Updating the Rendered Element

4.3. React Only Updates What’s Necessary

4.4. Ex

4.4.1. const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root'));

5. Components and Props

5.1. split the UI into independent, reusable pieces, and think about each piece in isolation.

5.2. Function and Class Components

5.2.1. function

5.2.1.1. as javascript function

5.2.1.2. function Welcome(props) { return <h1>Hello, {props.name}</h1>; }

5.2.2. class

5.2.2.1. state

5.2.2.2. lifecycle

5.2.2.3. ...

5.2.2.4. class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }

5.3. Components can refer to other components in their output.

5.4. Props as properties of component

6. State and Lifecycle

6.1. State is similar to props, but it is private and fully controlled by the component.

6.2. Adding Lifecycle Methods to a Class

6.2.1. The componentDidMount() method runs after the component output has been rendered to the DOM.

6.2.2. Component is ever removed from the DOM, React calls the componentWillUnmount() lifecycle method.

7. Handling Events

7.1. very similar to handling events on DOM elements.

7.2. warning: "this"

7.2.1. ex

7.2.1.1. handleClick = () => { console.log('this is:', this); }

7.2.1.2. <button onClick={this.handleClick}>

8. Conditional Rendering

8.1. the same other language

8.2. ex

8.2.1. condition ? true : false.

8.2.2. condition && <h1>tttt</h1>

9. Lifting State Up

10. Composition vs Inheritance

11. Thinking in React

11.1. Start With A Mock( as Data)

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

11.2.1. http://nitrajka.com/wp-content/uploads/2016/08/uimockscript.png

11.3. Step 2: Build A Static Version in React

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

11.5. Step 4: Identify Where Your State Should Live

11.6. Step 5: Add Inverse Data Flow