React开发教程4:React开发环境搭建

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工具。
这里我们安装webpackwebpack-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开发成功了!

屏幕快照 2016-07-02 上午9.55.18

发表评论

您的电子邮箱地址不会被公开。