ReactJS开发环境设置

ReactJS开发环境设置

在本章中，我们将演示如何为React开发建立一个环境。 请注意，涉及的步骤很多，但这此步骤将有助于以后加快开发流程。 我们将需要NodeJS，所以如果您没有安装，请查看下面教程文章的链接 - http://www.zyiz.net/nodejs/node_install.html

安装ReactJS有好几种方法，这里重点介绍第1种方法，其它方法要选介绍演示。

注意：在编写本教程时，使用nodejs版本为：v9.3.0 ，npm的版本为：5.6.0

安装方式一(推荐)

第1步 - 创建根文件夹
根文件夹将被命名为reactApp，我们将把它放在目录：F:\worksp\reactjs。 创建文件夹后，打开它，并通过命令提示符运行npm init来创建空的package.json文件，并按照命令说明进行操作。

F:\worksp\reactjs> mkdir reactApp
F:\worksp\reactjs\reactApp> npm init

第2步 - 安装全局包

我们将需要为这个设置安装几个软件包。这里将需要一些babel插件，所以首先通过在命令提示符窗口中运行以下代码来安装babel。

F:\worksp\reactjs\reactApp> npm install -g babel
F:\worksp\reactjs\reactApp> npm install -g babel-cli

第3步 - 添加依赖和插件
我们将在接下来的教程中使用webpack捆绑器。所以需要安装webpack和webpack-dev-server。

F:\worksp\reactjs\reactApp> npm install webpack --save
F:\worksp\reactjs\reactApp> npm install webpack-dev-server --save

既然要使用React，那么需要先安装它。 --save命令将把这些包添加到package.json文件中。

F:\worksp\reactjs\reactApp> npm install react --save
F:\worksp\reactjs\reactApp> npm install react-dom --save

如前所述，我们需要一些babel插件，所以也安装它。

F:\worksp\reactjs\reactApp> npm install babel-core
F:\worksp\reactjs\reactApp> npm install babel-loader
F:\worksp\reactjs\reactApp> npm install babel-preset-react
F:\worksp\reactjs\reactApp> npm install babel-preset-es2015

第4步 - 创建文件
下面来创建一些需要的文件。 它可以手动添加或使用命令提示符创建以下文件 -

  • index.html
  • App.jsx
  • main.js
  • webpack.config.js

先保持上面几个文件的内容为空。

第5步 - 设置编译器，服务器和加载器
打开webpack.config.js文件并添加下面的代码。将webpack入口点设置为main.js。 输出路径是提供捆绑应用程序的地方。还将为开发服务器设置为8080端口。可以选择你想要的任何端口。

最后，设置babel加载器来搜索js文件，并使用es2015并对之前安装的预设做出反应。

文件：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-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;

打开package.json 并删除在“scripts”对象内的语句："test" "echo \"Error: no test specified\" && exit 1"。因为在本教程中不会进行任何测试。接下来添加启动命令。

"start": "webpack-dev-server --hot"

在上述步骤之前，将需要webpack-dev-server。 要安装webpack-dev-server，请使用以下命令。

F:\worksp\reactjs\reactApp> npm install webpack-dev-server -g

现在，可以使用npm start命令启动服务器。 --hot命令将在文件内部更改内容后添加实时重载，所以不需要每次更改的代码就可以刷新浏览器。

第6步 - index.html

这只是普通的HTML代码文件。可将div id = "app"设置为应用程序的根元素，并添加index.js脚本，这是捆绑应用程序文件。

<!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>

第7步 - App.jsx和main.js

这是第一个React组件。我们将在后面的章节中深入讲解React组件。 这个组件将显示输出："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'));

注 - 无论何时您想使用某些东西，都需要先导入它。如果您希望使组件在应用程序的其他部分可用，则需要在创建后导出它，并将其导入到要使用它的文件中。

完整的目录结构如下所示 -

第8步 - 运行服务器
设置完成，我们可以通过运行以下命令启动服务器。

F:\worksp\reactjs\reactApp> npm start

执行输出如下 -

在我们的例子中，它打开访问的URL是：http://localhost:8080/ ，打开之后，应该会看到下面的输出。

方法二(最小的HTML模板)

如果您喜欢使用自己的文本编辑器，也可以下载这个HTML文件( http://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html )，编辑它，并从浏览器的本地文件系统中打开它。但它的运行时代码转换很慢，所以不要在生产中使用它。


目录
ReactJS开发环境设置