原文: How to Install React.js with create-react-app

React 是当今 Web 开发领域最流行的 JavaScript 库之一。

作为一名前端开发人员,我曾在我的项目中使用过 React,并且将来可能会继续使用它。许多人感到困惑的步骤之一是 React 的安装/配置过程。

所以让我们从基础开始。在这篇文章中,你将学习如何以简单的方式安装和运行 React 应用程序。

由于人们学习 React 的兴趣也在日益迅速增加,我还决定在我的 YouTube 频道上创建有关 React 的视频教程。这是本教程的视频版本:

如何下载和安装 Node.js

首先,你将需要 NPM(或 Yarn)。让我们在这个例子中使用 NPM。

如果你的系统上没有安装它,那么你需要前往 Node.js 官方网站下载并安装 Node,其中还包括 NPM(Node 包管理器)。

image-1
Node.js 的官网

选择“推荐给大多数用户”按钮并为你的操作系统下载当前版本。

下载并安装 Node 后,启动终端/命令提示符并运行 node -vnpm -v 以查看你拥有的版本。

t1

你的 NPM 版本至少应为 5.2.0 或更高版本,因为 create-react-app 要求我们安装 NPX。如果你有旧版本的 NPM,请运行以下命令进行更新:

npm install -g npm

create-react-app 是什么

由于它很复杂并且需要很多时间,我们不想手动配置 React。create-react-app 是一种更简单的方法,它自动为我们完成所有配置和必要的包安装,并在本地启动一个新的 React 应用程序,为开发做好准备。

使用 create-react-app 的另一个优点是你不必处理 Babel 或 Webpack 配置。所有必要的配置都将由 create-react-app 为你完成。

根据 React 文档,create-react-app 是官方支持的在 React 中创建单页应用程序的方法之一。你可以在这里找到其他方法。

如何安装 Create-React-App

为了安装你的应用程序,首先转到你的工作区(桌面或文件夹)并运行以下命令:

npx create-react-app my-app

安装过程可能需要几分钟。完成后,你应该会看到一个文件夹出现在你的工作区中,其名称与你为应用指定的名称相同。

注意:如果你使用的是 Mac 并收到权限错误,请不要忘记先使用 sudo 命令成为超级用户。

如何运行你使用 Create-React-App 创建的应用程序

安装完成后,切换到你的应用安装目录:

cd my-app

最后运行 npm start 在 localhost 上查看你的应用程序:

npm start
rw

如果你在浏览器中看到这样的内容,你就可以使用 React 了。恭喜! :)

谢谢你阅读本文!