如何在 Windows 上安装 React？ 完整指南

ReactJS 是一个免费的开源 JavaScript 库，它显着改变了古老的前端开发技术。 React 于 2013 年公开，是 Facebook 的内部项目。 从那时起，React 就被各种组织和初创公司采用。 具备足够的 JavaScript、HTML 和 CSS 知识的前端开发人员可以为 Web 和移动应用程序创建交互式用户界面。 ReactJS 的最大优势之一是其基于组件的方法。 构建具有自己独立状态的封装可重用组件可以简化复杂的用户界面。

有趣的是，我们在 ReactJS 中编写的任何内容都可能看起来像 HTML，但事实并非如此。 它被称为 JSX，JavaScript XML 文件。 此 JSX 生成 React“元素”，这些“元素”被渲染到文档对象模型中。 通俗地说，JSX 允许我们在 HTML 主体内部编写 JavaScript 逻辑。 从而使 React 更加简单易懂。

为了更好地发挥它的作用，让我们深入了解如何在 Windows 中安装 React JS。

如何在 Windows 上安装 React JS？

Windows 的系统要求

虽然使用 ReactJs 非常轻松，但如何在 Windows 中安装 React JS的过程却非常繁琐。 由于 ReactJS 是一个开源项目，它并不像从 Internet 下载软件那么简单。 首先，在 Windows 上使用 ReactJS 有一些先决条件。

1. Windows 版本：Windows XP、Windows 7（32/64 位）或更高版本。
2. 至少需要 4 GB RAM。
3. 硬盘驱动器上至少有 10 GB 的磁盘空间。
4. Internet 浏览器，例如 Chrome、Microsoft Edge、Firefox 等。
5. 一个用于调试和测试用 ReactJS 编写的代码的编辑器。

从世界一流大学在线学习软件开发课程。 获得执行 PG 课程、高级证书课程或硕士课程，以快速推进您的职业生涯。

下载并安装 Node.js

Node.js 是帮助您在系统上运行 ReactJS 代码的服务器。 很像 ReactJS，它也是开源的。 Node.js 安装程序包括 NPM（节点包管理器），其中包含开发人员用来在开源社区中托管和发布自己的模块的各种节点模块。 因此，Node 与 NPM 注册表一起工作，这使得使用 NPM CLI 安装任何包变得更加容易。 Node 进一步将 ReactJS 应用程序包装成一个使用 web 包的单一应用程序，以便于安装。

以下是下载和安装 Node.js 的分步过程：

1. 要安装 Node.js，请转到https://nodejs.org/en/ 。
2. 根据您的 Windows 操作系统版本，您必须选择合适的安装程序。
3. Node.js 主页根据您的操作系统推荐 LTS 版本。 单击它将自动开始下载。
4. 您将在下载文件夹中找到安装程序。 运行安装程序。
5. 安装向导将出现在屏幕上，要求提供最终用户许可协议。 接受条款和条件以继续安装。
6. 然后用户必须使用安装程序的默认路径选择目标文件夹。 单击下一步继续。
7. 安装程序随后会显示将要安装的功能，并将环境路径变量设置为命令提示符。 单击下一步开始安装。
8. 安装完成后，使用命令提示符验证系统中的 Node.js。
9. 在命令提示符中键入“node -v”以检查安装的 Node.js 版本。
10. 在命令提示符下键入“npm -v”以验证 npm 的安装。

安装 React

安装 Node.js 后，我们可以使用两种技术在 Windows 上安装 React JS ：

• 使用 web pack 和 Babel

1. 创建根文件夹

在安装 ReactJS 之前，在命令提示符下使用以下命令创建一个名为“reactFile”的根文件夹。

C:\Users\用户名\Desktop>mkdir reactFile

C:\Users\用户名\Desktop>cd reactFile

创建目录后，在命令提示符下使用以下命令生成 package.json 文件。 package.json 文件有助于创建模块。

C:\Users\用户名\Desktop>reactFile> npm init

命令提示符然后询问有关模块的信息； 通过选择“-y”选项跳过它。

2.安装React和react-dom

使用以下 npm 命令安装 React 和 react-dom 包，并使用“-save”命令将包添加到 package.json 文件。

C:\Users\用户名\Desktop>reactFile> npm install react –save

