Second, react experience of the first react component creation

(in the middle because of coping with various examinations, dealing with other things, a good time has not been updated, now finally have time, continue!) ）

This article is for react initial experience, so do not consider how the file organization, as far as possible in the simplest way to let everyone understand the principle of react.

Before you create a component (component), you need to know some basics first. Students with ES6, JSX grammar and other basic knowledge, please skip the following paragraph.

ES6 is the latest JavaScript standards, there are many new syntax, and even the "class" of inheritance, I personally think of them as a new number of "grammar sugar", these "grammatical sugars" may bring to the veteran's convenience, and for us these rookie is an understanding of the burden, But it has to be seen, because that's the trend. JSX syntax, we would like to think of a JS and HTML can be written together to deal with the syntax. The above content does not expand, there is time will be dedicated to open an article, do not know the children's shoes can first Baidu a bit.

Here's the point today: Action ...

The principle of react is actually very simple, see:

The above relationship: the action will affect the state data changes, state data changes caused by component changes, components change may cause new actions to produce, and then affect the state data changes ...

Component (component): To give you a "chestnut", I believe we all brush Weibo bar, every message in Weibo is equivalent to have a small panel to display information, this small panel inside there is a tweet person's avatar, micro-blog content, illustrations, as well as "forwarding", "comment", "like", This small panel can be understood as a general component, and each part of the panel can be thought of as a small component, and the widgets make up the final large component. Because the composition of each microblogging is similar, we only need to create such a panel component and reuse it. There is a props property in the component that holds the amount of the initial state of the component, called by the this.props.< variable name >, and sets the default initial Prop property value by Getdefaultprops (). Use Proptypes to set the type of props, whether it must be, etc.

Action: This should be familiar, like what Onclick,onchange,onblur, and so on, here are all the events supported by react, what the actions need to do to define what is going to be said later.

Status data (state): This is the core of react, and the change in components is caused by the change in the states. State is similar to props, the difference is that props once set does not change it, but the action change can cause changes in the status data (states) at any time, so that the re-rendering component (component) causes the change. The default state is set by Getinitialstate (), and the status value is changed by This.setstate ().

Say so much, start the actual combat it!!!

1. Create a folder to hold all the files for this example, I'll name him "Reactapp" and then CD into this folder NPM installs all the components mentioned in the previous article.

2. Create a new file named App.jsx, which is the place we mentioned to create the component. The following approximate structure is: A total component MyComponent contains two subcomponents Component1 and Component2, and the Name property is passed from top to bottom by the total component through the props attribute to each sub-component.

1 import React from ‘react’; // Introduce react module to create components
 2 
 3 var MyComponent = React.createClass ({// Create the total component, remember that the component name must be capitalized! Otherwise it will report an error !!!
 4 render: function () {
 5 return (
 6 <div>
 7 <Component1 name = (this.props.name) /> // Pass the name property through props
 8 <Component2 name = {this.props.name} />
 9 </ div>
10);
11}
12});
13
14 var Component1 = React.createClass ({// Create child component Component1
15 getDefaultProps: function () {// Set initial Props
16 return {
17 inputValue: `` Write something whatever, ''
18};
19},
20 getInitialState: function () {// Set the initial State
21 return {
22 content: "Hello World",
twenty three       };
twenty four     },
25 handleClick: function () {// User-defined action function
26 this.setState ({content: "is" + this.refs.myTextInput.value + "!!!"}); // for modifying state
27},
28 handleChange: function () {// User-defined action function
29 this.setState ((content: this.refs.myTextInput.value));
30},
31 render: function () {// The component render function, the outermost layer can only have one label! !! !! !! !!
32 return (
33 <div>
34 <h1> {this.props.name}: Component1 </ h1>
35 <input type = "text" ref = "myTextInput" placeholder = {this.props.inputValue} onChange = {this.handleChange} />
36 <input type = "button" value = "click" onClick = {this.handleClick} />
37 <h3> {this.state.content} </ h3>
38 </ div>
39);
40},
41});
42
43 var Component2 = React.createClass ((// Create child component Component2
44
45 getInitialState: function () {// Set the default initial value of state
46 return {
47 counter: 0,
48};
49},
50 handleAdd: function () {// action function, state plus one
51 this.state.counter + = 1;
52 this.setState ((counter: this.state.counter)); // Set the current state value
53},
54 handleMinus: function () {// action function, state minus one
55 this.state.counter- = 1;
56 this.setState ((counter: this.state.counter));
57},
58 handleBack: function () {// action function, state return to zero
59 this.state.counter = 0;
60 this.setState ((counter: this.state.counter));
61},
62 render: function () {// Component rendering
63 return (
64 <div>
65 <h1> {this.props.name}: Component2 </ h1>
66 <input type = "button" value = "Add 1" onClick = {this.handleAdd} />
67 <input type = "button" value = "Minus 1" onClick = {this.handleMinus} />
68 <input type = "button" value = "Back 0" onClick = {this.handleBack} />
69 <h2> {this.state.counter} </ h2>
70 </ div>
71);
72},
73});
74 export {MyComponent}; // Component output, (Insert a digression here, export is a module loading method developed by ES6, used in conjunction with import, and exports is a CommonJS standard, used in conjunction with require, etc., their differences have a chance Another article will be) 

3, although the component is built, but the browser does not know this form of components, this time need to use another library react provided "React-dom", its role is to render the component to the real DOM tree, very simple new file named Main.js.

1 import React from ‘react’; // Introduce the “react” component
2 import ReactDOM from ‘react-dom’; // Introduce “react-dom” component
3 import {MyComponent} from ‘./App.jsx’;//Introduce the MyComponent component we just wrote
4 ReactDOM.render (<MyComponent name = "chen" />,document.getElementById(‘app ‘))

Card! To this end, the process of component creation is basically finished, the next article will mainly talk about how to use this component in the Nodejs under the Webpack package and hot load mode, let him really run up, the last article more after I will put the whole example on GitHub, interested students can go to see, try.

Write in the last n paragraphs:

1, the advantage of react is that it will first create a virtual DOM, just like the components we wrote above, if the data in the component is updated, it does not go directly to the real Dom in the browser, but first in its own virtual components created by using the diff algorithm, to find different local changes, It is then rendered to the browser. The fact that there is not a lot of manipulation of the real DOM means that the browser-side rendering speed is accelerated, which is basically the core of react.

2, in the creation of the component (Component), we only used a small part of the function or property, there is no use such as:

①proptypes, which is a JSON object that sets the type of props property in the component, such as number,string, to ensure the security of the attribute;

② component in the time of rendering will have several states, react officially called it lifecycle Methods, in fact, is set in the component rendering to the browser what to do, after rendering what, the corresponding API is as follows:

Componentwillmount ();//Before component rendering

Componentdidmount ();//After the component rendering is complete

Componentwillupdate ();//Due to action driver, component before update

Componentdidupdate ();//component after the update is complete

Componentwillreceiveprops ();//component before accepting to props

。。。 There are also a lot of functions about the state of component changes, you can click here to query.

Second, react experience of the first react component creation