简介
React是FaceBook公司发布的一套UI框架,基于JavaScript,用于构建“可预期”和“声明式”的web用户界面。
这套体系包括:1. React.js; 2.ReactRender 3. ReactUI框架 4. React Native 5. Flux模式及其实现 等等。
基本概念
1. React.js
React.js 是 React 的核心库,在应用中必须先加载核心库
2. ReactDOM.js
ReactDom.js 是 React 的Dom渲染器,React把核心库和渲染器分开, 为了在web页面中显示开发的组件,需要调用ReactDOM.render方法,第一个参数是React组件,第二个参数是HTMLElement。
3. JSX
作用:描述DOM元素
一种 JavaScript 的语法扩展, 在React中使用JSX来描述用户界面。 JSX是React自定义的语法,可以理解成用js编写的xml格式代码。最终jsx会转化为js运行与页面中。
4. 组件
组件是React的核心,页面中的所有元素都是通过React组件来表达。
5. VIRTUAL DOM
React抽象出来的虚拟DOM树,虚拟树是React高性能的关键。
6. 单向数据流: one-way reactive data flow
React 应用的核心设计模式,数据流自顶而下(组件层级关系传递)
环境搭建
1. 线上地址:https://codepen.io/pen?&editors=0010或 https://codesandbox.io/s/new
2. 最小化html环境:只需要像使用jQuery一样,引入react.js 和 react-dom.js 就可以来使用react了。type="type/label"
3. Create-react-app
步骤:1. npm install -g create-react-app
2. create-react-app my-app
3. 进入目录
4. npm start 运行目录
生产版本
上面是我们在开发过程中使用react的方式, 具体在生产环境中,可以按照下面这个来配置不同的生产环境
https://doc.react-china.org/docs/optimizing-performance.html#create-react-app
项目结构分析
运行方式:入口页面:index.html 入口js:index.js app组件(app.js)
组件库的安装与使用
官网:https://ant.design/index-cn
安装步骤:https://ant.design/docs/react/introduce-cn
Ant Design:国内的UI框架, 偏业务需求 http://1x.ant.design/
Material-ui: 更多动画的支持 http://www.material-ui.com/#/
React-bootstrap:虽然Bootstrap也是facebook的产品, 但是对于React并没有那么多的投入资源