React Components 简介
component 意为组件、零件，React带给我们的并不是像jQuery那样的众多方便方法，而是一个全新的概念——组件化，我们的网站（或者 Web App）可以分化成一个个组件，就像现在修高楼一样，先把各种龙骨在工厂生产好，再组装。例如，一个网站有导航栏，主体，我们就把这两个东西分开，不在一个html中全部写完，而是分开“制作”，甚至主体中的文章有标题栏和正文，我们也可以将其组件化。
你问组件化有什么好处，至少在我们学习的过程中，没有好处，甚至会加大学习成本，但是试想，在一个大型项目，是不是组件化后更能检测出问题和BUG呢，毕竟不需要在一个庞大的页面中寻找错误了。
第一个 React 组件
做一些小改变
开始写组件之前，我们先将之前的index.html中的JSX部分分离，以方便后续步骤：
Step1：在public目录下新建app.jsx文件；
Step2：将原index.html中的JSX代码移动到进app.jsx；
Step3：将index.html的<script>标签修改为：<script type="text/babel" src="app.jsx"></script>;
修改完成后，index.html文件应该如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React-1</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="app.jsx"></script>
</body>
</html>
我们新建的app.jsx应该如下：
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById("app")
);
React.createClass();
现在我们开始编写第一个React组件，React组件并不是由什么神奇的技巧变成的，而是通过调用React.createClass();方法，生成一个组件，并且将其赋给一个变量，而那个变量就代表了我们的组件，（注意：React.createClass();中的React是React众多模块的一个，它有很多方法给我们使用，与我们之前使用的ReactDOM模块等同。） 例如我们在app.jsx中这样写：
var Words = React.createClass({
render:function(){
return (
<div>
<h1>Hello React Component</h1>
</div>
);
}
});
ReactDOM.render(
<Words/>,
document.getElementById("app")
);
我们使用React.createClass();创建了一个组件，我们想让这个组件有内容，只需要在此方法中返回一个对象（Object），这个对象中使用render成员，并且给这个成员赋一个方法，这个方法使用JSX返回一些内容。这样后，这个组件会准备渲染(render)一个<div><h1>Hello React</h1></div> ，这就是一个小组件，虽然没用，但是能体现React组件的思想。然后我们把这些都赋给一个变量var Words。
接着我们在ReactDOM.render()中使用这个组件，非常简单，只需要使用<Words/>这样既代表Words组件。我们在终端中使用node server.js，开启服务器监听3000端口，出现图图示则第一个组件创建成功！
window-8.png
现在我们在
React.createClass();中添加一个<p>标签：
var Words = React.createClass({
render:function(){
return (
<div>
<h1>Hello React Component</h1>
<p>This is a paragraph</p>
</div>
);
}
});
刷新浏览器，出现如下：
window-9.png
我们并没有在
ReactDOM.render(
<Words/>,
document.getElementById("app")
);
中添加任何内容，而页面却渲染了p标签的内容，这是因为我们在React.createClass();的render方法中添加了，而我们在渲染<Words/>组件时，内容就会自动被渲染。这就是组件的好处，我们要修改页面的内容或者功能时，只需要在相应的组件中修改，这样能大大提高我们的效率，虽然在这个很小的项目中还看不出来。
在 React.createClass(); 中需要注意的地方
创建组件中的render成员方法中，只允许返回一个根标签，你不能返回多个根标签。
//正确，只有一个根标签<div>
var Words = React.createClass({
render:function(){
return (
<div>
<h1>Hello React Component</h1>
<p>This is a paragraph</p>
</div>
);
}
});
//错误，根标签不唯一
var Words = React.createClass({
render:function(){
return (
<h1>Hello React Component</h1>
<p>This is a paragraph</p>
);
}
});
如果我们非要渲染两个标签的内容，那么我们只需要将他们放进一个<div>标签即可；
网友评论