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，自動被引入，可以寫一些全局樣式，或者做一些樣式覆蓋。