1. Installation

npm install --save react react-dom
Webpack as bundler
import React from 'react'; import ReactDOM from 'react-dom';

2. Hello World

ReactDOM.render( <h1>hello world</h1> document.getElementById('root') );

3. Introducing JSX

render里可以渲染element, function, class component

4. Rendering Elements

function tick() { //... ReactDOM.render( //... ); } setInterval(tick,1000);
回调函数的应用:
It calls ReactDOM.render() every second from a setInterval() callback.
setTimeout() 参数和setInterval()一样，但只执行一次，不存在周期概念。两个函数都是异步的。tick()作为参数传进来，它是个回调函数。AJAX动态加载，DOM事件，Node.js事件，链式调用也都用到了回调函数。

5. Components and Props

composing components

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen. All React components must act like pure functions with respect to their props.Such functions are called "pure" because they do not attempt to change their inputs, and always return the same result for the same inputs.

6. State and Lifecycle

1) Converting a function to a class:

• Create an ES6 class with the same name that extends React.Component
• Add a single empty method to it called render()
• Move the body of the function into the render() method.
• Replace props with this.props in the render() body.
• Delete the remaining empty function declaration.

2) Adding local state to a class (move the data from props to state):

• Replace this.props.date with this.state.date in the render() method:
• Add a class constructor that assigns the initial this.state, pass props to the base constructor
• Remove the date prop (<Clock date={new Date()} />)from the <Clock /> element. We will later add the timer code back to the component itself

3) Adding Lifecycle Methods to a Class:

componentDidMount() componentWillUnmount() These methods are called "lifecycle hooks". The componentDidMount() hook runs after the component output has been rendered to the DOM. This is a good place to set up a timer. If the Clock component is ever removed from the DOM, React calls the componentWillUnmount() lifecycle hook so the timer is stopped.

Clock

7. Handling Events

Toggle Click

In Javascript, class methods are not bound by default. Without bind this.handleClick and pass it to onClick, this. will be undefined when the function is actually called. Generally, if you refer to a method without ( ) after it, such as onClick={this.handleClick}, you should bind that method.

bind( )

8. Conditional Rendering

class LoginControl

functions

• For ReactDOM.render, we only put the class <LoginControl /> in it, which has its own render(), will rendering all <*Button /> and <*Greeting />. And all key value going to be used in render() well handled in constructor().
• constructor() of <LoginControl /> will bind this to two handlers, and initialize the state of 'isLoggedIn' used as an condition check parameter, for deciding which <*Greeting /> or <*Button /> should be rendered .
• We use this.setState (//preveStata) to change isLoggedIn. Whenever the button clicked, isLoggedIn will be re-assign a boolean value, then this boolean value also leads to <*Greeting /> changed. Consider why initial state assigned boolean false? how this boolean firstly works in render()? how <*Greeting /> initialized?how <*Greeting /> toggled by isLoggedIn as well? (It's all about the logic behind it)
• Take care of 'let button = null' and {button}
• Tried to remove function UserGreeting and GuestGreeting, works. And WITHOUT EXTRACTING & ENCAPSULATION，the code will be looks like this:

用handleToggleClick重做

9. Lists and Keys

map() 数组每个元素调用一个指定方法后，返回值组成新数组并返回；
forEach为数组中的每个元素执行一次回调函数。

• Keys only make sense in the context of the surrounding array.
  For example, if you extract a ListItem component, you should keep the key on the <ListItem /> elements in the array rather than on the root <li> element in the ListItem itself.

• Keys Must Only Be Unique Among Siblings. Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays.

• A good rule of thumb is that elements inside the map() call need keys.

10. Forms

Forms Picker

<input type="text">, <textarea>, and <select> all work very similarly - they all accept a value attribute that you can use to implement a controlled component.

11. Lifting State Up

class TemperatureInput

class Calculator

Lifting state involves writing more "boilerplate" code than two-way binding approaches, but as a benefit, it takes less work to find and isolate bugs. Since any state "lives" in some component and that component alone can change it, the surface area for bugs is greatly reduced. Additionally, you can implement any custom logic to reject or transform user input.
If something can be derived from either props or state, it probably shouldn't be in the state. For example, instead of storing both celsiusValue and fahrenheitValue, we store just the last edited value and its scale. The value of the other input can always be calculated from them in the render() method. This lets us clear or apply rounding to the other field without losing any precision in the user input.

12. Composition vs Inheritance

讲Composition时, 每个例子特点不同：

1. 有个外部框架function，已经做好了初始化，比如归属的className, 然后里面有个{props.children}，之后用到什么就往里填什么。所以外部框架的function不变，随着{props.children}的改变，得到的新的function也都截然不同。
2. 在例子1的基础上，{props.children} 有被其它function代替，而不直接是JSX代码。
3. <WelcomeDialog /> is Make a special case of <Dialog />。这个例子，就是直接给{props.children}赋值。模块里就没别的了。
4. <SignUpDialog />结合了之前的几个例子。

讲Inheritance时, 还提到props和state，很受用：

React deal with Inheritance:"Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it."

13. Thinking in React（filterableProductTable）

另外，关于ref，ref={(input) => { this.textInput = input; }} />
不要滥用，state还是正路子。#ref and DOM里的几个例子都很好。ref其实就是当出现了动态的东西，有需要取值，用值得时候，它帮着临时存了下。