ReactJS简介

官网： https://reactjs.org/

ReactJS把复杂的页面，拆分成一个个的组件，将这些组件一个个的拼装起来，就会呈现多样的页面。ReactJS可以用于 MVC 架构，也可以用于 MVVM 架构，或者别的架构

ReactJS圈内的一些框架简介：

Flux

Flux是Facebook用户建立客户端Web应用的前端架构，它通过利用一个单向的数据流补充了React的组合
视图组件，这更是一种模式而非框架。

Redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux可以让React组件状态共享变得简单。

Ant Design of React

阿里开源的基于React的企业级后台产品，其中集成了多种框架，包含了上面提到的Flux、Redux。Ant Design提供了丰富的组件，包括：按钮、表单、表格、布局、分页、树组件、日历等。

ReacJS其实思路也不难，就是构建了一个虚拟DOM的树，然后我们操作这颗树即可。

搭建环境

1、搭建UmiJS环境

UmiJS是应用级ReactJS框架，有点像在React的基础上进一步地封装。
首先你要安装 node.js ，这个在官网下就可以了
使用下面这个命令检查是否安装成功

node -v

#接下来，开始安装yarn，其中tyarn使用的是npm.taobao.org的源，速度要快一些
#可以把yarn看做了优化了的npm
npm i yarn tyarn -g #-g 是指全局安装
tyarn -v #进行测试，如果能够正常输出版本信息则说明安装成功了

下面开始安装umi

tyarn global add umi
umi #进行测试

2、初始化工程

tyarn init -y

添加umi依赖，当然也可以不加，因为之前已经放在了全局的module中了

tyarn add umi --dev #项目中添加umi的依赖

可以看到已经导入了相依的依赖
创建工程

3、初始化项目结构

在工程的根目录下创建config目录，在config目录下创建config.js文件。
UmiJS 采用“约定大于配置”的方式减少配置

其约定如下

.
├── dist/                          // 默认的 build 输出目录
├── mock/                          // mock 文件所在目录，基于 express
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二选一
└── src/                           // 源码目录，可选
    ├── layouts/index.js           // 全局布局
    ├── pages/                     // 页面目录，里面的文件即路由
        ├── .umi/                  // dev 临时目录，需添加到 .gitignore
        ├── .umi-production/       // build 临时目录，会自动删除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 页面
        ├── page1.js               // 页面 1，任意命名，导出 react 组件
        ├── page1.test.js          // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
        └── page2.js               // 页面 2，任意命名
    ├── global.css                 // 约定的全局样式文件，自动引入，也可以用 global.less
    ├── global.js                  // 可以在这里加入 polyfill
    ├── app.js                     // 运行时配置文件
├── .umirc.js                      // umi 配置，同 config/config.js，二选一
├── .env                           // 环境变量
└── package.json

在umi中，约定存放页面代码的文件夹是在src/pages，可以通过singular:false来设置单数的命名方式，采用默认即可。
umi文件夹

HellowWorld

编写第一个reactJS 构建的页面

import React from 'react'

class HelloWorld extends React.Component{
     render(){
          return <div>hello world</div>; 
     }
}

export default HelloWorld;

hello world

构建与部署

现在我们写的js，必须通过umi先转码后才能正常的执行。因此需要进一步的构建部署
具体操作如下：

umi build

然后umi就会自动帮你生成dist部署文件
在这里插入图片描述

UmiJS环境搭建