React js 教程 - Shell-Bash

React JS 是一个流行的 JavaScript 前端库，它被广泛应用于现代 Web 应用开发中。本教程将介绍如何使用 Shell-Bash 命令行工具来安装和配置 React JS 开发环境。

安装 Node.js

在开始之前，我们需要首先安装 Node.js。可以从 Node.js 官方网站下载最新版的 Node.js，链接如下：https://nodejs.org/en/download/

在 Windows 操作系统上，安装 Node.js 的方法很简单，只需双击下载后的安装程序并按照提示操作即可。

在 Linux 系统上，则可以使用 Shell-Bash 命令行工具来安装。打开 Terminal 并输入以下命令：

sudo apt-get update
sudo apt-get install nodejs

安装完成后，你可以通过以下命令来验证 Node.js 是否已经正确地安装：

node -v

如果正确安装，你会看到类似以下的输出：

v12.18.3

使用 npm 安装 React

在安装好 Node.js 后，我们可以使用 npm（Node 包管理器）来安装 React。在 Terminal 中输入以下命令：

npm install -g create-react-app

这个命令将会全局安装 create-react-app 工具，它将会便于我们快速创建 React 项目并进行开发。

安装完成之后，你可以通过以下命令来验证 create-react-app 是否已经正确地安装：

create-react-app --version

如果正确安装，你会看到类似以下的输出：

3.4.1

创建 React 项目

接下来，让我们使用 create-react-app 工具来创建一个 React 项目。在 Terminal 中输入以下命令：

create-react-app my-react-app

这将会在当前目录下创建一个名为 my-react-app 的新项目目录，并安装React所需要的所有依赖项。

进入 my-react-app 目录：

cd my-react-app/

现在，我们已经成功创建了一个 React 项目，并进入到了该项目的目录下。

运行 React 项目

在项目的目录下，我们可以使用以下命令来启动 React 项目：

npm start

这将会启动一个本地的 Web 服务器，并在你的默认浏览器中打开项目页面。

如果你所使用的操作系统支持自动打开浏览器功能，你的默认浏览器将会自动启动并打开该项目页面。如果不支持，则需要手动在浏览器中输入以下 URL 地址：

http://localhost:3000/

现在，你已经成功地创建并运行了一个 React 项目！快开始开发吧！

总结

在本教程中，我们介绍了如何使用 Shell-Bash 命令行工具来安装和配置 React JS 开发环境。我们学习了如何安装 Node.js 和 npm，如何使用 create-react-app 工具创建一个新的 React 项目，在项目中使用 npm 来启动本地的 Web 服务器，并在默认浏览器中打开项目页面。现在你已经准备好开始学习 React 开发了！