React全家桶的一种配置方法

初始化

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(
    
        {getRoutes()}
    ,
    document.querySelector("#app")
)

routes.jsx

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

import Layout from "./components/layout";

export default function(){
    return (
        
            
                 
Hello world!
 }  />    
                 
Hello login
  } />
                
               
        
    )
}

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

layout.jsx

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

export default class Layout extends Component{

    render(){
        return (
            

                

                    header
                
                

                    {getRoute()}
                
                

                    footer
                
            
        )
    }
}

routeItem.jsx

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


export default function(){
    return (
        
             
Hello Index!
 }  />    
             
{a.match.url}
  } />
           
    )
}