入門程序 Hello React
第一步、初始化項目
新建目錄，進入到該目錄下，執(zhí)行以下命令,生成 package.json 文件
npm init
第二步、安裝需要的包
//全局安裝
npm install -g webpack
npm install babel -g
//安裝到你的項目目錄
npm install --save-dev webpack
npm install webpack-dev-server --save-dev
第三步、創(chuàng)建文件
第四步、添加依賴包及插件
$ npm install react --save
$ npm install react-dom --save
// npm一次性安裝多個依賴模塊，模塊之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
第五步：相關(guān)配置
package.json
webpack.config.js
//“__dirname”是node.js中的一個全局變量，它指向當前執(zhí)行腳本所在的目錄
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出文件的文件名
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',//在webpack的module部分的loaders里進行配置即可
query: {
presets: ['es2015','react']
}
}
]
},
devServer: {
contentBase: "./public",//本地服務(wù)器所加載的頁面所在的目錄
colors: true,//終端中輸出結(jié)果為彩色
historyApiFallback: true,//不跳轉(zhuǎn)
inline: true,//實時刷新
port: 7777
}
}
main.js
import React from 'react';
import {render} from 'react-dom';
import FirstPage from './FirstPage';
//import './main.css';//使用require導(dǎo)入css文件
render(<FirstPage />, document.getElementById('root'));
firstPage
import React, {Component} from 'react'
import config from './config.json';
class FirstPage extends Component{
render() {
return (
<div>
{config.greetText}
</div>
);
}
}
export default FirstPage
config.json
{
"greetText": "Hi there and greetings from React!"
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
第六步、運行服務(wù)
npm start
