ReactJS环境设置

在本章中，我们将向您展示如何为成功的React开发建立一个环境。请注意，涉及的步骤很多，但这将有助于以后加快开发流程。我们需要 NodeJS ，所以如果你没有安装它，请检查下表中的链接。

序号	软件和说明
1	NodeJS和NPM NodeJS是ReactJS开发所需的平台。检查我们的NodeJS环境设置。

第1步 - 创建根文件夹

根文件夹将被命名为 reactApp ，我们将把它放在 桌面上 。在创建文件夹后，我们需要打开它并通过 命令提示符 运行npm init来创建空的 package.json 文件，并按照说明进行操作。 **

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop\reactApp>npm init

第2步 - 安装全局软件包

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

C:\Users\username\Desktop\reactApp>npm install -g babel
C:\Users\username\Desktop\reactApp>npm install -g babel-cli

第3步 - 添加依赖和插件

我们将在这些教程中使用 webpack 捆绑器。让我们安装 webpack 和 webpack-dev-server 。

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>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

第4步 - 创建文件

我们来创建一些我们需要的文件。它可以手动添加或使用 命令提示符添加 。

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

另一种创建我们需要的文件的方法

C:\Users\username\Desktop\reactApp>type nul >index.html
C:\Users\username\Desktop\reactApp>type nul >App.jsx
C:\Users\username\Desktop\reactApp>type nul >main.js
C:\Users\username\Desktop\reactApp>type nul >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 并删除 “test”“echo \”错误：没有 在 “scripts” 对象内 指定测试“ && exit 1”。我们正在删除这一行，因为我们不会在本教程中进行任何测试。我们来添加 start 命令。

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

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

C:\Users\username\Desktop\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步 - 运行服务器

设置完成后，我们可以通过运行以下命令来启动服务器。

C:\Users\username\Desktop\reactApp>npm start

它会显示我们需要在浏览器中打开的端口。在我们的例子中，它是 http：// localhost：8080 / 。打开它后，我们将看到以下输出。

反应你好世界