React 初识之Umi项目搭建实战

一、创建项目

创建之前需要安装 Node.js 和 npm yarn 这俩个环境

在WebStorm里面创建一个项目，输入命令：yarn create umi 

弹出选项，这里我们选择第二项APP。

选择是否使用typescript，这里选no，typescript:yes(是) 文件类型改变 (具有扩展名 .dts)

这里启用dva功能，选择第二个

项目结构构建成功

安装yarn，输入yarn进行安装。（这里需要等待一段时间）

安装完成后，输入yarn start启动项目。

配置成功则出现 http://localhost:8000/ 

访问地址：http://localhost:8000/ 

我们在page目录下创建一个user.js

代码如下↓

import React,{ Component } from 'react';

class user extends Component{

  render() {
    return (
    <div>测试导出页面</div>
    )
  }
}
export default  user;

.umirc.js  注释掉如下代码

  // routes: [
  //   {
  //     path: '/',
  //     component: '../layouts/index',
  //     routes: [
  //       { path: '/', component: '../pages/index' }
  //     ]
  //   }
  // ],

 

再次访问user：http://localhost:8000/user

上面的布局是因为layouts下的全局设置，注释掉layouts的index.js代码

再次访问

二、目录结构原理分析

• render

通过上面的例子，我们可以了解到page目录下是可以直接访问通过导出render（路由）返回标签来渲染页面。

这里我们可以把render理解为JAVA MVC 的view。

• assets

assets这个目录则是存放一些资源的，比如图片。

• layouts

layouts 则是全局布局，实际上是在路由（view）外面套了一层。

• __tests__

测试文件，umi test 会查找所有的 .(test|e2e).(j|t)s 文件跑测试。

• global.css

这个文件不走 css modules，自动被引入，可以写一些全局样式，或者做一些样式覆盖。