ReactJS学习(二)

2.2、ReactJS简介

官网：https://reactjs.org/

官方一句很简单的话，道出了什么是ReactJS，就是，一个用于构建用户界面的JavaScript框架，是Facebook开发的一款的JS框架。

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

ReactJS圈内的一些框架简介：

Flux

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

Redux

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

Ant Design of React

阿里开源的基于React的企业级后台产品，其中集成了多种框架，包含了上面提到的Flux、Redux。

Ant Design提供了丰富的组件，包括：按钮、表单、表格、布局、分页、树组件、日历等。

2.3、搭建环境

2.3.1、创建项目

我们依然选择使用UmiJS作为构建工具。

创建工程：

输入命令，进行初始化：

tyarn init -y

初始化完成：

在命令输入如下命令：

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

可以看到，相关的依赖已经导入进来了。

2.3.2、编写HelloWorld程序

第一步，在工程的根目录下创建config目录，在config目录下创建config.js文件。

在UmiJS的约定中，config/config.js将作为UmiJS的全局配置文件。

在umi中，约定的目录结构如下：

在config.js文件中输入以下内存，以便后面使用：

//导出一个对象，暂时设置为空对象，后面再填充内容
export default {};

第二步，创建HelloWorld.js页面文件

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

在HelloWorld.js文件中输入如下内容：

export default () => {
return <div>hello world</div>;
}

在这里，可以会比较奇怪，怎么可以在js文件中写html代码，其实，这是react自创的写法，叫JSX，后面我们再细说。

第三步，启动服务查看页面效果

#启动服务
umi dev

可以看到，通过/HelloWorld路径即可访问到刚刚写的HelloWorld.js文件。

在 umi 中，可以使用约定式的路由，在 pages 下面的 JS 文件都会按照文件名映射到一个路由，比如上面这个例子，访问 /helloworld 会对应到 HelloWorld.js。

当然了，也可以自定义路由，具体的路由配置在后面讲解。