在本章中,我們將演示如何為React開(kāi)發(fā)建立一個(gè)環(huán)境。 請(qǐng)注意,涉及的步驟很多,但這此步驟將有助于以后加快開(kāi)發(fā)流程。 我們將需要NodeJS,所以如果您沒(méi)有安裝,請(qǐng)查看下面教程文章的鏈接 - http://www.yiibai.com/nodejs/node_install.html
安裝ReactJS有好幾種方法,這里重點(diǎn)介紹第1種方法,其它方法要選介紹演示。
注意:在編寫本教程時(shí),使用nodejs版本為:
v9.3.0
,npm的版本為:5.6.0
第1步 - 創(chuàng)建根文件夾
根文件夾將被命名為reactApp,我們將把它放在目錄:F:\worksp\reactjs。 創(chuàng)建文件夾后,打開(kāi)它,并通過(guò)命令提示符運(yùn)行npm init
來(lái)創(chuàng)建空的package.json
文件,并按照命令說(shuō)明進(jìn)行操作。
F:\worksp\reactjs> mkdir reactApp
F:\worksp\reactjs\reactApp> npm init
第2步 - 安裝全局包
我們將需要為這個(gè)設(shè)置安裝幾個(gè)軟件包。這里將需要一些babel
插件,所以首先通過(guò)在命令提示符窗口中運(yùn)行以下代碼來(lái)安裝babel
。
F:\worksp\reactjs\reactApp> npm install -g babel
F:\worksp\reactjs\reactApp> npm install -g babel-cli
第3步 - 添加依賴和插件
我們將在接下來(lái)的教程中使用webpack
捆綁器。所以需要安裝webpack
和webpack-dev-server
。
F:\worksp\reactjs\reactApp> npm install webpack --save
F:\worksp\reactjs\reactApp> npm install webpack-dev-server --save
既然要使用React,那么需要先安裝它。 --save
命令將把這些包添加到package.json
文件中。
F:\worksp\reactjs\reactApp> npm install react --save
F:\worksp\reactjs\reactApp> npm install react-dom --save
如前所述,我們需要一些babel
插件,所以也安裝它。
F:\worksp\reactjs\reactApp> npm install babel-core
F:\worksp\reactjs\reactApp> npm install babel-loader
F:\worksp\reactjs\reactApp> npm install babel-preset-react
F:\worksp\reactjs\reactApp> npm install babel-preset-es2015
第4步 - 創(chuàng)建文件
下面來(lái)創(chuàng)建一些需要的文件。 它可以手動(dòng)添加或使用命令提示符創(chuàng)建以下文件 -
先保持上面幾個(gè)文件的內(nèi)容為空。
第5步 - 設(shè)置編譯器,服務(wù)器和加載器
打開(kāi)webpack.config.js
文件并添加下面的代碼。將webpack
入口點(diǎn)設(shè)置為main.js
。 輸出路徑是提供捆綁應(yīng)用程序的地方。還將為開(kāi)發(fā)服務(wù)器設(shè)置為8080
端口。可以選擇你想要的任何端口。
最后,設(shè)置babel
加載器來(lái)搜索js文件,并使用es2015
并對(duì)之前安裝的預(yù)設(shè)做出反應(yīng)。
文件:webpack.config.js -
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
打開(kāi)package.json 并刪除在“scripts”
對(duì)象內(nèi)的語(yǔ)句:"test" "echo \"Error: no test specified\" && exit 1"
。因?yàn)樵诒窘坛讨胁粫?huì)進(jìn)行任何測(cè)試。接下來(lái)添加啟動(dòng)命令。
"start": "webpack-dev-server --hot"
在上述步驟之前,將需要webpack-dev-server
。 要安裝webpack-dev-server
,請(qǐng)使用以下命令。
F:\worksp\reactjs\reactApp> npm install webpack-dev-server -g
現(xiàn)在,可以使用npm start
命令啟動(dòng)服務(wù)器。 --hot
命令將在文件內(nèi)部更改內(nèi)容后添加實(shí)時(shí)重載,所以不需要每次更改的代碼就可以刷新瀏覽器。
第6步 - index.html
這只是普通的HTML代碼文件??蓪?code>div id = "app"設(shè)置為應(yīng)用程序的根元素,并添加index.js
腳本,這是捆綁應(yīng)用程序文件。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
第7步 - App.jsx和main.js
這是第一個(gè)React組件。我們將在后面的章節(jié)中深入講解React組件。 這個(gè)組件將顯示輸出:"Hello World !!!"
文件:App.jsx -
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
我們需要導(dǎo)入這個(gè)組件,并將其呈現(xiàn)給的根App元素,所以可在瀏覽器中看到它。
文件:main.js -
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
注 - 無(wú)論何時(shí)您想使用某些東西,都需要先導(dǎo)入它。如果您希望使組件在應(yīng)用程序的其他部分可用,則需要在創(chuàng)建后導(dǎo)出它,并將其導(dǎo)入到要使用它的文件中。
完整的目錄結(jié)構(gòu)如下所示 -
第8步 - 運(yùn)行服務(wù)器
設(shè)置完成,我們可以通過(guò)運(yùn)行以下命令啟動(dòng)服務(wù)器。
F:\worksp\reactjs\reactApp> npm start
執(zhí)行輸出如下 -
在我們的例子中,它打開(kāi)訪問(wèn)的URL是:http://localhost:8080/
,打開(kāi)之后,應(yīng)該會(huì)看到下面的輸出。
如果您喜歡使用自己的文本編輯器,也可以下載這個(gè)HTML文件( http://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html ),編輯它,并從瀏覽器的本地文件系統(tǒng)中打開(kāi)它。但它的運(yùn)行時(shí)代碼轉(zhuǎn)換很慢,所以不要在生產(chǎn)中使用它。