元素
在每一个React制作的页面中，必须有一个根div，如：
<div id="root"></div>
当React代码执行时，通过ReactDOM.render()将React元素或React组件添加进div中，以使得页面被绘制：
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
); // 第二个参数是要插入的DOM对象
React一旦创建就无法更改，你无法修改它的特性和子元素。通常来说ReactDOM.render()只应该被调用一次。
组件
组件像是一个类，可以创建多个组件实例，每个实例有自己特定的特定属性。
可以通过函数的方式来创建一个组件：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
只要接受一个props参数的函数都可以是有效的JSX组件。不接受props参数的也可是一个有效的JSX组件，前提是函数内不使用props对象。注意props全部小写，且只读。
我们也可以通过class语法来创建组件：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
前面看到，JSX表达式可以使用HTML标签，实际上JSX表达式还可以使用组件作为标签。例如，对于上述 Welcome组件，我们可以像下面这样引用：
const element = <Welcome name="Sara" />;
将上述代码组合在一起后，完整代码如下：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
将会输出 Hello Sara。
可以多次使用自定义组件：
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
什么是State？组件中如何处理事件？
好，这一节就到这里。后续我将逐步介绍React技术细节，来慢慢解答上述问题。
想学计算机技术吗？需要1对1专业级导师指导吗？想要团队陪你一起进步吗?欢迎加我为好友！微信号：iTekka。
