25. React Introductory Tutorial

0. React introduction 0.1 What is react?

React (sometimes called react.js or Reactjs) is an open-source JavaScript library that provides rendering HTML views for data.

It is maintained by Facebook, Instagram, and a community of individual developers and businesses, and is now popular with Facebook, Imgur, Airbnb, Uber, Instagram, domestic American group, Ali, big search car, Where to wait is the use of react technology.

The logo is an atom with a nucleus in the middle and a 3-electron trajectory next to it.

0.2 fb Why launch react?

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.

React is to solve what problem, on the official website can find such a sentence:

We built React to solve one problem:building large applications with data, changes over time.

Data changes bring two problems, a lot of DOM operations (automatic DOM manipulation), logic and its complexity (state and content correspond) 0.3 react history

React, created by Facebook's engineer, Jordan Walke, was affected by the PHP HTML component library XHP, react in 11 when it was first deployed on Facebook newsfeed;

Then deployed on Instagram in 12 and announced open source in jsconf us in May 13

14 became Facebook's first open source project to reach 10,000 star on GitHub,

React Native was released in Jsconf,facebook in March 15, and react was used to build nativeapp and put forward its own idea "learn once,write anywhere".

April 16, the release of the official version of V15, but still not stable, this is the latest technology.

0.4 React Features

Declarative design: Use declarative paradigms to easily describe applications

Efficient: Minimizes interaction with the DOM through simulations of the DOM

Flexible: Easy to use with other libraries

JSX: Is the extension of JS syntax

Components: Building components for easy reuse

One-way corresponding data flow

0.5 How to learn react

Chinese community: http://reactjs.cn/

Gitbook:https://www.gitbook.com/book/hulufei/react-tutorial/details

Rookie Tutorial: Http://www.runoob.com/react/react-tutorial.html

Book: React leading the future user Interface Development Framework (PDF ebook in the literature)

1. Understanding React1.1 Overview 1.1.1 Core Ideas

The core idea of react is: encapsulating components.

Each component maintains its own State and UI, and automatically redraws the entire component when the state changes.

1.1.2 Core Concepts

Core concepts in react:

Concept 1: Components

Concept 2:JSX

Javascriptxml, not the new language, also did not change the syntax of JS, just the extension of JS,

Using react, it is recommended to use the JSX syntax, native JS can also, but because jsx in the definition of HTML-like tree structure, it is very simple and clear, want to recommend the use of JSX syntax.

Concept 3:virtual DOM

If this is really a large area of operation of the DOM, the performance will be a big problem, so React implemented a virtual DOM, the component DOM structure is mapped to this virtual DOM, React on this virtual DOM implementation of a diff algorithm, when the component is to be updated by the DI FF finds the DOM node to be changed and updates the modification to the actual DOM node of the browser, so it is not really rendering the entire DOM tree. This virtual DOM is a purely JS data structure, so the performance will be much faster than the native DOM.

The previous mention of virtual Dom and the real Dom has no semantics, but there are obviously different APIs.

The nodes on the DOM tree are called elements, and the virtual DOM is a completely different abstraction, called components.

The use of component is extremely important in React because the presence of components makes it more efficient to compute DOM diff

Example:

For example, now your list is like this,
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
You want to turn it into something like this
<ul>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
What is the usual operation?
First of all, 0, three-to-one these element is deleted, and then add a few new element 6,7,8,9,10 in, where there are 4 element delete, 5 element added.
And react will take these two to do a diff, and then found that actually do not delete 0,1,2,3, but can directly change the innerHTML, and then only need to add an element (10) on the line, so that is 4 times innerHTML operation plus 1 element added, More than 9 times the element operation!

Concept 4:data Flow

One-way data binding. means that the data is automatically rendered to the page after it is updated, avoiding frequent DOM operations in the business.

2. Build React development environment 2.1 dependence

Dependent on three libraries: React.js, React-dom.js and browser.js;

