同一层次上的多个元素需要被包裹在一个容器元素中，如上图中的<div>元素。
属性JSX提供了一系列的元素属性，旨在对应HTML提供的属性。这些自定义的属性也可以传递给组件，所有的属性都会被组件作为props接收。
JavaScript表达式JavaScript表达式（但不是语句）可以在JSX内部通过大括号{}使用。
上面代码的显示结果是：
条件语句
If-else语句不能在JSX中使用，但可以使用条件表达式来代替。下面的例子当i为1时将 { i === 1 ? 'true' : 'false' } 呈现为字符串 'true'。
结果会是：
函数和JSX可以用于条件表达式中:
结果会是：
用JSX编写的代码需要被Babel等工具进行转换以后才能被Web浏览器所理解，这种处理一般是在软件构建过程中进行的，然后再部署构建后的应用程序。
超越HTML的架构React的基本架构不仅仅适用于在浏览器中渲染HTML。例如，Facebook有动态图表，可以渲染到<canvas>标签，而Netflix和PayPal使用通用加载，在服务器和客户端上渲染相同的HTML。
React Hooks
Hooks是让开发者从函数组件中 "钩入"React状态和生命周期特性的函数。它们使代码具有更强的可读性且更易理解。Hooks并不在类组件内工作，它的终极目标是在React中消除类组件的存在。
React提供了一些内置的Hooks，如useState、useContext、useReducer和useEffect等。它们都在Hooks API参考书中做了说明。使用最多的是useState和useEffect，分别在React组件中控制状态和检测状态变化。
Hooks规则Hooks也有一些规则，在使用Hooks之前必须遵循这些规则:
钩子只能在顶层调用（不能在循环或if语句中调用）。
钩子只能在React函数组件中调用，不能在普通函数或类组件中调用。
定制Hooks构建自己的Hooks，也就是所谓的自定义Hooks，可以让你把组件逻辑提取到可重用的函数中。自定义钩子是一个名称以 "use "开头的JavaScript函数，它可以调用其他的钩子。钩子的规则也适用于它们。
常用术语React并没有试图提供一个完整的 "应用程序库"。它是专门为构建用户界面而设计的，因此并不包括许多一些开发者认为构建应用程序所需的工具。这使得开发者可以选择任何一个库来完成诸如执行网络访问或本地数据存储等任务。这种情况也就决定了React技术在创建网页应用时标准无法统一。
Flux架构的使用