The react of node. JS Learning Notes

React originated in Facebook's internal project because the company was dissatisfied with all the JavaScript MVC frameworks on the market and decided to write a set of Web sites that would be used to erect Instagram. After doing it, found that this set of things very useful, in May 2013, open source. Because React's design ideas are extremely unique, revolutionary and innovative, the code logic is simple. Therefore, more and more people are beginning to pay attention to and use, think it may be the mainstream tool of WEB development in the future.

REACTJS website Address: http://facebook.github.io/react/

GitHub Address: Https://github.com/facebook/react

React that a component should have the following characteristics:

(1) composable (composeable): One component is easy to use with other components or nested inside another component. If another component is created inside a component, then the parent component owns (own) The subcomponents it creates, and with this feature, a complex UI can be split into multiple simple UI components;

(2) Reusable (REUSABLE): Each component is a standalone feature that can be used in multiple UI scenarios;

(3) maintainable (maintainable): Each small component contains only its own logic, which is easier to understand and maintain;

We create a new HTML file that references the two JS files of React.js and Jsxtransformer.js. The HTML template is as follows (the JS path is changed to its own):

<! DOCTYPE html>
The type of script is Text/babel, because React's unique JSX syntax is incompatible with JavaScript. Wherever the use of JSX, all should add Type= "Text/babel".
Second, the above code altogether uses three libraries: React.js, React-dom.js, and browser.js, which must be loaded first. Among them, React.js is the core library of react, React-dom.js is to provide DOM-related functions, the role of Browser.js is to convert the JSX syntax to JavaScript syntax, this step is very time-consuming, in fact, the line should be placed on the server to complete.
Let's start by looking at how react should be written, or the traditional old-fashioned Hello Word:
<! DOCTYPE html>
In the body of the example above, there is a div,id that is example, and then the H1 tag is rendered into the div by the react renderer.
Reactdom.render (DOM node, the parent node being inserted);
This code is the most commonly used is also a very necessary sentence. There is a very important place in this sentence is the HTML syntax and the JS syntax of the mix, which is the characteristics of JSX grammar, in the JSX syntax, encountered angle brackets in accordance with the HTML to parse, encountered curly braces in accordance with the JS syntax to parse. The following example illustrates how the JSX syntax should be written:
var list = ["word", "man", "Boy"]; Reactdom.render (<div> {list.map (function name) {return <div> Hello {name}</div>})} </div>,document.getelementbyid (' example ')); </script >
The end result is:
Hello Word
Hello Mans
Hello  Boy

