React components
React Components
In this chapter we will discuss how to use components to make our applications easier to manage.
Next we seal a component that outputs "Hello World!". The component name is HelloMessage:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Instance analysis:
React.createClass method is used Generate a component class HelloMessage.
<HelloMessage /> Instance component class and output information.
Note that native HTML element names start with lowercase letters, while custom React class names start with uppercase letters. For example, HelloMessage cannot be written as helloMessage. In addition, you need to note that the component class can only contain one top-level label, otherwise an error will be reported.
If we need to pass parameters to the component, we can use the this.props object. The example is as follows:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="php" />,
document.getElementById('example')
);
</script>
</body>
</html> Run instance»
Click the "Run instance" button to view the online instance
In the above instance, the name attribute is passed through this. props.name to get.
Note that when adding attributes, The class attribute needs to be written as className, and the for attribute needs to be written as htmlFor. This is because class and for are reserved words in JavaScript.
Composite component
We can synthesize a component by creating multiple components, that is, separating the different functional points of the component.
In the following example, we implemented the component that outputs the website name and URL:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
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>
);
}
});
React.render(
<WebSite name="php中文网" site=" http://www.php.cn" />,
document.getElementById('example')
);
</script>
</body>
</html>Running example»
Click the "Run Instance" button to view the online instance
In the instance, the WebSite component uses the Name and Link components to output the corresponding information, which means that WebSite has instances of Name and Link.
