创建一个文件夹
npm init -f
如果不加 -f ,会有一系列设置步骤,-f会生成一个默认设置的package.json文件
如果安装低版本的react ,配置文件版本直接按照如下:
{
"name": "xxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"css-loader": "^0.12.1",
"react": "^0.13.3",
"react-hot-loader": "^1.3.0",
"react-router": "^0.13.3",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.11.0"
}
}
创建webpack配置文件:
touch webpack.config.js
相关配置项:
var webpack = require('webpack');
module.exports = {
entry: [
'webpack/hot/only-dev-server',
"./js/app.js"
],
output: {
path: './build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /\.css$/, loader: "style!css" }
]
},
resolve:{
extensions:['','.js','.json']
},
plugins: [
new webpack.NoErrorsPlugin()
]
};
相同目录下新建index.html:
touch index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New React App</title>
</head>
<body>
<section id="react"></section>
<script src="bundle.js"></script>
</body>
</html>
新建js文件夹,并且新建js文件
mkdir js
touch app.js
touch hello.js
app.js:
import React from 'react';
import Router from 'react-router';
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
import HelloHandler from './hello.js';
let App = React.createClass({
render() {
return (
<div className="nav">
<Link to="app" className="homelink">Home </Link>
<Link to="hello" className="hellolink"> Say Hello</Link>
{/* this is the importTant part */}
<RouteHandler/>
</div>
);
}
});
let routes = (
<Route name="app" path="/" handler={App}>
<Route name="hello" path="/hello" handler={HelloHandler}/>
</Route>
);
Router.run(routes, function (Handler) {
React.render(<Handler />, document.body);
});
hello.js
import React from 'react';
let Hello = React.createClass({
render() {
return(<div>Hello World!</div>);
}
});
export default Hello;
npm build
npm start
注意:*以上都是低版本
如果不固定react版本号,直接npm install react –save-dev,你会发现,一片红啊,
下面附上高版本react
package.json:
{
"name": "webpack-react-lesson1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-hot-loader": "^1.3.0",
"react-router": "^2.4.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: [
'webpack/hot/only-dev-server',
"./js/app.js"
],
output: {
path: './build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query:{presets:['es2015','react']}},
{ test: /\.css$/, loader: "style!css" }
]
},
resolve:{
extensions:['','.js','.json']
},
plugins: [
new webpack.NoErrorsPlugin()
]
};
主要区别:
“babel-preset-es2015”: “^6.9.0”, //编译es6到es5
“babel-preset-react”: “^6.5.0”,//编译jsx到js
“react-dom”: “^15.1.0”,//高版本react只能用ReactDom.render()
参考:
Setting up environment for React, SASS, ES2015, Babel with Webpack