| | |

React + TypeScript + Tailwind 土台作り

Bykaori

React + TypeScript を Viteを使ってテンプレートファイルを作り、Tailwindをインポートして、最後にGitHubにRepositoryを登録するところまでのステップをメモしておく。

Viteを使ってReact + TypeScript のテンプレートを作る

“workspace”というフォルダ内に作りたいとき、Terminalを開いてまずそのフォルダまでcdで行く。
reactとtypescriptのテンプレートを使って”my-app-name”を作成する。
Done. Now run: のメッセージは無視してCode のコマンドで”my-app-name”をVSCodeで開く

cd workspace
npm create vite@latest my-app-name -- --template react-ts
Code my-app-name

Tailwindをインストールする

VSCodeのTerminalを開き以下コマンドを実行する。

npm install

次にTailwindをインストールする。（参照：https://tailwindcss.com/docs/guides/vite）

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

contentの中身を上書きする。

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {}
  },
  plugins: []
};

index.cssに以下3行を追記。Unknown at rule @tailwindというエラーが出てきても無視。

@tailwind base;
@tailwind components;
@tailwind utilities;
npm run dev

App.tsxのreturnの中にtailwindを使ってdivを追加してみる。大きなフォントで表示されていれば成功。

  return (
    <>
      <div className="text-9xl">Platypus</div>

大丈夫そうだったらGitHubと連携させる。

GitHubとの連携

GitHubを開く。New Repositoryを作成するボタンを押す。
Repository nameを入れて、Privateにチェックを入れてcreate repositoryのボタンをクリックする。
空っぽのRepositoryができたらVS CodeのターミナルでCtrl + Cしてから以下コマンドを順に実行。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:nabetxan/my-app-name.git
git push -u origin main

GitHubのページをリロードして、ファイルが表示されていることを確認。

VS Codeは再起動した方がいい。特に編集してもSource Controlが反応せず、GitをDownloadするように言ってきた場合など。

土台が無事に完成したけど、毎回これやるのめんどくさい？
次回はテンプレート化について。

先日初めてTOEICのSpeaking & Writing のテストを受験しました。
Listening & Readingテストに比べると、知名度も低く、
無料で練習問題を提供しているサイトやアプリもほとんど存在しないようなテストなので、
試験対策が難しかったです。対策用のアプリ作ったらニッチな需要あるかも？

類似投稿