React.js (React) 是一个开源 JavaScript 库,可用于构建用户界面。 React 是一个库,因此本文的主要重点是安装 JavaScript 环境和包管理器,以便我们可以下载和安装包括 React 在内的库。
完成后,您将拥有一个可用于在 Liquid Web VPS 服务器上开始开发的 React 环境。
安装 Node.js
第一步是下载适用于 Windows 的 Node.js 安装程序。 让我们使用最新的长期支持 (LTS) 版本 Windows 并选择 64 位版本, 使用 Windows 安装程序 图标。
下载后,我们运行 Node.js 安装程序(.msi fuke)并按照步骤完成安装。
现在我们已经安装了 Node.js,我们可以继续下一步。
命令提示符环境
我们需要使用命令提示符(命令行)与 Node.js 和 Node Package Manager (NPM) 交互来安装 React。 让我们花几分钟来介绍我们需要用来绕过的命令。 以下是我们需要绕过和创建文件夹/目录的基本命令:
在 Windows 中打开命令提示符
点击 开始菜单 (1), 开始打字 命令 (2), 然后选择 命令 迅速的 或者 Node.js 命令提示符 (3)——任一个选择都行。
命令提示符窗口将打开,路径显示为 C:Users
要执行命令,我们键入命令和任何必需的选项,然后按 Enter 执行它并查看结果。 让我们遍历上面列出的每个命令,看看会发生什么:
dir
现在,让我们使用以下命令查看下载文件夹的内容:
dir downloads
路径显示我们还在目录中 C:用户反应用户>但是,我们正在查看的内容 C:用户ReactUser下载, 我们看到它只有一个文件。 让我们使用以下命令移动到下载目录:
cd downloads
我们已更改为下载文件夹,如命令提示符所示 C:用户ReactUser下载>. 您可以使用 给你 命令查看此目录/文件夹的内容。 接下来,让我们使用以下命令返回上一个目录:
cd..
现在我们又回到了开始的地方。 让我们为我们的第一个项目创建一个新目录并将其命名 反应项目1. 我们将使用以下命令:
mkdir reactproject1
同样,我们使用 dir 命令列出当前文件夹中的文件。
dir
在 Windows 上安装 React
有两种方法可以为您的项目安装 React。 让我们来看看每种方法,以便您可以决定更喜欢使用哪种方法。
选项1
- 创建项目文件夹
- 切换到项目文件夹
- 创建 package.json 文件
- 安装 React 和您选择的其他模块
此安装选项允许您完全控制已安装和定义为依赖项的所有内容。
步骤1: 首先,我们需要打开一个命令提示符。 按 Windows+R 键打开运行命令框。 输入“cmd”,然后点击“确定”按钮。
第2步: 创建一个名为的项目文件夹 反应项目1:
mkdir reactproject1
按 Enter 执行命令,我们得到一个名为 reactproject1 的新目录。 如果您在命令提示符示例中执行此操作,则可以跳过此步骤,因为它会告诉您它已经存在。
第 3 步: 移动到项目文件夹,使用 cd 反应项目1,所以我们可以将 React 安装到其中。
cd reactproject1
此时,您将看到您的提示指示 C:UsersReactUserreactproject1.
步骤4: 创建一个 包.json 文件。 以下命令将引导您创建 package.json 文件。
npm init
第 5 步: 使用安装 React 和其他模块 npm install — 保存反应, 这会将 React 安装到您的项目中并使用依赖项更新 package.json 文件。
npm install --save react
我们可以使用安装额外的包 npm 安装 — 保存 和名字 包裹 我们要安装。 这里我们正在安装 react-dom: npm install — 保存 react-dom
npm install --save react-dom
选项 2
- 安装 Create-React-App 包以简化在项目中创建和安装 React 的过程
步骤1: 首先,我们需要使用 Win+R 打开命令提示符并键入“cmd”。 然后,键入以下命令。
npm install -g create-react-app
这将安装 Create-React-App 模块,这使得使用单个命令轻松创建 React 并将其部署到项目中。
npm install -g create-react-app
注意使用时 创建反应应用程序 确保您位于所需的目录/文件夹位置,因为此命令将在当前路径中创建项目文件夹。
Create-React-App 模块现在安装在以下位置。
C:Users<username>AppDataRoamingnpmnode_modulescreate-react-app
一旦安装了 Create-React-App 模块,我们就可以使用它来创建项目文件夹并自动安装 React 和依赖项。
为了确保在创建新项目时您在所需的目录中,您可以使用 给你 看看你在哪里,以及 光盘 或 光盘.. 到达所需的位置。
第2步: 要创建一个新项目并将 React 部署到其中,我们将运行以下命令来创建 反应项目2.
create-react-app reactproject2
整个过程是自动化的,首先为项目创建一个新的 React 应用程序文件夹,然后安装包和依赖项。 默认包包括 反应, 反应域, 和 反应脚本. 安装将需要几分钟。
运行 React 项目应用程序
要运行我们的新项目,我们需要使用命令提示符切换到项目文件夹,然后启动它。 这 cd reactproject2 命令会将我们带到 reactproject2 文件夹。
cd reactproject2
这 高于海平面 开始 命令将运行项目应用程序。
接下来,默认浏览器将打开并加载项目:
您现在已经为构建项目设置了环境! 如果您正在运行我们闪电般快速的服务器,我们的支持团队将随时为您解答任何问题。
我们以成为 Hosting™ 中最有帮助的人而自豪!
我们的支持人员一年 365 天、每周 7 天、每天 24 小时随时为您提供与本文相关的任何问题的帮助。
我们可以通过我们的票务系统 [email protected]、电话(800-580-4986)或通过 在线聊天 或任何你喜欢的方法。 我们为您努力工作,以便您可以放松。