無奈,英語4級沒過,只能靠猜了。。css
首先就是安裝了node
npm install --save-dev react npm install --save-dev react-dom npm install --save-dev react-router@4 npm install --save-dev react-router-dom
無論有用沒用先裝上!!!react
新建一個webpack.config.js,這裏使用webpack2來打包jsxwebpack
var webpack = require("webpack"); var path = require("path"); module.exports = { context: __dirname + "/app/js", entry: { login: ["./login.js"], // 爲了未來的多入口寫法 }, devtool: "source-map", // 爲了能夠在控制檯跟蹤到本身的代碼位置,精確到行 output: { path: path.resolve(__dirname,"static/js"), // 輸出目錄 filename: "[name].bundle.js", // 輸出文件名 }, module: { rules: [ { test: /\.js|\.jsx/, exclude: /node_modules/, use: [{ loader: "babel-loader", options: { presets: ["es2015", "react", "babel-polyfill"] // 打包模塊,babel-polyfill是爲了讓axios兼容ie的,,不用promise對象能夠不寫 } }] }, { test: /\.css$/, use: [ { loader: "style-loader", options: { // modules: true // 設置css模塊化,詳情參考https://github.com/css-modules/css-modules } }, { loader: "css-loader", options: { // modules: true // 設置css模塊化,詳情參考https://github.com/css-modules/css-modules } }, // { // loader: "postcss-loader", // 添加瀏覽器前綴 // options: { // plugins: function () { // return [ // require('autoprefixer') // ] // } // } // } ] } ] }, devServer: { // 打包加自動刷新,webpack-dev-server --hot 能夠自動熱替換,,,雖然我並無感受到有多快。。。 contentBase: __dirname, host: '0.0.0.0', port: 5005, inline: true, historyApiFallback: true, } }
開始寫react-router啦
如下代碼,徹底複製於 https://reacttraining.com/react-router/web/example/basicios
import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' const BasicExample = () => ( <Router> // 建立一個路由 <div> <ul> // Link 組件 至關於a標籤,to屬性至關於a標籤中的href,能夠打開控制檯看到, <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/topics">Topics</Link></li> </ul> <hr/> // 監聽路由,地址欄的變化,,很抱歉exact的意思我如今都不知道,觀察到exact 在跟路由下,和exact={activeOnlyWhenExact} <Route exact path="/" component={Home}/> // 若是地址欄訪問了跟路徑,好比http://localhost:5005/ 就會去渲染<Home /> 組件 <Route path="/about" component={About}/> // 若是地址欄訪問了/about 路徑,好比http://localhost:5005/about 就會去渲染<About/> 組件 <Route path="/topics" component={Topics}/> // 若是地址欄訪問了topics 路徑,好比http://localhost:5005/topics 就會去渲染<Topics/> 組件 </div> </Router> )
這就是react-router的最簡單的用法,什麼附加功能都沒有,,僅僅是根據地址欄去渲染相應的組件!!!,,僅此而已,
不過這裏有一個特別坑的地方,若是你的當前路徑是http://localhost:5005/templates/的話,去訪問 /about 路由,地址欄會直接變成http://localhost:5005/about,,而後再也後退不回去了,,固然後面的教程裏確定有解決方法,只是我還不知道,。。git
以上代碼,徹底複製於 https://reacttraining.com/react-router/web/example/basicgithub