React 虽然是个很简单的 UI 库，API 也很少，但是在实际项目中却发现要搭配各种技术栈，例如 Webpack, Babel, Redux, React Router, CSS Modules, NPM, ES6/7 等等，仿佛怎么也学不完，很多人开始吐槽前端发展混乱，例如文章：2016 年学 JavaScript 是一种什么样的体验？吐槽归吐槽，扩充自己的技术栈，了解国外前端都在玩什么，毕竟不是坏事。
本系列教程不需要预先了解太多原理，跟着做，实践之后不懂再去查看文档，更有利于入门。
TIP: NPM 下载慢可以切换到淘宝源：NPM 切换淘宝源
1. 首先，建立项目目录，npm init 初始化 npm 项目
mkdir react-start
cd react-start
npm init2. 全局安装 Webpack, Babel, Webpack-dev-server
sudo npm install babel webpack webpack-dev-server -g3. 安装 react, react-dom
npm install react react-dom --save4. 安装 Babel 转换器，需要用到插件 babel-preset-react, babel-preset-latest，latest 即最新的 ES 规范，包括了 Async/Await 这些新特性。
npm install babel-loader babel-core babel-preset-react babel-preset-latest --save5. 创建项目文件，main.js 即项目入口文件，App.js 即 React 组件主文件
touch index.html App.js main.js webpack.config.js
6. Webpack 配置
module.exports = {
entry: './main.js', // 入口文件路径
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3333
},
module: {
loaders: [
{
test: /\.js$/, // babel 转换为兼容性的 js
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'latest']
}
}
]
}
}
6. 其他文件内容，一些基本的 React 和 ES6 基础，不做过多讲解了。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Start</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
App.js
import React from 'react';
class App extends React.Component {
render() {
return <div>Hello World</div>
}
}
export default App
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'))
7. 配置 npm scripts, 编辑 package.json
"scripts": {
"start": "webpack-dev-server"
},8. 基本的框架搭建完毕，npm start 然后打开 http://localhost:3333 试试
npm start
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。