Find react Primer on GitHub for a better demo, here's the link:
Https://github.com/ruanyf/react-demos
Then the following is the learning notes for each demo:
Demo1:
<body>
<div id= "Example" ></div>
<script type= "TEXT/JSX" >//jsx type can be written in HTML and javasript, encountered HTML tags, with HTML rules parsing, encountered code block, with JavaScript rules parsing.
React.render (//react.render is the most basic method of React for converting a template to an HTML language and inserting a specified DOM node
document.getElementById (' example ')//Add a H1 header, insert exmaple node
);
</script>
</body>
Demo2:
Js:array.map (Callback[,thisarg]) calls the defined callback function for each element of the array and returns an array containing the results. return value: A new array in which each element is the return value of the callback function for the associated original array element.
<body>
<div id= "Example" ></div>
<script type= "TEXT/JSX" >//jsx type can be written in HTML and javasript, encountered HTML tags, with HTML rules parsing, encountered code block, with JavaScript rules parsing.
var names = [' Alice ', ' Emily ', ' Kate '];
React.render (
<div>
{
Names.map (function (name) {
Return <div>hello, {name}!</div>
})
}
</div>,
document.getElementById (' example ')//Insert the contents of <div> into the example node
);
</script>
</body>
DEMO3:
<body>
<div id= "Example" ></div>
<script type= "TEXT/JSX" >
var arr = [
];
React.render (
<div>{arr}</div>//arr will all traverse the show.
document.getElementById (' example ')
);
</script>
</body>
Demo4:
<body>
<div id= "Example" ></div>
<script type= "TEXT/JSX" >
var hellomessage = React.createclass ({//create class corresponding to React component HelloMessage
Render:function () {////) The render interface of the content that needs to be output when the component is rendered (used) must be implemented
Return }
});
React.render (
An instance of the document.getElementById (' example ')//hellomessage is inserted into the example node.
);
</script>
</body>
1.react.createclass () Creates a class for the React component that describes the various behaviors you will create for the component, where the render interface of the content that needs to be output when the component is rendered must be implemented.
2. Variable HelloMessage is a component class. When a template is inserted into
?? Important: All component classes must have their own render method for the output component.
3. The usage of the components is exactly the same as the native HTML tags and can be arbitrarily added to attributes, such as
Demo5:
<script type= "TEXT/JSX" >
var noteslist = React.createclass ({//create class corresponding to React component Noteslist
Render:function () {////The Render interface of the content that needs to be output when the component is rendered (used) must be implemented
Return (
<ol>
{
This.props.children.map (function (child) {//.props.children takes all child nodes of a component
Return <li>{child}</li>
})
}
</ol>
);
}
});
React.render (
<NotesList>
<span>hello</span>
<span>world</span>
</noteslist>,
Document.body//The case of <NotesList> is inserted into the body.
);
</script>
Attention?? : Only when the child node extra 1, This.props.children is an array, otherwise it can not use the map method, will be error.
DEMO6:
<body>
<div id= "Example" ></div>
<script type= "TEXT/JSX" >
var mycomponent = React.createclass ({
Handleclick:function () {//Event post-click handler function
React.finddomnode (this.refs.myTextInput). focus ()//finddomnode get the real dom,this.refs.mytextinput point to this virtual DOM Sub-node Mytextinput
},
Render:function () {
Return (
<div>
<input type= "text" ref= "Mytextinput"/>//ref property
<input type= "button" value= "Focus the text input" Onclick={this.handleclick}/>//onclick Click event. Calling the Handleclick method
</div>
);
}
});
React.render (
<mycomponent/>
document.getElementById (' example ')//Inserts the MyComponent instantiation into example.
);
</script>
</body>
The HTML Dom:focus () method is used to set the focus.
1. The 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.
2. The child node of the component MyComponent has 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] points to the child nodes of the virtual DOM, and finally gets the nodes of the real DOM through the React.finddomnode method.
Note: Since the React.finddomnode method obtains the true DOM, you must wait until the virtual DOM is inserted into the document before you can use this method, otherwise it will return null. In the above code, the React.finddomnode method is called only after the click event of the real DOM has been specified by specifying the callback function for the Click event for the component.
3.React components support many events, in addition to the Click event, there are KeyDown, Copy, Scroll, change, etc.
Demo7:
Consider a component as a state machine, initially having an initial state, and then interacting with the user, resulting in a state change that triggers a re-rendering of the UI
This.state State Machine
<body>
<div id= "Example" ></div>
<script type= "TEXT/JSX" >
var Likebutton = React.createclass ({//Create class for component Likebutton
Getinitialstate:function () {//getinitialstate defines the initial state
return {liked:false};
},
Handleclick:function (Event) {//click event
This.setstate ({liked:!this.state.liked}); Set the state This.setstate method to modify the state value, after each modification, automatically call the This.render method, render the component again
},
Render:function () {
var text = this.state.liked? ' Like ': ' haven\ ' t liked ';////this.state object extract state will change as the user interacts. Props not.
Return (
<p onclick={this.handleclick}>
You {text} this. Click to toggle.
</p>
);
}
});
React.render (
<likebutton/>
document.getElementById (' example ')
);
</script>
</body>
Demo8:
The user fills in the form the content, belongs to the user interacts with the component, therefore cannot read with the This.props
<body>
<script type= "TEXT/JSX" >
var Input = React.createclass ({
Getinitialstate:function () {//Definition initialization
return {value: ' hello! '};
},
Handlechange:function (Event) {//Change the method of event invocation
This.setstate ({value:event.target.value});//event.target.value gets the value entered by the user
},
Render:function () {
var value = This.state.value;
Return (
<div>
<input type= "text" Value={value} onchange={this.handlechange}/>//onchange event occurs when the contents of the domain change.
<p>{value}</p>
</div>
);
}
});
React.render (<INPUT/>, document.body);
</script>
</body>
In the above code, the value of the text input box cannot be read with This.props.value, but to define a callback function for the OnChange event to read the user input value by Event.target.value. This is the case for textarea elements, select elements, radio elements.
Demo9:
The life cycle of a component is divided into three states:
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.
In addition, the REACT provides two special state processing functions.
<body>
<script type= "TEXT/JSX" >
var Hello = React.createclass ({
Getinitialstate:function () {
return {
opacity:1.0
};
},
Componentdidmount:function () {//component is inserted after DOM execution
This.timer = setinterval (function () {//timer timer, SetInterval () method allows a piece of code to run once every specified time
var opacity = this.state.opacity;
Opacity-=. 05; .05 I don't know what that means, is it 0.05?
if (Opacity < 0.1) {
opacity = 1.0;
}
This.setstate ({//this.setstate method modifies the state value, automatically calls the This.render method after each modification, renders the component again
Opacity:opacity
});
}.bind (this),//.bind change this point inside the function, see below for details:
},
Render:function () {
Return (
<div style={{opacity:this.state.opacity}}>//{{opacity:this.state.opacity}} because the react build style is an object, the first significant parenthesis indicates that this is The JavaScript syntax, with the second significant parenthesis representing the style object.
Hello {This.props.name}
</div>
);
}
});
React.render (
Document.body
);
</script>
</body>
The 1.bind method creates a new function, called a binding function. When this binding function is called, the binding function passes the first parameter of the Bind method as this when it is created, The second and later parameters of the incoming bind method plus the arguments of the binding function itself are invoked in order as arguments to the original function.
Demo10:
Ajax
The data source of the component, usually obtained from the server via an AJAX request, can be set with the Componentdidmount method, wait until the request succeeds, and then re-render the UI with the This.setstate method
<body>
<script type= "TEXT/JSX" >
var usergist = React.createclass ({
Getinitialstate:function () {
return {
Username: ",
Lastgisturl: "
};
},
Componentdidmount:function () {
$.get (This.props.source, function (result) {//$.get () a GET request in jquery. The first parameter is a link, and result is the value returned by the request
var lastgist = result[0];
if (this.ismounted ()) {//ismounted Determines whether the component exists.
This.setstate ({
Username:lastGist.owner.login,
LastGistUrl:lastGist.html_url
})
}
}.bind (this));
},
Render:function () {
Return (
<div>
{This.state.username} ' s last gist is
<a Href={this.state.lastgisturl}>here</a>.
</div>
);
}
});
React.render (
<usergist source= "Https://api.github.com/users/octocat/gists"/>
Document.body
);
</script>
</body>
Reference Tutorial: http://www.ruanyifeng.com/blog/2015/03/react.html
Thank you, the great God.
Learn the summary of the React starter demo.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
