Project address https://github.com/holidaying/reactSeed
project demohttp://www.aishop.store/reactSeed/dist/pc/index.html#/login
Script configuration
"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",
route
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 >
request
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
app.post('/education/api/login', function (req, res) {
// Receive request parameters
console.log(req.body.username);
res.cookie("oath", Token.createToken(req.body.username, Date.now()), { maxAge: 900000, httpOnly: true });
res.send({ "data": true })
})
event 、 loop
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=" Please enter a user name " name="username" value={this.state.username} type="text" onChange={(e)=>this.handleChange(e)} />
<Input placeholder=" Please input a password " name="password" value={this.state.password} type ="password" onChange={(e)=>this.handleChange(e)} />
<div className="footer">
Father son messaging
The parent component passes data to the child component : Pass the data directly to the place where the sub component is called .
Call the method of the subcomponent : To put it simply, it means to give sub components , adopt ref Name it , Then in the click event of the parent component , adopt this.refs. The name of the subcomponent . Sub component method to implement
The child component calls the method of the parent component . Pass the method where the child component is called , Passed in the child component this.props. The method passed by the parent component can be
The child component passes data to the parent component : By calling the method of the parent component , adopt callback Callbacks pass data .this.props. Method of parent component ( Data transferred )
Components
function function 、class es6 grammar
On demand
utilize react-loadable This advanced component , Do this on demand , We're going to use WebPack,babel-plugin-syntax-dynamic-import and react-loadable.
npm i --save-dev babel-plugin-syntax-dynamic-import
npm i --save-dev react-loadable
typescript
unit testing
Brother node information transmission redux and eventhub
(1)Web Application is a state machine , The view corresponds to the state one by one .
(2) All States , Keep it in an object .
Multi page
new HtmlWebpackPlugin({
title: ' The main page ',
filename: 'index.html',
template: resolve('../src/template/index.html'),
hash: true, // It will be packed bundle.js Followed by hash strand
inject: "body",
chunks:["home"]
}),
new HtmlWebpackPlugin({
title: ' Jump to the page ',
filename: 'page.html',
template: resolve('../src/template/page.html'),
hash: true, // It will be packed bundle.js Followed by hash strand
inject: "body",
chunks: ["page"]
})
],
Rely on dynamic loading and independent deployment
Microfront
Heaven and earth /sigle-spa
Front end micro service solution 1 - reflection
Front end micro service solution 2 - Single-SPA
Front end micro service solution 3 - Module loader
Front end micro service solution 4 - The message bus
Front end micro service solution 5 - Routing distribution
Front end micro service solution 6 - Build and deploy
Front end micro service solution 7 - Static data sharing
Front end micro service solution 8 - Second build
docker
Accessible https://hub.docker.com/_/nginx see python Mirror source
FROM nginx:1.15.2-alpine
Put the current directory dist Folder all files are copied to image The directory specified in the file
COPY ../dist /
COPY default.conf /etc/nginx/conf.d/default.conf
Open container 80 port , Allow external access to this port
EXPOSE 80
Build a mirror image
docker image build -t front .
Build container
docker run -p 82:82 --name front -d front
FAQ
- Welcome to add