- 安装--使用npm
- 元素渲染
React只定义一个根节点，由 React DOM 来管理。通过ReactDOM.render()方法将元素渲染到根DOM节点上。
React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法
React实例一：
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
React实例二：
<div id="example"></div>
<script type="text/babel">
const element = <h1>Hello, world!</h1>
ReactDOM.render(
element,
document.getElementById('example')
);
</script>
实例三：
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);- JSX（javascript的语法扩展，是在javascript内部实现的）
在 React 中使用 JSX 来描述用户界面。元素是构成React应用的最小单位，jsx就是用来生命Reac当中的元素。
JSX示例：
const element = <h1>Hello, world!</h1>;
规范：
1.使用js表达式、数组、注释，都写在{}中
2.不能使用if判断，可使用三元表达式
3.推荐使用内联样式，使用驼峰命名法，数字后不用写px，react会自动添加
- React组件
原生html是小写字母开头，自定义的组件需要大写字母开头，意组件类只能包含一个顶层标签
1.可以使用函数定义组件
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
const element = <HelloMessage /> 为用户自定义的组件。
2.向组件传递参数，可以使用 this.props 对象
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
