Retodo - 用 React 写一个自己的 Todoist(上)

前言

点这里 → Hower’s Todoist⚡

拥有自己的Todoist真的是太coooooool了(虽然没有什么用hh)

这篇文章主要讲一下整个的流程吧,算是对这个项目的一个总结,也能给初学者提供一些思路吧(如果有人能看到的话)

如何创建一个 React 项目

使用官方脚手架creact-react-app

在一个文件夹内,右键选择在终端中打开

首先通过npm全局安装 create-react-app

1
npm install -g create-react-app

然后使用 create-react-app 命令来创建项目

1
create-react-app <项目名>

就ok啦!

如何将 React 项目上传到 Github

  1. 进入 Github,点击 Repositories,点击New,起个Repository name,建立一个新仓库

  2. 进入仓库,点击 Code 里面的 SSH ,复制链接

  3. 到刚刚生成的 React 项目旁边,右键选择在终端中打开,输入

1
git clone 刚刚复制的链接
  1. 把 React 项目文件拖入本地仓库

  2. 进入本地仓库,右键选择在终端中打开,输入

1
2
3
git add .
git commit -m '备注信息'
git push

也可以不敲这些代码,用VScode十分的方便哦

如何将 React 项目部署到自己的 Github Page 上

我也是查了很多资料才成功上传啊

  1. 安装gh-pages(github page一般用master和gh-pages分支部署)
1
npm install gh-pages --save-dev
  1. 修改 package.json
  1. 推送到 github
1
2
npm run build //将react项目打包编译成静态资源放在build目录下
npm run deploy //将build下面内容传送到github上

之后如果进行内容更新,通过 npm run deploy 更新到网页上

总结

主要是巩固下一些 git 指令吧,争取以后初始化项目就可以摆脱查资料,自己就可以流畅地敲出来hh
下一篇博客就更新完整的 Todoist 项目吧


Retodo - 用 React 写一个自己的 Todoist(上)
http://howerrr.github.io/2022/05/29/Retodo-用React写一个自己的Todoist(上)/
作者
Hower Lin
发布于
2022年5月29日
更新于
2025年7月16日
许可协议