React简单介绍与基础语法

React 是一个用于构建用户界面的 JAVASCRIPT 库。属于MVC模式中的V部分（view）其具有性能高 代码逻辑简单等特点。
三个至关重要的库： react.min.js 、react-dom.min.js 和 babel.min.js

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。比如：const element =

Hello, world!

;
假设在html文件中我们有个div 此时 div 中的所有内容都将由 React DOM 来管理，所以我们将其称为 “根” DOM 节点。要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上。

那么如何更新元素渲染？
React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。
目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法。值得注意的是 React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

JSX：
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
当然我们不一定要使用JSX 但是其优点较多。
我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。比如：const element =

Hello, world!

;

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代
注释需要写在花括号
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

React组件：
如何使用组件使得我们的应用更容易来管理？