Zenn
🦔

React+TypeScriptのプロジェクトをGithubに登録してみる。

2023/12/03に公開
GitHub
React
TypeScript
tech

Abstract

Reactの開発、初めたはいいけど、何が必要なファイルで何が不要なファイルか全然分からん。
なので、githubに登録すべきファイルが何なのかを残しとく。

前提

手順

1.git hubにリポジトリを作成する。


↓
適当に入力してリポジトリ生成

↓
リポジトリ、出来た。

2.git cloneで一式取得

ここではUbuntu22.04で実施するけど、windowsも手順は一緒。

cloneのURLを取得

git clone

git clone 
$ git clone https://github.com/aaaa1597/react-helloworld.git
##　　　　　　↑このURLはさっきコピーしたやつ
$ cd react-helloworld/
$ ls -al
合計 20
drwxrwxr-x  8 jun jun 4096 12月  3 08:23 .git
-rw-rw-r--  1 jun jun 1065 12月  3 08:23 LICENSE
-rw-rw-r--  1 jun jun   74 12月  3 08:23 README.md

3.このフォルダでReactプロジェクト開始

$ npx create-react-app ./ --template typescript
$ npm start

↓
開始成功!!

ブラウザ閉じて、Terminalにctrl+cで終了。

4.githubにコミット

現在のソースの状況を確認する。

$ git status
ブランチ main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   README.md

追跡されていないファイル:
  (use "git add <file>..." to include in what will be committed)
	.gitignore
	README.old.md
	package-lock.json
	package.json
	public/
	src/
	tsconfig.json

no changes added to commit (use "git add" and/or "git commit -a")

create-react-appで、下記ファイルとフォルダが生成されてるのが分かる。

  • ".gitignore"
  • "README.old.md"
  • "package-lock.json"
  • "package.json"
  • "public/"
  • "src/"
  • "tsconfig.json"

git addで、コミット対象を追加

$ git add .gitignore
### git add README.old.md ← これは自分で作ったファイルで、追加する必要ない。
$ git add README.md
$ git add package-lock.json
$ git add package.json
$ git add public/
$ git add src/
$ git add tsconfig.json

↓
git statusで、も一回確認。

$ git status
ブランチ main
Your branch is up to date with 'origin/main'.

コミット予定の変更点:
  (use "git restore --staged <file>..." to unstage)
	new file:   .gitignore
	modified:   README.md
	new file:   package-lock.json
	new file:   package.json
	new file:   public/favicon.ico
	new file:   public/index.html
	new file:   public/logo192.png
	new file:   public/logo512.png
	new file:   public/manifest.json
	new file:   public/robots.txt
	new file:   src/App.css
	new file:   src/App.test.tsx
	new file:   src/App.tsx
	new file:   src/index.css
	new file:   src/index.tsx
	new file:   src/logo.svg
	new file:   src/react-app-env.d.ts
	new file:   src/reportWebVitals.ts
	new file:   src/setupTests.ts
	new file:   tsconfig.json

追跡されていないファイル:
  (use "git add <file>..." to include in what will be committed)
	README.old.md

↑これらが、React(TypeScript)で必要なファイルらしい。
".gitignore"が自動生成されて、そこに不要な一覧を書いてくれてる。便利!!

.gitignore
$ cat .gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

node_modulesフォルダとか、buildフォルダとか.DS_Storeファイルとかは不要らしい。
ふ～ん。
↓

git commit -m ""で、コミット理由を追記

gitコメント設定
 $ git commit -m '初回コミット'

↓

コミット先ブランチの確認

コミット先ブランチの確認
 $ git branch
 * main

そうだよね。mainブランチしか作ってないもん。
↓

git pushで、リモートブランチにコミット

git push
$ git push origin main
$ Username for 'https://github.com': aaaa1597
$ Password for 'https://aaaa1597@github.com': 
Username for 'https://github.com': aaaa1597
Password for 'https://aaaa1597@github.com': 
## ↑Passwordはアクセストークン(ghp_なんちゃらのやつ)ね。
Enumerating objects: 26, done.
Counting objects: 100% (26/26), done.
Delta compression using up to 8 threads
Compressing objects: 100% (23/23), done.
Writing objects: 100% (24/24), 175.79 KiB | 14.65 MiB/s, done.
Total 24 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/aaaa1597/react-helloworld.git
   c1774ca..d8dcfc5  main -> main

出来た!!

Discussion