快速学习ReactJS-搭建环境

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文件中输入如下内容:

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

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

#启动服务  umi dev

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

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

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

2.3.3、添加umi-plugin-react插件

umi-plugin-react插件是umi官方基于react封装的插件,包含了13个常用的进阶功能。 具体可查看:https://umijs.org/zh/plugin/umi-plugin-react.html

#添加插件  tyarn add umi-plugin-react --dev

添加成功:

接下来,在config.js文件中引入该插件:

2.3.4、构建和部署

现在我们写的js,必须通过umi先转码后才能正常的执行,那么我们最终要发布的项目是普通的html、js、css,那么应该怎么操作呢?

其实,通过umi是可以进行转码生成文件的,具体操作如下:

umi build

可以看到,已经生成了index.html和umi.js文件。我们打开umi.js文件看看。

首先,看到的是umi.js文件是一个已经压缩过的文件,然后搜索“hello world”,可以找到,我们刚刚写的代码已经被转码了。

至此,开发环境搭建完毕。