在【React】中,第一次进行环境设置和创建应用

首先(引言)

我第一次尝试创建React应用程序,所以我会解释一下步骤。

前提条件 tí

苹果操作系统
视觉工作室编辑器

基本知識

create-react-app是React官方提供的一款工具,用于简化React环境的设置。
Node.js是在服务器环境下运行的JavaScript,需要在个人电脑上作为服务器来运行JavaScript时才需要使用它。
npm是Node.js的包管理工具,它的名称是”Node.js的包管理器”的首字母缩写。
homebrew是MacOS的包管理工具。
nodebrew是node的版本管理工具。

各种安装

1. 安装自制软件

打开Homebrew的官方网站。

Homebrew的官方网站:https://brew.sh/

只需要一种选项:在终端输入以下命令。

スクリーンショット 2023-10-26 19.23.11.png
スクリーンショット 2023-10-08 13.43.30.png

按下「返回」或「确定」

只要终端中输出了大量的文本,并且在最后显示了”Installation successful!”,那就表示安装成功了。如果没有显示出来,请确保没有拼写错误,如果也没有问题,请解读错误并通过搜索解决。

在终端中输入”brew -v”来验证已安装的Homebrew版本。

确认正在输出已安装的Homebrew的版本。

2. 安装Nodebrew

在终端中输入brew install nodebrew(用于在Homebrew上安装nodebrew的命令)。

在终端中输入nodebrew -v来确认已安装的nodebrew版本。

スクリーンショット 2023-10-08 13.57.54.png

3. 安装Node

在终端输入命令 “nodebrew ls-remote” 来查看可安装的Node.js版本列表。

スクリーンショット 2023-10-08 14.00.41.png

在终端输入nodebrew install-binary stable命令(用于安装稳定且无错误的Node.js版本的命令)。

スクリーンショット 2023-10-08 14.03.40.png

在终端中输入nodebrew ls命令来显示已安装的Node.js版本列表。

スクリーンショット 2023-10-08 14.04.17.png

在终端中输入“nodebrew use”命令,后面紧跟要使用的Node.js版本的名称,用于指定要使用的Node.js版本。

在终端输入nodebrew ls(显示已安装Node.js版本的命令)。

スクリーンショット 2023-10-08 14.05.11.png

将Node的环境路径加入通路中。

在终端中输入echo $SHELL(用于确认所使用的shell类型的命令)。

スクリーンショット 2023-10-08 14.09.07.png

在终端中输入命令”echo ‘export PATH=$HOME/.nodebrew/current/bin:$PATH’ >> ~/.zprofile”以设置环境变量路径。

重启终端。

在终端输入node -v和npm -v命令,确认Node.js版本应大于或等于10.16,npm版本应大于或等于5.6。

在终端中转到目录进行开发的”○○”。

在终端中输入命令 npx create-react-app 文件夹名称(用于执行网络上的 create-react-app)

确保React环境已经建立完成。

使用的编辑器打开生成的文件夹。

在终端中输入npm start。

确认React的初始页面已经打开。

スクリーンショット 2023-10-08 17.06.20.png

请提供参考的资料。

React公式网站:https://zh.reactjs.org/docs/create-a-new-react-app.html

使用create-react-app进行环境设置。

视频链接:https://youtu.be/Ym4If5W9SS0?si=vSMdCGv4ewi-vcME

最后

我在家里的电脑上进行了环境搭建,以便使用React。由于没有遇到任何问题,所以大家也可以参考相关资料网站进行环境搭建。

广告
将在 10 秒后关闭
bannerAds