📌  相关文章
📜  ReactJS-环境设置

📅  最后修改于: 2020-10-20 04:47:08             🧑  作者: Mango

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

Sr.No. Software & Description
1

NodeJS and NPM

NodeJS is the platform needed for the ReactJS development. Checkout our NodeJS Environment Setup.

成功安装NodeJS之后，我们可以使用npm开始在其上安装React。您可以通过两种方式安装ReactJS

  • 使用webpack和babel。

  • 使用create-react-app命令。

使用webpack和babel安装ReactJS

Webpack是一个模块捆绑器（管理和加载独立的模块）。它采用相关模块并将其编译为单个（文件）捆绑包。您可以在使用命令行或通过使用webpack.config文件配置应用程序开发应用程序时使用此捆绑包。

Babel是JavaScript编译器和编译器。它用于将一个源代码转换为其他源代码。使用此功能，您将能够在代码中使用ES6的新功能，而babel会将其转换为可以在所有浏览器上运行的普通ES5。

第1步-创建根文件夹

使用mkdir命令在桌面上创建一个名称为reactApp的文件夹，以安装所有必需的文件。

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

要创建任何模块，需要生成package.json文件。因此，在创建文件夹之后，我们需要创建一个package.json文件。为此，您需要从命令提示符处运行npm init命令。

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

该命令询问有关模块的信息，例如软件包名称，描述，作者等。您可以使用–y选项跳过这些信息。

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

第2步-安装React和React dom

由于我们的主要任务是安装ReactJS，因此分别使用npm的install react和react-dom命令安装它及其dom软件包。您可以使用–save选项将我们安装的软件包添加到package.json文件中。

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

或者，您可以将它们全部安装在单个命令中，如下所示：

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

第3步-安装Webpack

由于我们使用webpack生成捆绑程序，因此请安装webpack，webpack-dev-server和webpack-cli。

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save

或者，您可以将它们全部安装在单个命令中，如下所示：

C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

步骤4-安装Babel

安装babel及其插件babel-core，babel-loader，babel-preset-env，babel-preset-react和html-webpack-plugin

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

或者，您可以将它们全部安装在单个命令中，如下所示：

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 
   babel-preset-react html-webpack-plugin --save-dev

第5步-创建文件

要完成安装，我们需要创建某些文件，即index.html，App.js，main.js，webpack.config.js和。巴贝尔克。您可以手动创建这些文件，也可以使用命令提示符。

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

第6步-设置编译器，服务器和加载器

打开webpack-config.js文件并添加以下代码。我们将webpack入口设置为main.js。输出路径是将提供捆绑应用程序的位置。我们还将开发服务器设置为8001端口。您可以选择任何所需的端口。

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

打开package.json并删除“脚本”对象内的“测试”“ echo \”错误：未指定测试\“ &&退出1” 。我们将删除此行，因为在本教程中我们将不进行任何测试。让我们添加start和build命令。

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

第7步-index.html

这只是普通的HTML。我们将div id =“ app”设置为应用程序的根元素，并添加index_bundle.js脚本，这是我们捆绑的应用程序文件。


      React App

第8步-App.jsx和main.js

这是第一个React组件。我们将在下一章中深入解释React组件。此组件将呈现Hello World 。

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         

            
Hello World

         

      );
   }
}
export default App;

我们需要导入该组件并将其呈现到我们的根App元素，以便我们可以在浏览器中看到它。

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(, document.getElementById('app'));

注意-每当您要使用某些内容时，都需要先将其导入。如果要使组件在应用程序的其他部分中可用，则需要在创建后将其导出并将其导入到要使用的文件中。

创建一个名称为.babelrc的文件，并将以下内容复制到该文件中。

{
   "presets":["env", "react"]
}

步骤9-运行服务器

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

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

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

运行服务器

步骤10-产生套件

最后，要生成捆绑包，您需要在命令提示符下运行build命令，如下所示：

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

这将在当前文件夹中生成分发包，如下所示。

产生捆绑

使用create-react-app命令

除了使用webpack和babel之外，您还可以通过安装create-react-app更简单地安装ReactJS。

第1步-安装create-react-app

浏览桌面并使用命令提示符安装Create React App，如下所示-

C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app

这将在桌面上创建一个名为my-app的文件夹，并在其中安装所有必需的文件。

第2步-删除所有源文件

浏览生成的my-app文件夹中的src文件夹，并删除其中的所有文件，如下所示-

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

第3步-添加文件

在src文件夹中将名称为index.css和index.js的文件添加为-

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

在index.js文件中添加以下代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

第4步-运行项目

最后，使用start命令运行项目。

npm start

运行项目