WebStorm 下React和webpack的初始配置
喜歡WebStorm支援JSX語法和程式碼高亮以及程式碼提示。
1. 安裝環境
在一切開始前，請裝好Node.js的環境，確保npm命令可以使用。
Mac下請使用 brew install node 安裝。
2.WebStorm的配置
在WebStorm上預設開啟React編寫的js檔案程式碼會報錯，這時候需要去設定裡面 Languages&Frameworks => javaScript 勾選 JSX Harmony
Mac下 ‘CMD + , ‘開啟設定：
在Libraries下勾選如下:
3.建立專案
隨便建立一個資料夾，如 React_Demo ,用Webstorm開啟 File - Open 。然後建立的工程目錄大抵是這樣的：
在目錄下執行 npm init ,會讓你填寫一些相關資訊，可以不填，一路回車鍵預設就好了，填好後yes就可以了。
目錄下就會生成一個 package.json 檔案和 node_modules 資料夾，之後一些依賴配置都在裡面。
4.使用npm引入react和webpack
之前的做完後依次輸入以下命令，來引入react webpack依賴。
安裝react 、webpack寫入並儲存到開發環境中：
npm install react --save-dev
npm install webpack --save-dev在package.json就能看到相關依賴了。
5.配置webpack
在目錄下建立webpack.config.js,
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, './app/main.js'),
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
}
};entry相當於指定入口，這裡我們指定的是 main.js
main.js
var component = require('./component component.js
module.exports = function () {
var element = document.createElement('h1');
element.innerHTML = 'hello';
return element;
};上面的程式碼是簡單的react程式碼，寫好之後，那麼就要運行了。
6.執行專案
如果之前環境安裝正確，現在在目錄下執行webpack命令，成功的結果大致如下:
成功後會在build目錄下生成bundle.js檔案，這時候可以建立一個index.html檔案
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="build/bundle.js"></script>
</body>
</html>這時候點選html檔案右鍵執行,或者直接選擇你有的瀏覽器就開啟就可以了。
可以看下最後生成的程式碼：
其實就是：
component.js中生成的加上main.js生成的程式碼。
當demo執行後，下面就是好好去學習react的語法了。