react+webpack+es6精簡版HelloWorld · JS前端資源整理

1. 首先，建立項目目錄，npm init 初始化 npm 項目 mkdir react-start cd react-start npm init 2. 全局安裝 Webpack, Babel, Webpack-dev-server npm install babel webpack webpack-dev-server -g 3. 安裝 react, react-dom npm install react react-dom --save 4. 安裝 Babel 轉換器，需要用到插件 babel-preset-react, babel-preset-latest，latest 即最新的 ES 規范，包括了 Async/Await 這些新特性。 npm install babel-loader babel-core babel-preset-react babel-preset-latest --save 5. 創建項目文件，main.js 即項目入口文件，App.js 即 React 組件主文件不會命令行的，老老實實的到文件夾右擊吧： index.html App.js main.js webpack.config.js type . >index.html 6. Webpack 配置 ~~~ var path = require('path'); module.exports = { entry: './main.js', // 入口文件路徑 output: { path: path.resolve(__dirname, ''), filename: 'index.js' }, devServer: { inline: true, port: 3333 }, module: { loaders: [ { test: /\.js$/, // babel 轉換為兼容性的 js exclude: /node_modules/, loader: 'babel-loader', 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