从GitHub克隆ReactJS项目并开始开发

在本系列教程的最后一部分,将从之前创建的GitHub仓库开始,展示如何轻松地使用GitHub上的代码来设置本地工作空间,并开始新的ReactJS应用程序的开发。

GitHub仓库设置本地工作空间

假设需要开始使用TypeScript开发一个全新的ReactJS应用程序,名为“Top Secret”。可以按照本系列的第一部分所描述的步骤来设置代码,或者可以按照以下步骤进行...

打开浏览器,访问以下URL:。点击绿色的“Clone or download”按钮,复制弹出对话框中的URL:。

在计算机上打开Git Bash,选择想要创建GitHub仓库副本的位置。在Git Bash中,输入以下命令:

git clone [复制的文本] [新应用程序名称]

例如,如果新应用程序名称是“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 Packages(node_modules),没有将dist或node_modules文件夹提交到GitHub。但确实提交了package.json文件。要解包package.json文件并安装package.json文件中提到的所有Node Packages,需要在Git Bash中执行以下命令:

npm install

该命令将查询package.json,NodeJS将负责其余的工作——它将安装package.json文件中提到的所有必需的Packages,并将它们写入node_modules文件夹。

现在一旦Node Packages安装完成,可以运行构建来启动webpack,将代码转译到dist/bundle.js文件中。

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

使用GitHub仓库,只需几个简单的步骤,就可以再次运行Hello World ReactJS应用程序。现在,可以自由地构建新应用程序!

在之前的帖子中,创建了一个名为webpack-dev-server的分支,该分支在应用程序中添加了webpack dev server,并且该分支在GitHub仓库中可用。

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

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

新的webpack-dev-server分支将有一个新的Node Package - webpack-dev-server,需要通过以下命令安装:

npm install

现在让构建并运行开发服务器:

npm run build

如所见,服务器正在localhost端口8080上运行。

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

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485