如何在MacOS上设置React.js

472 阅读6分钟

在这篇文章中,你会发现一个关于如何在MacOS上安装React的一步步指南。它遵循的理念是用一个IDE来管理你的大部分Web开发任务。这样你就可以作为一个开发者专注于你手头的任务。然而,如果你喜欢用轻量级的工具来组成你的开发环境,而不是用一个完整的IDE,请查看我的个人MacOS网络开发设置。尽管如此,如果你只是想找到一种在Mac OS上快速开始使用React的方法,请按照下面的说明进行。

注意:下面的一切(通过NVM的Node/NPM、VS Code、Git)也可以通过Homebrew安装。Homebrew是一个MacOS应用程序的软件包管理器,被开发者广泛使用。如果你想以更专业的方式入门,请查看Homebrew,安装它,并尝试用它安装下面的所有应用程序。你会在我上面的个人MacOS网络开发设置中找到更多关于它的信息。

MacOS上的Node.js和NPM

由于你要在MacOS上使用JavaScript进行React开发,所以没有办法绕过Node.js和NPM。Node.js是一个JavaScript运行时,它使得在浏览器之外运行JavaScript成为可能。底层的node包管理器(NPM)被用来在命令行上安装框架和库,如React.js,到你的项目。它们被称为node包。你将在后面看到这对MacOS用户安装React库的命令行是如何运作的。

为了在你的MacOS机器上安装和管理Node.js,你可以从他们的官方网站上安装它。不过,我鼓励你去看看nvm。它是一个节点版本管理器,允许你管理多个节点版本,升级和降级节点版本,并为你手头的项目灵活选择节点版本。你可以在GitHub仓库中找到安装说明。安装node的同时也会安装npm(node包管理器)。node包管理器用于在命令行上向你的项目安装库/框架(node包),如React。

MacOS上的Visual Studio Code

有大量的编辑器和IDE来开发Web应用程序。根据你的个人、项目或公司的要求,你可以从一系列轻量级的编辑器到全面的IDE中选择。Visual Studio Code是一个介于两者之间的解决方案。许多在MacOS但也在Windows上操作的开发者都喜欢使用它。这就是为什么我推荐Visual Studio Code来开始在MacOS上开发React应用程序。在MacOS机器上的安装很简单。导航到Visual Studio Code官方网站,下载最新版本的VS Code。之后,安装它,并检查你打开它时是否一切正常。这就是在你的机器上安装一个编辑器/IDE。

如果你想使用另一个编辑器/IDE,这取决于你。但是请记住,下面的几个步骤是建立在Visual Studio Code之上的。不过,应该可以用你自己的编辑器/IDE来替代这些步骤。

VS Code的集成终端中的Node和NPM

如果你刚开始接触网络开发,你应该在你的机器上创建一个专门的文件夹来管理所有的网络开发项目。由你来把这个文件夹划分为子文件夹。例如,可以有一个文件夹用于React应用程序,另一个用于普通Node.js应用程序。一旦你有了你的项目文件夹,在Visual Studio Code中打开这个文件夹。

在Visual Studio Code中,你应该能够打开一个标签,在底部称为 "终端"。这是你在Visual Studio Code中的集成命令行,可以用NPM安装node包或启动/测试你的项目。这取决于你是使用集成终端还是你的MacOS机器的独立命令行界面(例如内置的命令行或类似iterm2的东西)。

现在,你应该检查MacOS的Node.js安装是否成功。在命令行中,输入以下命令。它们应该输出Node.js和NPM的版本。

node --version
npm --version

为MacOS上的React创建react-app

现在你可以在命令行上用npm安装你的第一个node包。你将用-g标志全局安装它。因为全局安装,你将永远可以在命令行上访问它。以后,当你为你的项目安装一个没有-g标志的node包时,你将只能访问你项目中的node包(node模块)。现在,在命令行中(在Visual Studio Code中),输入以下命令来安装create-react-app

npm install -g create-react-app

create-react-app允许你以零配置的方式启动React应用程序。没有必要过早地参与到Webpack和Babel的工具中。如果你要读 "The Road to React",你也会使用create-react-app。这是最简单的学习React的方法,不用担心周围所有的工具。你可以用npx(通过npm提供)在MacOS上用create-react-app引导你的第一个React.js应用程序,在命令行中把你的应用程序的名字传给它:

npx create-react-app my-app

之后,你可以在命令行上导航到该项目,用npm启动它:

cd my-app
npm start

命令行应该给你一个输出,你可以在浏览器中找到该应用程序。默认应该是localhost:8080。如果你在MacOS机器上只使用Safari,我可以建议你也安装Chrome,以访问开发者环境和React开发者工具,这些工具可作为Chrome扩展。

如果你现在只想学习React,你可以开始阅读《学习React之路》。这是一本务实的书,它一步一步地引导你从头开始构建一个React应用程序。一路上,你会从JavaScript ES5过渡到JavaScript ES6,你会有很多练习来提高你的React技能。

可选的。用于Visual Studio Code和MacOS的Git

在某些时候,你可能想在GitHub上分享你的项目,或通过git版本控制与其他人合作。如果你想使用GitHub作为你的首选平台,你应该通过其官方网站创建一个账户。GitHub是一个社交平台,你可以关注其他人(你可以和我进行第一次社交互动),喜欢(星级)他们的项目或与其他人合作开发开源项目。

为了让git在命令行和Visual Studio Code中可用,你需要安装它。你可以在git官方网站上找到所有说明。不过,我建议通过Homebrew来安装。如果你想遵循这个建议,请查看这里的Homebrew和Git/Github部分。安装后,你应该在命令行上可以看到它。

git --version

如果它没有在Visual Studio Code中显示出来,你可能需要重新启动应用程序。之后,你应该看到Visual Studio Code已经有了一个git集成。从这个集成中使用git很方便,但你现在也可以从命令行中使用它。git安装和GitHub上的账户创建就到此为止。此外,你可以看看这份关于如何使用git和GitHub的基本指南


这就是你在MacOS中设置React开发所需要的一切。我希望你已经拥有了在你的机器上开始开发React的一切。请在下面的评论中告诉我你在MacOS上还使用了哪些工具。否则,如果你对我的机器上使用的工具感到好奇,可以去看我的个人开发设置指南