Here is a point to note that the first parameter of the Reactdom.render renderer, there is only one top node, can not have multiple side-by-side, otherwise it will be an error. JSX allows JavaScript variables to be inserted directly into the template. If the variable is an array, all the members of the array are expanded.
var list = [
The end result is:
Wordmanboy
React allows the code to be encapsulated as a component (component) and then inserted into a Web page like a normal HTML tag. The React.createclass method is used to generate a component class:
var Helloword = React.createclass ({render:function () {return <p>hello {this.props.name}</p>}}); Reactdom.render (
The end result is:
Hello The meow.

In the example above, a component class Helloword has been created with React.createclass, here is one thing to note: The first letter of the component class name must be uppercase, otherwise it will be an error. React.createclass receive an object, the object must have a render property, the value of the Render property is generally written as a function, and then return a DOM object, and do not forget that the DOM object has and can only have a top-level node, otherwise it will error.
We will see in the return of the above code that there is a paragraph: this.props.name, and then in the Reactdom.render in the first parameter will see the label has a property name= "Meow Star", one thing to remember here is Name= "Meow" It looks like the argument is being passed to the function, and this.props.name is the receipt of the parameter.
To add component properties, one place to note is that the class attribute needs to be written as ClassName, and the for property needs to be written as htmlfor because the class and for are reserved words for JavaScript.

The properties of the This.props object correspond to the component's property one by one, but with one exception, the This.props.children property. It represents all child nodes of a component.
var noteslist = React.createclass ({render:function ()} {return (<ol> {this.props.children.ma        P (function (child) {return <li>{child}</li>;  })} </ol>); }}); Reactdom.render (<NotesList> <span>hello</span> <span>world</span> <P>MAIN&L T;/p> </noteslist>, document.getElementById (' example '));
Final Run Result:

 
    

  
     
 
      
Hello
 
      
World
 
     
 
    

3. Main


The line break between 2 and 3 is because the P tag comes with a newline, and the Li tag has a newline, so there's a blank line in the middle.

Components are unavoidable to interact with the user, React is a big innovation, is to consider the component as a state machine, initially have an initial state, and then user interaction, resulting in state changes, triggering the re-rendering UI
var Likebutton = React.createclass ({getinitialstate:function () {return {liked:false};  }, Handleclick:function (event) {This.setstate ({liked:!this.state.liked}); }, Render:function () {var text = this.state.liked?    ' Like ': ' haven\ ' t liked '; Return (<p onclick={this.handleclick}> you {text}.      Click to toggle.  </p>); }}); Reactdom.render (<likebutton/>, document.getElementById (' example '));
Final Result:
 You Haven ' t liked This . Click to toggle.
When clicked on a text, it becomes:
 You  like This . Click to toggle.
Then you can switch back and forth between the two sentences by clicking on it.
It is important to note that Getinitialstate is the default property of react and needs to return an object that can be null or otherwise, indicating the initial state, and that the returned object can have more than one property. Modifying these states allows you to use the method This.setstate (object) provided by react, where an object can modify only one of the initial states, or it can modify more than one. When any state changes, react will recall the function pointed to by the Render property, which means that the component will be re-rendered.

The life cycle of a component is divided into three states:
Mounting: The real DOM is inserted
Updating: is being re-rendered
Unmounting: The real DOM has been removed
React provides two processing functions for each State, the will function is called before it enters the state, and the DID function is called after it enters the state, with three states totaling five processing functions.
Componentwillmount ()
Componentdidmount ()
Componentwillupdate (Object Nextprops, Object nextstate)
Componentdidupdate (Object Prevprops, Object prevstate)
Componentwillunmount ()
In addition, the REACT provides two special state processing functions.
Componentwillreceiveprops (Object Nextprops): Called when a loaded component receives a new parameter
Shouldcomponentupdate (Object Nextprops, Object nextstate): Called when the component determines whether to re-render
Var hello = react.createclass ({  getinitialstate: function  ()  {     return {      opacity: 1.0    };   },  componentDidMount: function  ()  {    this.timer  = setinterval (function  ()  {      var opacity =  this.state.opacity;      opacity -= .05;       if  (opacity < 0.1)  {        opacity  = 1.0;      }      this.setstate ({         opacity: opacity      });     }.bind (this),  100);  },  render: function  ()  {     return  (      <div style={{opacity: this.state.opacity}}>         Hello {this.props.name}       </div>    );   }); Reactdom.render (  
The above code, after the Hello component is loaded, sets a timer through the Componentdidmount method, which re-sets the transparency of the component every 100 milliseconds, causing a re-render. The point to note here is that bind (this) is used after the first parameter of the SetInterval, which is the timer trigger function, and the timer function cannot use this directly to get the State or property of the react, which requires binding this.
Summary:
Properties provided by react:
Getinitialstate Setting the default state
SetState Modify State
Render return Component
Componentwillmount () called before inserting the real DOM
Componentdidmount () called after inserting the real DOM
Componentwillupdate (Object Nextprops, Object nextstate) is called before re-rendering
Componentdidupdate (Object Prevprops, Object prevstate) is called after re-rendering
Componentwillunmount () called before moving out of the real DOM
Proptypes verifying that the properties of a component instance meet the requirements
Getdefaultprops sets the default value for component properties.
The last two properties are not covered in this article, see Http://www.ruanyifeng.com/blog/2015/03/react.html for more information
This article is from "__ No acted" blog, please make sure to keep this source http://wuzishu.blog.51cto.com/6826059/1739639
The react of node. JS Learning Notes