使用 TypeScript 编写 ReactJS 入门 – 第三部分。从 GitHub 仓库设置本地工作区

这是一个由三部分组成的系列，用于设置和开始使用 ReactJS 和 Typescript。本部分将展示如何克隆在系列第二部分中创建的 GitHub 仓库，以开始新的开发。

本系列的其他部分是……

• 使用 TypeScript 编写 ReactJS 入门 – 第一部分。设置 ReactJS 工作区。
• 使用 TypeScript 编写 ReactJS 入门 – 第二部分。学习使用 Git 和 GitHub。

GitHub 仓库 - https://github.com/manish-patil/react-typescript

引言

这是本系列的最终部分，我们将从上一篇文章开始，该文章为我们的 Hello World ReactJS 应用程序创建了一个 GitHub 仓库。本部分将使用 GitHub 仓库，并展示如何轻松使用 GitHub 上的代码来设置本地工作区并开始开发新的 ReactJS 应用程序。

从 GitHub 仓库设置本地工作区

一 – 假设我们需要使用 TypeScript 开始开发一个绝密的、全新的 ReactJS 应用程序。请原谅我的戏剧化。

我们可以按照本系列第一部分中描述的所有步骤来设置我们的代码。或者我们可以这样做……克隆 GitHub 仓库（它是在前一篇文章中创建的）到您的计算机上，然后开始您的新开发。我们将看到克隆、设置和运行您的 Hello World 应用程序使用此 GitHub 仓库是多么容易。

二 – 在您的浏览器中打开 URL https://github.com/manish-patil/react-typescript。单击绿色按钮 - 克隆或下载。从打开的对话框中复制 URL https://github.com/manish-patil/react-typescript.git。

三 – 在您的计算机上，打开 Git Bash，您希望在此处创建 GitHub 仓库的克隆。在 Git Bash 中，键入命令

git clone [the copied text from above] [new application name]

因此，假设我们的新应用程序名称是（由于缺乏想象力）TopSecret，那么 Git Bash 中的命令将是

git clone https://github.com/manish-patil/react-typescript.git TopSecret

这将使 Git 创建一个新文件夹，TopSecret，并将 GitHub 仓库中的所有代码克隆/复制到您的本地计算机。正如您所看到的，Git 还为您检出了默认分支 master。您可能需要在 package.json 文件中更改应用程序“名称”为 react-typescript。

四 – 就像您现在可能已经猜到的那样，虽然代码在这里，但没有 dist 文件夹，也没有 Node 包 (node_modules) 来运行我们的应用程序，我们没有将 dist 或 node_modules 文件夹提交到 GitHub。但是我们确实提交了 package.json 文件。要解压 package.json 文件并安装 package.json 文件中提到的所有 Node 包，我们需要在 Git Bash 中执行以下命令

npm install

该命令将查询 package.json，NodeJS 将处理其余部分 – 它将安装 package.json 文件中提到的所有必需包，并将它们写入 node_modules 文件夹。

五 – 现在，一旦安装了 Node 包，我们就可以运行我们的构建，以启动 webpack 将我们的代码转译为 dist/bundle.js 文件。

尝试打开 index.html，您将看到一个运行的 ReactJS 应用程序，显示 Hello World!!!!

因此，使用 GitHub 仓库，只需几个简单的步骤，我们就可以让我们的 Hello World ReactJS 应用程序再次运行起来。现在，我们可以自由地构建我们的新应用程序了！

六 – 在我们结束之前，让我简要解释一下如何检出我们在前一篇文章中创建的另一个分支 (webpack-dev-server)，该分支向我们的应用程序添加了一个 webpack 开发服务器，并且可以通过 GitHub 仓库获得。

在本地 Git Bash 中，输入以下命令。此命令将从我们的 GitHub 仓库在本地创建并检出 webpack-dev-server 分支。

git checkout –b webpack-dev-server –t origin/webpack-dev-server

七 – 新的分支 webpack-dev-server 将有一个新的 Node 包 - webpack-dev-server，需要通过命令安装

npm install

八 – 现在，让我们使用命令构建并运行我们的开发服务器

npm run build

正如您所看到的，服务器正在 localhost 端口 8080 上运行。

检出 webpack-dev-server 分支是可选的，因为您可以在 master 分支之上为您的环境使用其他开发服务器。这只是为了展示如何使用 GitHub、Git Bash 以及如何创建和检出特定分支（如果需要）。

我希望这些文章对您大多数人在开始使用 ReactJS 和 Typescript 时有所帮助。

祝您编码愉快！