React全家桶的一种配置方法

2018-07-25  本文已影响221人  罗超伟

初始化

mkdir [项目目录]
cd [项目目录]
npm init

包安装

npm install react react-dom redux react-redux react-router react-router-dom redux-thunk roadhog antd 
npm install -D babel-plugin-dva-hmr babel-plugin-transform-runtime

调试

npm start

打包

npm build

文件结构

1111.png

文件内容

.roadhogrc

{
    "entry":"src/index.jsx",
    "env": {
        "development": {
          "extraBabelPlugins": [
            "dva-hmr",
            "transform-runtime"
          ]
        },
        "production": {
          "extraBabelPlugins": [
            "transform-runtime"
          ]
        }
      }
}

package.json

{
  "name": "firstdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "roadhog server",
    "build":"roadhog build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "antd": "^3.1.4",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "roadhog": "^2.2.0"
  },
  "devDependencies": {
    "babel-plugin-dva-hmr": "^0.4.1",
    "babel-plugin-transform-runtime": "^6.23.0"
  }
}

index.jsx

import './index.html'

import { render } from "react-dom";

import { Provider } from "react-redux";

import store from "./store";
import getRoutes from "./routes";

render(
    <Provider store={store}>
        {getRoutes()}
    </Provider>,
    document.querySelector("#app")
)

routes.jsx

import { BrowserRouter,Route,Switch } from "react-router-dom";

import Layout from "./components/layout";

export default function(){
    return (
        <BrowserRouter >
            <Switch>
                <Route exact path="/" render={()=> <div>Hello world!</div> }  />    
                <Route exact path="/login" render={()=> <div>Hello login</div>  } />
                <Route path="*" component={Layout} />
            </Switch>   
        </BrowserRouter>
    )
}

store.jsx

import { combineReducers,createStore,applyMiddleware } from "redux";
import thunk from "redux-thunk";

let reducer = combineReducers({
    //reducer write in here
    login:function(state={},action){
        return state;
    }
});

let initState = {

};

export default applyMiddleware(thunk)(createStore)(reducer, initState);

index.html

index.jsx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>[Title]</title>
</head>
<body>
    <div id="app"></div>
    <script src="./index.js"></script>
</body>
</html>

layout.jsx

import React,{Component} from "react";
import getRoute from "./routeItem";

export default class Layout extends Component{

    render(){
        return (
            <div>
                <div>
                    header
                </div>
                <div>
                    {getRoute()}
                </div>
                <div>
                    footer
                </div>
            </div>
        )
    }
}

routeItem.jsx

import { Route,Switch } from "react-router-dom";


export default function(){
    return (
        <Switch>
            <Route exact path="/index" render={()=> <div>Hello Index!</div> }  />    
            <Route path="*" render={(a)=> <div>{a.match.url}</div>  } />
        </Switch>   
    )
}
上一篇 下一篇

猜你喜欢

热点阅读