React seed framework - 前端知识

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