Make the font bigger to see clearly
entry level
1.0 hello world
There are pictures and the truth!
Browser.js Its function is to convert JSX syntax to JavaScript syntax. ReactDOM.render is the most basic method of React, which is used to convert templates into HTML language and insert specified DOM nodes.
2.0jsx syntax can be mixed with js
usage of map,
The map() method returns a new array whose elements are the values processed by the calling function of the original array elements.
3.0 Inserting a variable directly
4.0 Components
gist: 1.0
The React.createClass method is used to generate a component class
2.0
All component classes must have their own render methods
3.0
The first letter of the component class must be capitalized, otherwise an error will be reported, for example, it HelloMessagecannot be written helloMessage. In addition, the component class can only contain one top-level label, otherwise an error will be reported
4.0
A component can add any properties, and the properties of the component can be obtained on the this.props object of the component class. For example, the name properties can be read by this.props.name reading
5.0
When adding component attributes, there is one thing to pay attention to, that is , the class attributes need to be written className , and the for attributes need to be written htmlFor , because class and for are reserved words in JavaScript.
6.0 Properties. It represents all child nodes of the component this.props.children
It should be noted here that this.props.children there are three possibilities for the value of : if the current component has no child nodes, it is undefined ; if there is one child node, the data type is object ; if there are multiple child nodes, the data type is array . So, this.props.children be careful when handling it.
React provides a utility method React.Children to handle this this.props.children . We can React.Children.map use to iterate over the child nodes without worrying about the this.props.children data type . more ways,undefinedobjectReact.Children
5.0
PropTypes
Component properties can accept arbitrary values, such as strings, objects, functions, and so on. Sometimes, we need a mechanism to verify whether the parameters provided by others meet the requirements when using the component.
The properties of the component class PropTypesare used to verify whether the properties of the component instance meet the requirements
MytitleA component has a titleproperty. PropTypes Tell React that this title property is required and that its value must be a string. Now, we set title the value of the property to be a numeric value
At this point he made a mistake
We modify var data = '123', and no error is reported!
Additionally, getDefaultProps methods can be used to set default values for component properties.
6.0 
The child node of the component MyComponent has a text input box to get input from the user. At this time, the real DOM node must be obtained, and the virtual DOM cannot get user input. In order to do this, the text input box must have a ref property, which this.refs.[refName] will then return the actual DOM node.
It should be noted that since the this.refs.[refName] property obtains the real DOM, this property must be used after the virtual DOM is inserted into the document, otherwise an error will be reported. In the above code, by specifying Click the callback function of the event for the component, it is ensured that the property Click will not be read until the event occurs in the real DOM this.refs.[refName] . Pay attention, there is a warning here, haha, can't solve it, see how to continue learning below, as a qualified programmer, it is your fault that the console has a red one.
7.0 this.state
Components inevitably have to interact with the user. One of React's innovations is to regard the component as a state machine. At the beginning, there is an initial state, and then the user interacts, causing the state to change, thus triggering the re-rendering of the UI.
The above code is a LikeButton component whose getInitialState methods are used to define the initial state, which is an object that can be this.state read through properties. When the user clicks on the component, causing the state to change, the this.setState method modifies the state value. After each modification, the method is automatically called this.render to render the component again.
Since this.props and this.state are both used to describe the properties of a component, confusion can arise. A simple way to differentiate is to this.props represent features that, once defined, do not change, this.state but rather that change as the user interacts.
8.0 Forms
The value of the text input box cannot be this.props.value read, but to define an onChange event callback function that event.target.value reads the value entered by the user. This is the case for textarea element, selectelement, element,radio
9.0 很重要的就是生命周期，如果你不知道，为啥重要，那你就先记住，必须记住机机型啦！
组件的生命周期分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
- componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
10.0ajax
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI
React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。
10.1我们甚至可以把一个Promise对象传入组件
代码从Github的API抓取数据，然后将Promise对象作为属性，传给RepoList组件。
如果Promise对象正在抓取数据（pending状态），组件显示"正在加载"；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。
（妈的竟然有一个警告，我知道这个警告，但是目前我不知道怎么解决，哈哈），
以后解决。
其实就是加一个索引就能解决，并不是唯一解决办法，但是个很好的解决方法。
这些，就是一些很基础的东西啦！很重要的，