01 React开发(环境搭建,最详细教程)

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

1 创建项目

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

创建工程:

01 React开发(环境搭建,最详细教程)_第1张图片

01 React开发(环境搭建,最详细教程)_第2张图片 01 React开发(环境搭建,最详细教程)_第3张图片

输入命令,进行初始化:

tyarn init -y

 01 React开发(环境搭建,最详细教程)_第4张图片

在命令输入如下命令:

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

01 React开发(环境搭建,最详细教程)_第5张图片

2 编写Hello World程序 

第一步,在工程的根目录下创建config目录,在config目录下创建config.js文件。在UmiJS的约定中,config/config.js将作为UmiJS的全局配置文件。

01 React开发(环境搭建,最详细教程)_第6张图片
在umi中,约定的目录结构如下:

01 React开发(环境搭建,最详细教程)_第7张图片

在config.js文件中输入以下内容,以便后面使用:

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

第二步,创建HelloWorld.js页面文件
在umi中,约定存放页面代码的文件夹是在src/pages,可以通过singular:false来设置单数的命名方式,我们采用默认即可。
01 React开发(环境搭建,最详细教程)_第8张图片

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

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

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

#启动服务
umi dev

01 React开发(环境搭建,最详细教程)_第9张图片

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

3 添加umi-plugin-react插件

在package.json中加上下面这句话

 "@umijs/preset-react": "^1"

idea会自动引入插件 

01 React开发(环境搭建,最详细教程)_第10张图片

4 构建和部署

现在我们写的js,必须通过umi先转码后才能正常的执行,那么我们最终要发布的项目是普通的html、js、css,那么应该怎么操作呢?
其实,通过umi是可以进行转码生成文件的,具体操作如下:

umi build

01 React开发(环境搭建,最详细教程)_第11张图片

01 React开发(环境搭建,最详细教程)_第12张图片

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

01 React开发(环境搭建,最详细教程)_第13张图片 首先,看到的是umi.js文件是一个已经压缩过的文件,然后搜索“hello world”,可以找到,我们刚刚写的代码已经被转码了。至此,开发环境搭建完毕。

你可能感兴趣的:(React)