React 入门程序
2016-12-06 本文已影响31人
MryU93
入门程序 Hello React
第一步、初始化项目
新建目录，进入到该目录下，执行以下命令,生成 package.json 文件
npm init
第二步、安装需要的包
//全局安装
npm install -g webpack
npm install babel -g
//安装到你的项目目录
npm install --save-dev webpack
npm install webpack-dev-server --save-dev
第三步、创建文件
第四步、添加依赖包及插件
$ npm install react --save
$ npm install react-dom --save
// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
第五步：相关配置
package.json
webpack.config.js
//“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',//在webpack的module部分的loaders里进行配置即可
query: {
presets: ['es2015','react']
}
}
]
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转
inline: true,//实时刷新
port: 7777
}
}
main.js
import React from 'react';
import {render} from 'react-dom';
import FirstPage from './FirstPage';
//import './main.css';//使用require导入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>
第六步、运行服务
npm start
