写这篇文章的主要目的是为了加强自己的记忆，也给别的同事一个快速入门的教程。
如果你觉得下载React环境比较麻烦，那么你可以直接打开CodePen,在这个页面直接进行demo的练习可以很直观的看到效果。
简单示例
介绍什么的就不说了，百度一搜一大堆，我们直接进入正题。
先来一个最简单的演示：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
这段代码就会在页面上打出“Hello，world!”，自己可以在上文介绍的链接中试一试。
JSX
这里先介绍一下jsx，看名字很唬人，其实就是html和js的结合显示，其实看起来有点像模板语言，例如freemarker、thymeleaf等，具体怎么编译和解析它，我们不用去关心，有专门的解析器(babel ...)去做这个事。
const element = <h1>Hello, world!</h1>;
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
上面的“element”都符合jsx，并且jsx也可以给属性赋值：
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
使用双引号或者大括号均可赋值，但是不能一起使用。
并且在被赋值的属性一定是遵循驼峰命名法的例如上例中的“tabIndex”在html中是“tabindex”。
如果标签中没有内容形如<……><……/>可以直接写为</>，例如：
const element = <img src={user.avatarUrl} />;
JSX也支持标签拥有子类，例如：
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
并且，JSX能够有效的防止注入攻击，默认情况下，在呈现之前，DOM会转义嵌入在JSX中的任何值。因此，它可以确保永远不会注入在应用程序中没有显式编写的任何内容。在呈现之前，所有的内容都转换为字符串。
在React中我们会大量的使用JSX和ES6语法，希望正在读这篇文章的各位有这个基础，关于ES6的学习，这里介绍ES6标准入门（第三版 阮一峰 著）。
当然，希望大家能去买正版的书，毕竟是人家的劳动成果。
元素
元素（element）是React应用中最小的构建块。和浏览器DOM的element相比，React的element就是一个简单的对象，创建的代价相当低，由React DOM负责将React elements匹配到对应的DOM节点。
注意：不要将元素（element）和组件（component）的概念混淆。
将元素渲染到DOM
首先，得创建一个接收节点：
<div id="root"></div>
在设计这个地方要显示什么内容的时候，要先考虑最终以什么样的方式呈现内容，因为一般只有一个root节点。
通过调用 ReactDOM.render() 将React element渲染到root DOM 节点：
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
你可以在CodePen中尝试一下。
更新元素
React element 一旦创建就是不可变的，你不能改变他的属性或是其他任何东西。如果你想要动态的改变页面的显示，那么最适合的方式就是重新创建一个element（如果名字相同，只会更新要修改的那一句，相当高效）并调用ReactDOM.render()，举个栗子 ^ _ ^：
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>
It is{' '}
{new Date().toLocaleTimeString()}.
</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
//你可以用浏览器调试工具监控这段代码的刷新情况，会有更深的印象。
好的，先写这么多。如果对你的学习有用，请关注我~~