C:\Users\用户名\Desktop>reactFile> npm install react-dom –save

探索我们的软件开发免费课程

3.安装网络包

使用以下命令安装 webpack、webpack-dev-server 和 webpack-cli。

C:\Users\用户名\Desktop>reactFile> npm install webpack webpack-dev-server webpack-cli –save

4. 安装巴别塔

Babel 是一个转译器，可将 JavaScript 代码转换为浏览器可以理解的内容。 因此安装 Babel 及其后续插件 babel-loader、babel-preset-env、babel-preset-react 和 html-webpack-plugin 非常重要。

使用以下命令一次安装所有 babel 插件。

C:\Users\用户名\Desktop\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. 创建 ReactJS 文件

要完成安装过程，我们必须使用命令提示符手动创建某些文件。

C:\Users\用户名\Desktop\reactFile>键入 nul > index.html

C:\Users\用户名\Desktop\reactFile>类型 nul > App.js

C:\Users\用户名\Desktop\reactFile>键入 nul > main.js

C:\Users\用户名\Desktop\reactFile>类型 nul > webpack.config.js

C:\Users\用户名\Desktop\reactFile>类型 nul > .babelrc

6. 设置编译器、服务器和加载器

在“reactFile”文件夹中创建这些 ReactJS 文件后，您可以准备部署服务器，将其设置在端口 8001 或 webpack.-config.js 中您想要的任何端口。

在 webpack-config.js 文件中使用以下代码，

const path = require('路径');

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

模块.exports = {

条目：'./main.js'，

输出： {

路径：path.join(__dirname, '/bundle'),

文件名：'index_bundle.js'

},

开发服务器：{

内联：真实，

端口：8001

},

模块： {

规则：[

{

测试：/\.jsx?$/,

排除：/node_modules/，

装载机：'babel-loader'，

询问： {

预设：['es2015', 'react']

}

}

]

},

插件：[

新的 HtmlWebpackPlugin({

模板：'./index.html'

})

]

}

7. 设置index.html

在 index.html 中以 div id="app" 为根元素编写一个常规的 HTML 代码，然后在 HTML 正文中进一步添加 index_bundle.js 脚本。

需求软件开发技能

8. 设置 App.js 和 main.js

在 App.js 中编写 React 组件来渲染类或函数。 将您希望在组件中呈现的文本插入，编译后将显示在浏览器中。 然后将组件导入到 main.js 中的根 App 元素，以便结果显示在浏览器上。

创建一个文件“.babelrc”并插入以下代码行，

{

“预设”：[“环境”，“反应”]

}

9. 显示网页内容

设置终于完成，一旦您在命令提示符下键入以下命令，服务器就会启动并运行。

C:\Users\用户名\Desktop\reactFile>npm 启动

只要您按下回车键，浏览器就会显示您在组件内呈现的消息。

• 使用 create-react-app 命令

1. 安装 create-react-app

打开命令提示符并编写以下代码以安装 create-react-app。

C:\Users\用户名\Desktop>npx create-react-app my-app

此命令将所有必需的文件和文件夹安装到桌面的“my-app”文件夹中。 这一行代码在几分钟内完成了系统中 React 的安装。

2. 运行服务器

转到命令提示符并键入

C:\Users\用户名\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>我的应用> npm 启动

你的 React 项目在 localhost 的帮助下在你的浏览器上启动并运行，它在可用的端口上托管你的项目。

探索我们的热门软件工程课程

结论

ReactJS 自发布以来改变了前端开发游戏，并已发展成为最受欢迎的开源 JavaScript 库之一。 Meta、Netflix 和 Slack 等多家公司都在使用 ReactJS。 最大的优势之一是组件的可重用性以将更改呈现到网页中。 使用 Azure DevOps 将多个 React 应用程序部署到 Azure Web App。 这是现在 IT 行业最抢手的技能之一。

如果您是 React 开发人员，您可以通过upGrad 的班加罗尔 IIIT DevOps 高级证书计划了解 Azure DevOps 来增强您的技能。 该课程提供超过 250 小时的学习模块以及面试准备指南。 您还可以参加 DevOps 专家的职业指导会议，他们可以为您提供行业期望的清晰路线图。 您将在课程结束时获得证书和 IIITB 校友身份，这使它成为您简历中的一个特别补充！