They must be loaded first. Among them, React.js is the core library of react, React-dom.js is to provide DOM-related functions, browser.js the role is to convert JSX syntax to JavaScript syntax,

2.2 Creating a template file

The above code has two places to be aware of. First, the Type property of the last <script> tag is Text/babel. This is because React's unique JSX syntax is incompatible with JavaScript. All use JSX place, must add Type= "Text/babel"

3. Hello React3.1. Begin

Create 1.html

  reactdom.render (            <H1></H1> , document.getElementById (' example ')    );

3.2. Render Method Introduction

Reactdom.render (

document.getElementById (' example ')

);

Reactdom.render is the most basic method of React for converting a template to an HTML language and inserting a specified DOM node

4. JSX Syntax 4.1 Basic grammar rules

Encountered HTML tags (beginning with <), using HTML to parse, encountered code block (beginning with {) with JS to parse

JSX allows the use of HTML syntax to create JS objects, take the creation of a tag as an example, if using native JS, is this:

React.createelement (' A ', {href: ' https://facebook.github.io/react/'}, ' hello! ')

When you use the JSX syntax, it becomes this:

<a href= "https://facebook.github.io/react/" >Hello!</a>

Basic syntax rules for JSX:

Next, create 2.html to validate the above syntax.

var names = [' Daxu ', ' dongdong ', ' Wenhua '];    Reactdom.render (            <div>                {                    names.map (function name) {                            return <div> Hello {name}</div >                        })                }            </div>,          document.getElementById (' example ')    )

　　

Careful classmates will find that the top of the code when running, there will be a warning, because:

React in order to facilitate DOM rendering, for each thing to have a separate key, we do not set the top, so there will be a warning, here first regardless of it.

4.2 JavaScript expressions

We can use JavaScript expressions in Jsx, where expressions are written in {}, such as: Create 3.html

