一,简介
- React 是一个用于构建用户界面的 JAVASCRIPT 库。
- React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
- React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
- React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它
二,特点
- 1.声明式设计 −React采用声明范式,可以轻松描述应用。
- 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
- 3.灵活 −React可以与已知的库或框架很好地配合。
- 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
- 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
- 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
三,构建
- $ npm install -g create-react-app
- $ create-react-app my-app
- $ cd my-app/
- $ npm start
注意:
- 1,使用淘宝镜像:
- $ npm install -g cnpm --registry=https://registry.npm.taobao.org
- $ npm config set registry https://registry.npm.taobao.org
- 第一个npm改成cnpm
- 2,如果install不成功,若报权限问题,可以在命令行前加sudo
- 3,倘若一直报错, 删掉主目录下面的npm nodule
四,开发模式
- 1,浏览器打开: http://localhost:3000/
- 2,使用codePan工具:https://codepen.io/gaearon/pen/ZpvBNJ?editors=0010
- 3,使用ES6转换JSX工具:helloWorld例子
- 4,在 Cloud Studio 中运行 React
五,项目结构分析
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
manifest.json
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
- manifest.json 指定了开始页面 index.html
- index.html里边有一个id=root的div
- index.js里边有个渲染函数:ReactDOM.render(<App />, document.getElementById('root'));
- 接受两个参数,一个是要转化的Element, 一个是渲染到什么地方
- 把虚拟DOM 转化成真实的DOM