webpack-es6-react （爲系統學習React佈一個良好的開局）

本項目已做廢，替代項目爲 React-Study，歡迎交流學習。

項目地址：webpack-es6-react

這是一個基礎的，綜合了webpack，es6，react的學習模板。

本模板也方便你對 react 生態圈中其餘相關知識的學習，好比你想學習 react-router,redux 或是 css-modules均可以以此模板爲基礎進行延伸學習。

webpack-es6-react

本模板應用瞭如下技術

• React

• Babel 6

• Webpack 咱們的構建工具

• Webpack Dev Server

• React Transform 可讓 React 組件局部自動實時更新（而不是刷新頁面）

Demo

使用方法

git clone https://github.com/minooo/webpack-es6-react.git
cd webpack-es6-react 
npm install
npm start
打開 http://localhost:5000/

注意：package.json 的 scripts 中內置了三個命令
start 用於開發模式，方便調試，擼碼
build 開發完畢後，就能夠打包文件了，固然這個模板足夠簡單，不能應用於實際生產中，這裏只是一個示範。
lint 檢測你的js代碼是否規範。

package.json 中的部分 包/庫 說明

• babel-core babel6 的基礎模塊

• babel-eslint ESLint 是前端JS代碼檢測利器。而 babel-eslint 則容許你檢測全部的 Babel 代碼。

• babel-loader 這個包容許你使用 Babel 和 webpack 轉譯（Transpiling） JavaScript 文件。

• babel-plugin-react-transform 這個插件經過任意轉換的方式去封裝 React 組件。換句話說，你能夠爲所欲爲的擺弄你的組件了。

• babel-plugin-transform-runtime 在 Babel 轉換過程當中，詳細的展現引用的相關輔助工具和內置命令，並自動的聚合填充你的代碼而不會污染全局。

• babel-preset-es2015 此預設包含了全部的 es2015 插件。

• babel-preset-react 此預設包含了全部的 React 插件。

• babel-preset-stage-0 此預設包含了 stage 0 中的全部插件。

• eslint JavaScript 語法檢測利器：分析出你代碼潛在的錯誤和非標準用法。

• eslint-plugin-react ESLint 中關於 React 語法檢測的插件。

• react-transform-hmr 一個 React 轉換裝置，該裝置經過引用 Hot Module Replacement API 使熱重載 React 的類成爲可能。

• react-transform-catch-errors 呈現你 React 組件的錯誤信息。

• webpack-dev-server 爲 wepack app 提供一個服務器，若是你的代碼有任何變化，瀏覽器將自動刷新顯示，極大的方便前期開發。

• babel-runtime Babel 自帶的運行環境。

根目錄下部分文件說明

• .babelrc : 什麼是 .babelrc 文件呢？熟悉 linux 的同窗必定知道，rc 結尾的文件一般表明運行時自動加載的文件，配置等。一樣在這裏也是有一樣做用的。裏面的 env 字段，能夠對 BABEL_ENV 或 NODE_ENV 指定不一樣的環境變量，進行不一樣編譯。

• eslintignore 通知 eslint 忽略那些不該該被檢測的文件。

• eslintrc eslint 配置文件，使 JavaScript 代碼規範化，標準化書寫。

爲何要作這個模板

react 如今已經不能簡單的說是一個庫了，而是一個生態系統。圍繞其出現的新技術層出不窮，而 babel 的出現讓咱們提早用上了下一代 javascript——es6， 做爲前端的咱們勢必要緊隨時代潮流。