react與umi

我們知道umi 是一個編譯工具，但它同時也是一個前端框架。它對社區的 webpack，react-router 等進行的封裝，
使得我們可以基於它快速搭建一個 React 項目。
第一步：安裝umi

第二步：創建目錄，並寫入配置


在 umi 中，約定的存放頁面代碼的文件夾是 pages，是復數，不過我們可以添加 singular 為 true 來讓 page 變為約定的文件夾。
接下來讓我們創建第一個頁面組件

這樣第一個頁面就創建完成了。
接下來我們就可以通過 umi 來啟動代碼了。
首先需要在 package.json 中的 scripts 里面添加兩個命令。

第三步：運行項目


如果我們要自己配置路由，我們會怎么配置呢？

再運行項目我們就可以看到

當有了 routes 的配置之后 umi 就不會再執行約定式對應的路由邏輯了，而是通過配置聲明的路由。
第四步：添加 umi-plugin-react 插件
umi 是一個可插拔的企業級 react 應用框架，它的很多功能都是通過插件實現。尤其是 umi 官方的 umi-plugin-react 這個插件
集成了常用的一些進階的功能。
首先通過 cnpm install umi-plugin-react --save-dev 來安裝該插件集。然后在配置文件 config/config.js 中引入該插件：

第五步：構建和部署
我們可以通過來構建和部署項目。
我們可以看到增加了一個dist目錄

我們可以繼續發散一下子，如果我們在項目里面定義一個父子組件，又該怎么樣進行demo呢？

再定義一個子組件ShoppingList


最后看我們的運行結果

詳細demo可以見我的github：https://github.com/JserJser/reactWebApp/tree/master/antd-course
本文借鑒自博客：https://www.yuque.com/ant-design/course