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. State and Lifecycle
3.1. State is similar to props, but it is private and fully controlled by the component.
3.2. Adding Lifecycle Methods to a Class
3.2.1. The componentDidMount() method runs after the component output has been rendered to the DOM.
3.2.2. Component is ever removed from the DOM, React calls the componentWillUnmount() lifecycle method.
4. Handling Events
4.1. very similar to handling events on DOM elements.
4.2. warning: "this"
4.2.1. ex
4.2.1.1. handleClick = () => { console.log('this is:', this); }
4.2.1.2. <button onClick={this.handleClick}>
5. Conditional Rendering
5.1. the same other language
5.2. ex
5.2.1. condition ? true : false.
5.2.2. condition && <h1>tttt</h1>
6. Introducing JSX
6.1. what?
6.1.1. it is a syntax extension to JavaScript.
6.1.2. We will explore rendering them to the DOM
6.2. why?
6.2.1. You can add element alike HTML
6.2.2. it helpful as a visual aid when working with UI inside the JavaScript code.
6.2.3. show more useful error and warning messages.
6.2.4. examples
6.2.4.1. const element = ( <h1 className="greeting"> Hello, world! </h1> );
6.2.4.2. not using JSX: const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
7. Rendering Elements
7.1. Rendering an Element into the DOM
7.2. Updating the Rendered Element
7.3. React Only Updates What’s Necessary
7.4. Ex
7.4.1. const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root'));
8. Components and Props
8.1. split the UI into independent, reusable pieces, and think about each piece in isolation.
8.2. Function and Class Components
8.2.1. function
8.2.1.1. as javascript function
8.2.1.2. function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
8.2.2. class
8.2.2.1. state
8.2.2.2. lifecycle
8.2.2.3. ...
8.2.2.4. class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
8.3. Components can refer to other components in their output.
8.4. Props as properties of component
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