React基本语法格式
一、搭建React工作环境:
1、React 特点
- 1.声明式设计 −
React
采用声明范式,可以轻松描述应用。 - 2.高效 −
React
通过对DOM
的模拟,最大限度地减少与DOM
的交互。 - 3.灵活 −
React
可以与已知的库或框架很好地配合。 - 4.JSX −
JSX
是JavaScript
语法的扩展。React
开发不一定使用JSX
,但我们建议使用它。 - 5.组件 − 通过
React
构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。 - 6.单向响应的数据流 −
React
实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
2、React 安装
可以直接使用 Staticfile CDN 的 React CDN 库,地址如下:
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
官方提供的 CDN 地址:
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
练习中我采用以下方式:
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/babel" src="js/index.js"></script>
3、环境安装中引入了三个库
1、React
的核心库:react.development.js
。
2、React
进行Dom
操作的库:react-dom.development.js
。
3、将JSX
语言转换为JavaScript
语言库:babel.min.js
。Babel
可以将 ES6
代码转为 ES5
代码,这样我们就能在目前不支持 ES6
浏览器上执行 React
代码。Babel
内嵌了对 JSX
的支持。通过将 Babel