$ npm install -g cnpm --registry=https://registry.npm.taobao.org $ npm config set registry https://registry.npm.taobao.org $ cnpm install [name] Build quickly $ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start
Open http://localhost:3000/ in your browser
2. React component
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
The React.createClass method is used to generate a component class HelloMessage.
<HelloMessage /> Instances the component class and outputs the message.
3. React Composite Components
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
ReactDOM.render(
<WebSite name="Rookie Tutorial" site=" http://www.runoob.com" />,
document.getElementById('example')
);
4. React State React treats components as a state machine (State Machines). Through interaction with the user, different states are achieved, and then the UI is rendered to keep the user interface and data consistent.
<script type="text/babel">
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' : 'dislike';
return (
<p onClick={this.handleClick}>
You <b>{text}</b>me. Click me to switch status.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
5. React props
The main difference between state and props is that props are immutable, while state can change based on interaction with the user. This is why some container components need to define state to update and modify data. And child components can only pass data through props.
Props verification
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="Runoob" />,
document.getElementById('example')
);
</script>
6. React Components API
Set state: setState Replace state: replaceState Set properties: setProps Replacement properties: replaceProps Force update: forceUpdate Get DOM node: findDOMNode Determine component mount status: isMounted
7. Component Lifecycle
componentWillMount is called before rendering, both on the client and the server. componentDidMount : called after the first render, only on the client side. After that, the component has generated the corresponding DOM structure, which can be accessed through this.getDOMNode(). If you want to use it with other JavaScript frameworks, you can call setTimeout, setInterval or send AJAX requests in this method (to prevent foreign operations from blocking the UI). componentWillReceiveProps is called when the component receives a new prop. This method will not be called when initializing render. shouldComponentUpdate returns a boolean. Called when the component receives new props or state. Not called during initialization or when using forceUpdate. Can be used when you are sure that you don't need to update components. componentWillUpdate is called when the component has received new props or state but has not yet rendered. Not called during initialization. componentDidUpdate is called immediately after the component has finished updating. Not called during initialization. componentWillUnmount is called immediately when the component is removed from the DOM.
8. React AJAX
The data of the React component can be obtained through Ajax in the componentDidMount method. When the database is obtained from the server, the data can be stored in the state, and then the UI can be re-rendered with the this.setState method.
When using asynchronous loading of data, use componentWillUnmount to cancel outstanding requests before the component is unmounted.
var UserGist = React.createClass({
getInitialState: function () {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result [0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
{this.state.username} User's latest Gist share address:
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
mountNode
);
9. React Forms and Events
http://www.runoob.com/react/react-forms-events.html
10. React Refs
React supports a very special property Ref that you can use to bind to the render() output on any component.
var MyComponent = React.createClass({
handleClick: function() {
// Get focus using native DOM API
this.refs.myInput.focus();
},
render: function() {
// When the component is inserted into the DOM, the ref attribute adds a reference to the component to this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="Click my input box to get focus"
onClick={this.handleClick}
/>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);