其實(shí)在今年年初，就初略的寫過一篇關(guān)于react項(xiàng)目創(chuàng)建的詳細(xì)步驟的文章，但那時(shí)候都是在最后實(shí)踐完成之后自己憑借著回憶來寫的，難免會(huì)漏掉很多細(xì)節(jié)，以及其過程所遇到的各種問題，今天，出于好奇，準(zhǔn)備再次一探究竟，就react 項(xiàng)目創(chuàng)建的一些步驟以及一些需要的注意的問題做個(gè)系統(tǒng)的介紹，也算是給自己提個(gè)醒。
1、node安裝
首先，需要node環(huán)境支持，如果你還沒有安裝node.js，請(qǐng)移步nodejs官網(wǎng)。
這里，隨便下載哪一個(gè)都可以，小編推薦下載最新版的。下載完成后按照步驟安裝即可。
2、初始化項(xiàng)目。
npm init
到最后，你的項(xiàng)目根目錄會(huì)多一個(gè)package.json的文件。
3、添加項(xiàng)目依賴
接下來，我們打開package.json文件，給項(xiàng)目添加依賴包。當(dāng)然，最簡(jiǎn)單的方法便是直接修改package.json文件，然后通過npm install安裝依賴即可，但是考慮到依賴包的不斷更新迭代，或許今后的不久就已經(jīng)不是當(dāng)前版本，為了能保證，我們每個(gè)看到這邊文章的童鞋都是用的最新依賴包，我們直接通過npm install ?** ?--save-dev方式來安裝我們依賴包。
首先，我們來安裝dependencies：
npm install --save react react-dom lodash
按理來說，上面的命令并沒有任何問題，但是小編卻在這里遇到一個(gè)坑，那就是項(xiàng)目取名為react，然后再安裝react的時(shí)候被拒絕，如下圖所示：
當(dāng)然，解決方法就是重新命名，為了避免不必要的麻煩，還是推薦小伙伴們不要把項(xiàng)目名稱命名成你要安裝的包名，譬如：react，webpack等等。
淚的教訓(xùn)：如果你遇到上述的錯(cuò)誤，請(qǐng)刪掉該項(xiàng)目重新新建一個(gè)項(xiàng)目，因?yàn)闊o論如何也還是會(huì)報(bào)這個(gè)錯(cuò)誤，包括重啟也是于事無補(bǔ)。
再次安裝react的時(shí)候，切忌一定要安裝到生產(chǎn)依賴。
npm install --save-dev react
不出意外，應(yīng)該是可以了，接下來我們就可以安裝其他依賴。
npm install babel babel-core babel-loader babel-preset-es2015 babel-preset-react css-loader style-loader react-router webpack webpack-dev-server
npm install react-dom lodash --save
最后提醒一下，webpack和webpack-dev-server這兩個(gè)包需要全局安裝。
npm install -g webpack webpack-dev-server
到這里我們的依賴包就安裝完畢。
以下便是package.json的最終代碼：
{
"name": "react-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"react": "^15.3.0",
"react-hot-loader": "^1.3.0",
"react-router": "^2.6.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"lodash": "^4.15.0",
"react-dom": "^15.3.0"
}
}
4、配置webpack
新建一個(gè)webpack.config.js文件。
var webpack = require("webpack")
var path = require("path")
module.exports = {
devtool: "inline-source-map",
entry: [
"webpack-dev-server/client?http://127.0.0.1:8080/",
"webpack/hot/only-dev-server",
"./app"
],
output: {
path: path.join(__dirname, "public"),
filename: "bundle.js"
},
resolve: {
modulesDirectories: ["node_modules", "app"],
extensions: ["", ".js"]
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ["react-hot", "babel?presets[]=react,presets[]=es2015"]
},
{
test: /\.css?$/,
exclude: /node_modules/,
loaders: ["style", "css"]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
}
以上便是webpack的基本配置，具體的webpack配置以后會(huì)單獨(dú)介紹。
5、項(xiàng)目文件
index.html
<!DOCTYPE html>
<html>
<head>
<title>React demo</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
index.js
import React from 'react'
import {render} from 'react-dom'render(
render(<div>hello wold</div>,document.getElementById("app"));
這個(gè)時(shí)候，一個(gè)簡(jiǎn)單的hello word就已經(jīng)完成，運(yùn)行如下命令
webpack-dev-server
使用瀏覽器打開http://127.0.0.1:8080就能看到hello world。這里的webpack-dev-server可以實(shí)時(shí)監(jiān)測(cè)文件修改，已實(shí)時(shí)觀看最終效果。
但是每次要預(yù)覽效果，我們要輸入這么一大串，難免有所不便，
打開package.json文件，找到scripts結(jié)點(diǎn)，更改如下所示：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server"
}
這樣，我們就只需要在命令行中輸入：
npm run dev
當(dāng)然，如果你嫌上面的步驟太過繁瑣，你可以直接下載github上面的代碼，然后直接運(yùn)行：
npm install
