初始化
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>
)
}
