輸入命令，進(jìn)行初始化：

tyarn init -y

在命令輸入如下命令：

tyarn add umi --dev #項(xiàng)目中添加umi的依賴

在config.js文件中輸入以下內(nèi)存，以便后面使用：

//導(dǎo)出一個對象，暫時設(shè)置為空對象，后面再填充內(nèi)容 export default {};

在HelloWorld.js文件中輸入如下內(nèi)容：

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

在這里，可以會比較奇怪，怎么可以在js文件中寫html代碼，其實(shí)，這是react自創(chuàng)的寫法，叫JSX，后面我們再細(xì)說。

第三步，啟動服務(wù)查看頁面效果

#啟動服務(wù) umi dev

可以看到，通過/HelloWorld路徑即可訪問到剛剛寫的HelloWorld.js文件。

在 umi 中，可以使用約定式的路由，在 pages 下面的 JS 文件都會按照文件名映射到一個路由，比如上面這個例子，訪問 /helloworld 會對應(yīng)到 HelloWorld.js。

當(dāng)然了，也可以自定義路由，具體的路由配置在后面講解。

添加umi-plugin-react插件

umi-plugin-react插件是umi官方基于react封裝的插件，包含了13個常用的進(jìn)階功能。

具體可查看：https://umijs.org/zh/plugin/umi-plugin-react.html?

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

接下來，在config.js文件中引入該插件：

export default {plugins: [['umi-plugin-react', {//暫時不啟用任何功能}]] };

構(gòu)建和部署

現(xiàn)在我們寫的js，必須通過umi先轉(zhuǎn)碼后才能正常的執(zhí)行，那么我們最終要發(fā)布的項(xiàng)目是普通的html、js、css，那么應(yīng)該怎么操作呢？

其實(shí)，通過umi是可以進(jìn)行轉(zhuǎn)碼生成文件的，具體操作如下：?

umi build

首先，看到的是umi.js文件是一個已經(jīng)壓縮過的文件，然后搜索“hello world”，可以找到，我們剛剛寫的代碼已經(jīng)被轉(zhuǎn)碼了。

?

總結(jié)

以上是生活随笔為你收集整理的ReactJS入门之环境搭建以及编写HelloWorld程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。