通过 npm 使用 React
开发环境
请确保已经正确安装了如下工具包:
- node.jsv4+
- npm
- webpack
安装
npm install
开发环境编译及服务启动并开启热部署模式
npm start
服务已启动,请打开浏览器输入: http://localhost:8080/webpack-dev-server/
生产环境
直接运行index.html运行
‘npm webpack打包输出’
以下命令通过git 编写
第一步、安装全局包
$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server --save-dev
第二步、创建根目录
创建一个根目录,目录名为:reactApp,再使用 npm init 初始化,生成 package.json 文件:
$ mkdir reactApp
$ cd reactApp/
$ npm init
第三步、添加依赖包及插件
因为我们要使用 React, 所以我们需要先安装它,–save 命令用于将包添加至 package.json 文件。
$ npm install react --save
$ npm install react-dom --save
同时我们也要安装一些 babel 插件
$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015
第四步、创建文件
$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js
第五步、设置编译器,服务器,载入器 webpack.config.js
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 7777
},
module: {
loaders: [ {
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;
- entry: 指定打包的入口文件 main.js。
- output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称。
- devServer:设置服务器端口号为 7777,端口后你可以自己设定 。
module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会调用后面的loader对文件进行处理,这正是webpack强大的原因。
package.json
"start": "webpack-dev-server --hot"
第六步、index.html
<div id = "app"></div>
<script src = "index.js"></script>
第七步、App.jsx 和 main.js
//App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!<br />
欢迎来到菜鸟教程学习!!!
</div>
);
}
}
export default App;
//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'))
第八步、运行服务
$ npm start