React及JSX语法的基本介绍

React

1. React是一个用于构建用户界面的 JavaScript 库。
2. React主要用于构建UI
3. React起源于 Facebook 的内部项目，用来架设 Instagram 的网站
4. React 拥有较高的性能，代码逻辑非常简单

• 特点

1. 声明式设计:React采用声明范式，可以轻松描述应用
2. 高效 :React通过对DOM的模拟，最大限度地减少与DOM的交互
3. 灵活 :React可以与已知的库或框架很好地配合
4. JSX :JSX 是JavaScript语法的扩展
5. 组件:通过 React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
6. 单向响应的数据流:React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单

使用React的两者方式

• 使用CDN或者本地引入js文件
  如果在html中直接使用react需要导入react.js、react-dom.js、babel.min.js
  react.js:React的核心库
  react-dom.js: 提供操作DOM的扩展库
  babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

• 使用脚手架

1. 全局安装脚手架和yarn
   cnpm install -g create-react-app yarn
2. 使用脚手架创建工程
   create-react-app react-demo
3. 启动工程
   cd react-demo
yarn start

---

JSX (JavaScript XML)

react定义的一种类似于 XML 的 JavaScript 语法扩展。JSX是javascript的语法糖。

• 优点：

1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2. 它是类型安全的，在编译过程中就能发现错误。
3. 使用 JSX 编写模板更加简单快速。
   注释要写在花括号中{/*...*/}