React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机
1.声明式设计 ?React采用声明范式，可以轻松描述应用。2.高效 ?React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活 ?React可以与已知的库或框架很好地配合。4.JSX ? JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。5.组件 ? 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。6.单向响应的数据流 ? React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
在React中，数据的流向是单向的——从父节点传递到子节点，因为组件是简单而且易于把握的，他们只需从父节点获取props渲染即可，如果顶层组件的某个prop改变饿了，React会递归的向下便利整棵组件树，重新渲染所有使用这个属性的组件。
// 声明式
const element1 = React.createElement(
‘div‘,
{className:"greeting"},
‘哈哈‘
)
// 过程式
element2 = document.createElement ‘div‘
element2.className = ‘greeting‘
element2.innerHTML = ‘哈哈‘
// 类似于这样一种简化的结构
const element = {
type: ‘h1‘,
props: {
className: ‘greeting‘,
children: ‘Hello, world‘
}
};
ReactDOM.render(
element1,
document.getElementById(‘root‘)
);
组件化，实现代码的重用
react的使用离不开三个核心的库
// 新版本 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <!--react的与dom相关的一些功能--> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!--将浏览器不支持的jsx语法转化为js语法--> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> // 久版本 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!--react的核心库-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!--
<script> 标签的 type 属性为 text/babel 。
这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。
凡是使用 JSX 的地方，都要加上 type="text/babel" 。
-->
<script type="text/babel">
// ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘root‘) );
</script>
</body>
</html>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
相比开发环境进行了压缩和优化
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
原文：https://www.cnblogs.com/winner-one/p/9005106.html