我的项目地址 https://github.com/holidaying/reactSeed
我的项目 demohttp://www.aishop.store/reactSeed/dist/pc/index.html#/login
脚本配置
"build": "webpack --config ./build/webpack.build.conf.js && node ./build/distserver.js",
"build:pc": "webpack --config ./build/webpack.build.conf.js && node ./build/distserver.js & gulp copy --sysname=pc",
"build:web": "webpack --config ./build/webpack.build.conf.js && node ./build/distserver.js & gulp copy --sysname=web",
"dev:pc": "webpack-dev-server --hot --open'google chrome'--progress --config ./build/webpack.dev.conf.js --sysname=pc",
"dev:web": "webpack-dev-server --hot --open'google chrome'--progress --config ./build/webpack.dev.conf.js --sysname=web",路由
react-router
<Router >
<Switch>
<Route exact path='/login' component={Login} />
<Route path="/">
<div className="app-container">
<NavApp></NavApp>
<div className="main-container">
<Switch>
<Route path="/index">
<Index />
</Route>
<Route path="/log">
<Log/>
</Route>
<Route path="/devops">
<Devops/>
</Route>
</Switch>
</div>
</div>
</Route>
</Switch>
</Router >申请
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
app.post('/education/api/login', function (req, res) {
// 接管申请参数
console.log(req.body.username);
res.cookie("oath", Token.createToken(req.body.username, Date.now()), {maxAge: 900000, httpOnly: true});
res.send({"data": true})
})事件、循环
handleSubmit(){login({username:this.state.username,password:this.state.password}).then(res=>{this.props.history.push('/index')
})
}
render() {
return (<div className="login-container">
<video src="/video.mp4" muted autoPlay loop="loop" className="video-bg"></video>
<div className="form-login">
<Input placeholder="请输出用户名" name="username" value={this.state.username} type="text" onChange={(e)=>this.handleChange(e)} />
<Input placeholder="请输出明码" name="password" value={this.state.password} type ="password" onChange={(e)=>this.handleChange(e)} />
<div className="footer">父子消息传递
父组件给子组件传递数据：间接在调用子组件的中央传递数据即可。
调用子组件的办法：简略说就是给子组件，通过 ref 起个名字，而后在父组件的点击事件中，通过 this.refs. 子组件的名字. 子组件的办法来实现
子组件调用父组件的办法。在调用子组件的中央将办法传递，子组件中通过 this.props。父组件传递的办法即可
子组件给父组件传递数据：通过调用父组件的办法时，通过 callback 回调传递数据。this.props. 父组件的办法（传递的数据）
组件
function 函数、class es6 语法
按需
利用 react-loadable 这个高级组件，要做到实现按需加载这一点，咱们将应用的 WebPack，babel-plugin-syntax-dynamic-import 和 react-loadable。
npm i –save-dev babel-plugin-syntax-dynamic-import
npm i –save-dev react-loadable
typescript
单元测试
兄弟节点信息传递 redux 和 eventhub
（1）Web 利用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保留在一个对象外面。
多页面
new HtmlWebpackPlugin({
title: '主页面',
filename: 'index.html',
template: resolve('../src/template/index.html'),
hash: true, // 会在打包好的 bundle.js 前面加上 hash 串
inject: "body",
chunks:["home"]
}),
new HtmlWebpackPlugin({
title: '跳转页面',
filename: 'page.html',
template: resolve('../src/template/page.html'),
hash: true, // 会在打包好的 bundle.js 前面加上 hash 串
inject: "body",
chunks: ["page"]
})
],依赖动静加载和独立部署
微前端
乾坤 /sigle-spa
前端微服务化解决方案 1 – 思考
前端微服务化解决方案 2 – Single-SPA
前端微服务化解决方案 3 – 模块加载器
前端微服务化解决方案 4 – 音讯总线
前端微服务化解决方案 5 – 路由散发
前端微服务化解决方案 6 – 构建与部署
前端微服务化解决方案 7 – 动态数据共享
前端微服务化解决方案 8 – 二次构建
docker
可拜访 https://hub.docker.com/_/nginx 查看 python 镜像源
FROM nginx:1.15.2-alpine
将当前目录下 dist 文件夹所有文件都拷贝到 image 文件中指定目录
COPY ../dist /
COPY default.conf /etc/nginx/conf.d/default.conf
凋谢容器的 80 端口，容许内部拜访这个端口
EXPOSE 80
构建镜像
docker image build -t front .
构建容器
docker run -p 82:82 --name front -d front
FAQ
- 欢送补充