環(huán)境準(zhǔn)備
1.安裝nodejs、npm
訪問網(wǎng)站http://nodejs.cn/download/下載需要的版本的nodejs
image.png
下載后直接點擊安裝，然后cmd執(zhí)行node -v和npm -v
出現(xiàn)上圖內(nèi)容則安裝完成，如果沒有需要配置環(huán)境變量（一般都會自動配置環(huán)境變量的）
2.創(chuàng)建react工程目錄
創(chuàng)建react_demo的文件目錄，并創(chuàng)建文件如下：
- package.json：
{
"name": "react_demo",
"version": "0.0.1",
"description": "",
"main": "",
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server --hot --inline --host 0.0.0.0 --port 8080"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-eslint": "^7.2.1",
"babel-loader": "^6.2.5",
"babel-plugin-import": "^1.1.1",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.24.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"webpack": "^2.2.1",
"webpack-dev-server": "^1.16.2"
}
}
- webpack.config.js
const path = require('path')
var webpack = require('webpack');
const root = __dirname;
module.exports = {
// 入口文件
entry: path.resolve(root, 'src/index.jsx'),
// 出口文件
output: {
filename: 'bundle.js',
path: path.resolve(root, 'build')
},
resolve: {
extensions: ['*', '.js', '.jsx'] //webpack2.x extensions[0]不能為空
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
disableHostCheck: true
},
module: {
loaders: [
{
test: /(\.js|\.jsx)$/,
loaders: [
'babel-loader'
],
exclude: /node_modules/,
}
],
}
}
- .babelrc
{
"presets" : [ "react", "es2015"]
}
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Demo</title>
</head>
<body>
<div id="app"></div>
<script src="build/bundle.js"></script>
</body>
</html>
- index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Root from './components/Root';
ReactDOM.render(
<Root />,
document.getElementById('root')
);
- Root.jsx
import React from 'react';
class Root extends React.PureComponent{
render() {
return (
<h1> Hello World!</h1>
);
}
}
export default Root;
- 執(zhí)行配置
-
執(zhí)行依賴包安裝
在項目根目錄下步清，執(zhí)行npm install：
執(zhí)行后的文件目錄，生成node_modules目錄和package-lock.json文件：
-
執(zhí)行webpack配置
在項目根目錄下，執(zhí)行npm run build：
執(zhí)行后的文件目錄获茬，生成build目錄，build目錄下生成bundle.js文件：
- 運(yùn)行服務(wù)
-
啟動服務(wù)
根目錄下執(zhí)行npm run start：
-
訪問服務(wù)
瀏覽器中輸入localhost:8080
大功告成
