React开发教程4:React开发环境搭建
本教程由好办法汇总原创
这一篇教程将教你如何成功配置搭建React开发环境。
首先你需要安装NodeJS和npm。
请在NodeJS官网下载安装文件,会同时安装NodeJS和npm。
https://nodejs.org
第一步:安装全局npm包 (Global Packages)
我们的开发会用到babel插件。首先请在命令行中安装babel。
C:\Users\username>npm install -g babel
C:\Users\username>npm install -g babel-cli
第二步:创建开发目录
我们这里假定创建一个叫reactApp的目录放在桌面上。我们通过npm init命令初始化npm管理环境和package.json文件。
C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop\reactApp>npm init
第三步:通过npm安装React、webpack和其他npm插件
我们使用webpack作为开发的build工具。
这里我们安装webpack和webpack-dev-server。
C:\Users\username>npm install webpack --save
C:\Users\username>npm install webpack-dev-server --save
这里安装React。–save命令会把插件添加到package.json文件中。
C:\Users\username\Desktop\reactApp>npm install react --save
C:\Users\username\Desktop\reactApp>npm install react-dom --save
安装babel相关插件。
C:\Users\username\Desktop\reactApp>npm install babel-core
C:\Users\username\Desktop\reactApp>npm install babel-loader
C:\Users\username\Desktop\reactApp>npm install babel-preset-react
C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015
第四步:创建开发目录下的文件
通过命令行快速创建以下文件。
C:\Users\username\Desktop\reactApp>touch index.html
C:\Users\username\Desktop\reactApp>touch App.jsx
C:\Users\username\Desktop\reactApp>touch main.js
C:\Users\username\Desktop\reactApp>touch webpack.config.js
第五步:设置编译器(compiler)、开发服务器(server)和加载器(loader)
打开 webpack-config.js 文件,添加以下代码。
我们这里设置 webpack 的入口文件为main.js。
输出目录是集成(bundle)过的文件输出路径。
我们设置的开发服务器端口为8080.
同时,这里设置了使用babel loaders来搜索js文件,其根据是es2015和react的预设参数。
webpack-config.js
var config = { entry: './main.js', output: { path:'./', filename: 'index.js', }, devServer: { inline: true, port: 8080 }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] } } module.exports = config;
添加完以上代码后,打开package.json文件在“script”中添加以下代码。
"start": "webpack-dev-server --hot"
这样我们就可以使用命令npm start来启动开发服务器。 –hot命令使开发服务器具有了即使更新的能力。开发中代码更新后,不需要手动刷新浏览器就可以自动显示视觉上的变化。
第六步:index.html
在index.html中。我们引用 index.js并设置div id = “app” 作为我们的React应用根元素。
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>React App</title> </head> <body> <div id = "app"></div> <script src = "index.js"></script> </body> </html>
第七步:App.jsx and main.js
现在我们写第一个React组件(component)。这个组件会渲染出Hello World!!!。
App.jsx
import React from 'react'; class App extends React.Component { render() { return ( <div> Hello World!!! </div> ); } } export default App;
我们引用这个组件到App元素中。
main.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'));
第八步:启动开发服务器
C:\Users\username\Desktop\reactApp>npm start
在浏览器中打开 http://localhost:8080/。你的第一个React App开发成功了!