前端四react+redux脚手架搭建
- 格式：docx
- 大小：47.68 KB
- 文档页数：9
1
初始化项目
基于nodejs
cd D:\code_fe\test
cnpm init
新建index.html
expres
nodejs web framework web框架
/zh-cn/
cnpm install express --save-dev
新建server.js
var app = new (require('express'))()
var port = 9100
app.get("/", (req, res) => {
res.sendFile(__dirname + '/index.html')
})
app.listen(port, error => {
if (error) {
console.error(error)
} else {
("Open up http://localhost:%s/ in your browser.", port)
}
})
react_redux
2
node server.js
package.json增加start命令
babel
Babel is a JavaScript compiler.将babel语法编译成普通es2015(es6)
https://babeljs.io/
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react
babel-preset-react-hmre --save-dev
新建.babelrc
增加配置内容
webpack
webpack the flexible module bundler
https://webpack.github.io/
cnpm install webpack webpack-dev-middleware webpack-hot-middleware --save-dev
新建webpack.config.js
新建index.js var path = require('path')
varwebpack = require('webpack')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [ {
"presets": ["es2015", "react"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
} 3
修改server.js
修改index.html
命令行：打包：webpack
启动server：node server.js
react
中文教程：
/react/docs/getting-started.html
模块引入
cnpm install react react-dom --save
react_redux
varwebpack = require('webpack')
varwebpackDevMiddleware = require('webpack-dev-middleware')
varwebpackHotMiddleware = require('webpack-hot-middleware')
varconfig = require('./webpack.config')
var app = new (require('express'))()
var port = 9100
var compiler = webpack(config)
e(webpackDevMiddleware(compiler, { noInfo: true, publicPath:
config.output.publicPath }))
e(webpackHotMiddleware(compiler))
app.get("/", (req, res) => {
res.sendFile(__dirname + '/index.html')
})
app.listen(port, error => {
if (error) {
console.error(error)
} else {
("Open up http://localhost:%s/ in your browser.", port)
}
}) constrootEl = document.getElementById('root');
rootEl.innerText = "haha!" 4
修改index.html
命令行：打包：webpack
启动server：node server.js
react_redux
varwebpack = require('webpack')
varwebpackDevMiddleware = require('webpack-dev-middleware')
varwebpackHotMiddleware = require('webpack-hot-middleware')
varconfig = require('./webpack.config')
var app = new (require('express'))()
var port = 9100
var compiler = webpack(config)
e(webpackDevMiddleware(compiler, { noInfo: true, publicPath:
config.output.publicPath }))
e(webpackHotMiddleware(compiler))
app.get("/", (req, res) => {
res.sendFile(__dirname + '/index.html')
})
app.listen(port, error => {
if (error) {
console.error(error)
} else {
("Open up http://localhost:%s/ in your browser.", port)
}
}) 5
react
中文教程：
/react/docs/getting-started.html
模块引入
cnpm install react react-dom --save
开发react组件多种方式
1.简单的func方式
2.createClass方式
3.es6 class方式
创建components文件夹，创建Hello.js文件
渲染
ReactDOM.render
修改index.js
状态和属性
状态state可以改，属性props不可以改，
importReactDOM from 'react-dom'
import Hello from './components/Hello'
constrootEl = document.getElementById('root');
ReactDOM.render(
,
rootEl
) import React from 'react';
class Hello extends ponent {
constructor(props) {
super(props);
this.displayName = 'Hello';
}
render() {
return
}
}
export default Hello;
