我的项目地址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
- 欢送补充