var arr = [            
　　
5 Component 5.1 Creating and using components
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
Create 4.html
    var hellomsg = React.createclass ({        render:function () {            return <div>
　　
In the above code, the variable hellomsg is a component class. When a template is inserted < hellomsg/>, an instance of Hellomsg is automatically generated ("component" below refers to an instance of the component Class). All component classes must have their own render method for the output component.
Note that the first letter of the component class must be capitalized, otherwise the display will be problematic, such as HelloMessage cannot be written as HelloMessage. In addition, the component class can contain only one top-level label, otherwise there will be a problem.
Make a slight change to the above code:
The usage of the component is exactly the same as the native HTML tag and can be arbitrarily added to attributes, such as 
5.2 Common methods of recognizing props5.3
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. That represents all child nodes of a component
It is important to note that there are three possible values for This.props.children: If the current component has no child nodes, it is undefined; if there is a child node, the data type is object, and if there are multiple child nodes, the data type is array. So be careful when dealing with This.props.children.
React provides a tool method React.children to handle This.props.children. We can use React.Children.map to traverse the child nodes without worrying about whether the This.props.children data type is undefined or object
Create 5.html
var MyList = react.createclass {        render:function () {            return (                    <ol>                    {                        React.Children.map ( This.props.children, function (child) {                                return <li>{child}</li>                            })                    }                    </ol>            ) ;        }    });    Reactdom.render (    <MyList>            <span>lesson1</span>            <span>lesson2</span >            <span>lesson3</span>    </mylist>,            document.getElementById (' example ')    );
　　
5.3 Composite Components
We can synthesize a component by creating multiple components, separating the different function points of the component.
The following example implements the components of the output site name and URL:
Create 6.html
6, Vdom
A component is not a real DOM node, but rather a data structure that exists in memory, called the virtual Dom. Only when it is inserted into the document will it become the real DOM. According to the design of React, all DOM changes occur first on the virtual DOM, and then the actual changes are reflected in the real DOM, which is called Dom diff, which can greatly improve the performance of the Web page.
However, sometimes it is necessary to get the node of the real DOM from the component, then use the ref attribute
In the code above, the child nodes of the component mycomponent have a text input box to get the user's input. At this point, the real DOM node must be obtained, and the virtual DOM cannot be entered by the user. In order to do this, the text input box must have a ref attribute and then this.refs. [RefName] will return this true DOM node.
It is important to note that due to the this.refs. The [RefName] property gets the real DOM, so you must wait until the virtual DOM is inserted into the document before you can use this property, or you will get an error. In the above code, by specifying the callback function for the Click event for the component, it ensures that the this.refs is not read until the Click event occurs in the real DOM. [RefName] property.
React components support many events, in addition to the Click event, there are KeyDown, Copy, Scroll, etc.
7, state7.1 know state
Components inevitably interact with users, and react's innovation is to view components as a state machine, start with an initial state, and then interact with the user, causing state changes, triggering a re-rendering of the UI.
To achieve this, react has a state in it, as long as you update the component's state, and then re-render the user interface (not the DOM) according to the react to decide how to update the DOM most efficiently.
7.2 Use Cases
The state is required for changes to the text field (user input) and for the server request to respond.
7.3 How to use
Method Description:
Method 1:getinitialstate   Defines the initial state, which is an object
Method 2:setstate can get the object defined in Getinitialstate, and if the call SetState modifies the state value, the This.render method is automatically called after each modification, rendering the component again
7.4 Cases
    var Likebutton = React.createclass ({        getinitialstate:function () {            return {liked:false};        },        Handlerclick:function (event) {            this.setstate ({liked:!this.state.liked});        },        render:function () {            var text = this.state.liked? ' Like ': ' Don't like ';            Return (                <p onclick={this.handlerclick}>                 {text} This.click to toggle!                </p>            );        }    )    Reactdom.render (            <likebutton/>,document.getelementbyid (' example ')    )
　　
The above code is a LikeButton component whose getInitialState method is used to define the initial state, which is an object that can be read through the this.state property. When the user clicks on the component, causing the state to change, the this.setState method modifies the state value and, after each modification, automatically invokes this.render the method and renders the component again.
8. Component life Cycle 8.1 life cycle status
Mounting is already plugged in, really dom.
Updating is being re-rendered
Unmounting has moved out of the DOM
8.2 Processing function of the state
React provides two processing functions for each state:
1. The'll function is called before it enters the state
2. The did function is called after entering the state,
Three states total five types of processing functions:

 
  

  
   
 
    
§componentwillmount () Ready to insert
 
    
§componentdidmount () has been inserted
 
    
§componentwillupdate (Object Nextprops, Object nextstate) ready to update
 
    
§componentdidupdate (Object Prevprops, Object prevstate) has been updated
 
    
§componentwillunmount () is ready to be removed from the DOM.
 
   
 
  
8.3 Case Study
    var Hello = React.createclass ({getinitialstate:function () {return {                opacity:1.0};                }, Componentwillmount:function () {Console.log (' Preparing to join Dom ');                    }, Componentdidmount:function () {Console.log (' already added Dom ');                        This.timer = setinterval (function () {var op = this.state.opacity;                        op-=0.5;                        if (Op < 0.1) {op = 1.0;                        };                    This.setstate ({opacity:op});                }.bind (this), 1000); }, Render:function () {return (<div style={{opacity:this .state.opacity}}> Hello {This.props.name} </div>)}) reactd Om.render (
　　
9. Use ref and State to implement a multiplication calculator
As follows:
    var Lianxi = React.createclass ({        getinitialstate:function () {            return {result:0};        },        Handlerclick: function () {            this.setstate ({result:this.refs.num1.value*this.refs.num2.value});        },        render:function ( {            return (                            <div>                    <input type= ' number ' ref= ' num1 '/>                    <input type= ' number ' ref= ' num2 '/>                            <button  onclick={this.handlerclick}> multiplier </button>                            <p >{this.state.result }</p>                </div>            )        }    );    Reactdom.render (<lianxi/>, document.getElementById (' example '));
　　
25. React Introductory Tutorial