React Learning Series One

Series Learning react translation address https://scotch.io/tutorials/learning-react-getting-started-and-concepts

I am a beginner, English is not very good, but has been forced to read English documents.

This is the understanding of translation, translation is not good, please forgive me! () in the process of my translation understanding, under the reference, what to say the wrong welcome guidance under!

Section I: How to start react and understand the concept of react

What is 1.React?

react is Facebook was developed to facilitate UI interaction and create a UI library with stateful, reusable UI builds! Feacebook's products are widely used in this technology, instagram.com (a picture sharing application) was developed based on react. (The difficulty of understanding here is that the reusable UI component is stateful.) That is, a UI component that has a state attribute and can be reused! ）

React's biggest selling point is that react can be used not only on the browser side, but also on the service side, and can be used together at both ends!

The underlying concept of react: React uses virtual DOM, and then, depending on the state of the UI component, has the choice of rendering the DOM's node tree! It updates the UI component as much as possible by manipulating the fewest dom.

2. How does the virtual DOM work?

Imagine that you build an object about people. This object owns every attribute of the person, and then the object is like a mirror, mapping out all the attributes of everyone in some. This is the main relationship between react and Dom.

(As I understand it, react's virtual Dom has everything in the DOM as much as possible, and then uses the virtual Dom in the app to map out all the DOM nodes the current application needs!) ）

　　Now, if we give this object, add a beard, some biceps two muscles, and Steve Buscemi's eyes (add these to an instance of the human object). In react, there are two things that happen when we need these changes to occur (react). The first thing is that react will run the "diff" algorithm, which is what happened before and after. The second thing is to update the results of this "diff" algorithm to the DOM (which should be the virtual DOM)

React this mode of operation is different from the people before the change, and then began to re-shape these changes of people (I understand here, the original DOM to change a node, need to create a new node and then add the changes, and then to replace the previous node.) And the react way, is in its own virtual DOM directly on the need to change the place, the change under OK). It only needs to be replaced with face and arm. This means that if you want to render some text in the input box, as long as the parent of the input box is not scheduled to change, it will remain intact! (Modify only the changes you want to change, don't change the status!) ）

3. Getting ready to start react

　　The first step is to download the development package. :http://facebook.github.io/react/downloads/react-0.11.2.zip

You can also install the new version of react with Bower.

Bower Install react

The second step is to introduce the React library to the page.

Introduce the React library into the page and introduce the two files of React.js and Jsxtransformer.js respectively. Then write the application component in your own type for TEXT/JSX's srcipt tag.

<! DOCTYPE html>
In react, the component is bound to an element, and the example above is using a div with ID mount-point as the container for the component.
This is the simplest way to start react. In practical applications, however, it is better to use browserify or webpack to put the component code in a separate file.
Basics of 4.React
　　Now I start with a simple show:
<script type= "Text/jsx" >    react.render (
To open an HTML page in a browser, the effect is:
　　
5.JSX
　　　This is called JSX. This is a translation of JavaScript XML syntax (XML syntax in JavaScript). This allows you to write HTML tags in javascript. In fact, you are writing XML based on object presentation.
For regular HTML tags, the class attribute in JSX is the Classname,for property is htmlfor. It should be a reserved word for JavaScript, such as class, for, and so on. The more different you can see here (http://facebook.github.io/react/docs/jsx-gotchas.html)
If you don't have to write JSX syntax, you can write it with the syntax of the existing JavaScript.
<script type= "Text/javascript" >    react.render (React.DOM.h1 (null, ' Hello, world! '), document.getElementById (' Mount-point ')    ) </script>
You can also show hello in the Web page, world!
6. Components
　　　When calling the Render method, its first parameter is to select the component of the person. The second parameter is the DOM node you want to bind to.
We can use the Createclass method to create a custom component. It accepts parameters for an object format. Examples are as follows:
var mycomponent= React.createclass ({ Renderfunction ({return 
>hello!< Span class= "token operator" ></h1> ) }})               
Once you have created a component, you can render the MyComponent to our DOM:
React.render (    <mycomponent/>,    document.getElementById (' Mount-point '))
7.Props
When we use a defined component, we can add the props property to it. This property is very useful in our component as a this.props. Use it when we want to render dynamic data.
Here are the following:
var mycomponent = React.createclass ({render:function () {return (
The display results are:
8. Specification, life cycle and status
Create a component, the Render method is the only specification required. But when our components want to do something else, there are several life cycle methods and specifications that are available for the component to do these things efficiently.
　　Life cycle Methods:
　　　　1.Componentwillmount (the component will install bindings): Componentwillmount executes once before the client and server components are rendered.
　　　　2.Componentdidmount (Binding installed components):  Components Only one call is made to the client compoentdidmount after rendering is complete.
　　　　3.shouldComponentUpdate (components that should be updated): The return value determines whether the component is to be updated.
　　　　4.componentWillUnmount (the component to which the binding is to be canceled): First call the component on which you want to cancel the installation of the binding.
(I am also smattering here)
SPECS (specification, specification)
　　　　 1.getInitialState:  Returns an initialization value for the state.
　　　　2.getDefaultProps: Sets the props value of the fallback if props is provided.
　　　　3.mixins: extends the functionality of a component through an array of objects.
For more specs and lifecycle methods you can click on the link: http://facebook.github.io/react/docs/component-specs.html
　State (status)
　　　　Each component has a state object and a props object. State uses the SetState method to invoke SetState to trigger the interactivity of view updates and react. If we want to set a default state before the interaction occurs, you can use the Getinitialstate method. The following example shows the status of a component:
var mycomponent = React.createclass ({getinitialstate:function () {return {count:5}},render:function ()} {return (
9.Event (Event)
　　　　R Eact also provides a set of event systems that are compatible with each browser. These events can be triggered as attributes on the Add component. 
Here we are using events to achieve count self-increment.
var mycomponent = React.createclass ({incrementcount:function () {///modify state via SetState method This.setstate ({count: This.state.count + 1})},//getinitialstate initializes the value of State getinitialstate:function () {return {count:5}},render:function () {return (
Friendly reminders, react components must be wrapped in a single container. That's the div here. If there is only one label for example: 
It feels so cool!
10.Unidirectional Data Flow (unidirectional traffic)
　　　　In react, the applied data transfer is unidirectional through the state and props objects, unlike angular's bidirectional data binding. One-way data flow means that in a multi-component application, each parent component is responsible for administering the state and passing it through props to the next layer of components.
The status (state) is updated by the SetState method to ensure that the UI update occurs. If necessary, the final result value of the state should be passed as a property of the child component to the child component, and the value is obtained through this.props in the child component.
Here's an example:
var filteredlist = React.createclass ({//Custom filter Method Filteredlist:function (event) {var updatelist = this.state.initialitems;//Filters The result based on the value of the input box Updatelist = Updatelist.filter (function (item) {return Item.tolowercase (). Search (Event.target.value.toLowerCase ())!==-1;}); /The filtered value is updated with the SetState method to update statethis.setstate ({items:updatelist});},//state initialization Method Getinitialstate:function () {return { Initialitems: ["Apples", "Broccoli", "Chicken", "Duck", "Eggs", "Fish", "granola", "Hash Browns"],items: []}},// Execute the method before the component is rendered componentwillmount:function () {this.setstate ({items:this.state.initialItems});},render:function () {/ /onchange event to execute the Filteredlist method//And then pass the updated state as a property of the list component to the list component return (<div class= "Filter-class" ><input Type= "text" placeholder= "Search" Onchange={this.filteredlist}/><list Items={this.state.items}/></div >}}) var list = React.createclass ({render:function () {//list component) Gets the value passed in to Filteredlist by This.props to return (<ul >{this.props.items.map (function (item) {return &LT;li Key={item}>{item}</li>})}</ul>)}); React.render (<filteredlist/>, document.getElementById ("Mount-point"));
Operation Result:
It's a good feeling, huh?
11. Summary
These are some of the basics about react. If you have time, you have a problem. View react API:"http://facebook.github.io/react/docs/top-level-api.html" 
It's better to get to know about jsx:http://facebook.github.io/react/docs/jsx-in-depth.html.
In the next section, I'll translate about learning to build apps through express, and use react rendering on the server side, just like the front client, and then socket.io to keep the ends in sync.
Translation is not very good! English proficiency is limited AH! I will try to put my own understanding into it!
I ran the code above!
React Learning Series One