【6章】React実践演習 振り返り

Reactで簡単なブログサイトの作り方を学びました。ページの分け方と、入力フォームの作り方を一通り手を動かして確認できました。

学習を始める前は、WebアプリやReactという言葉を、いつも見ているWebサイトとは別の難しいものとして捉えていました。作ってみると、画面に出ているのは見出しやリンク、画像、フォームといったHTMLの要素だと分かりました。Reactは、Webサイトを部品に分けて組み立て、表示を更新するためのライブラリでした。Web開発でのライブラリやフレームワークは、Webサイト(HTML)の組み立てを助けるためのものだと理解できました。

実践で作ったブログサイト

実践では、アウトプットとして簡易的なブログサイトを4つの課題に分けて作りました。スタイルはTailwind CSSを使いました。

リポジトリは reactAppChapter06 です。課題ごとのブランチは次のとおりです。

学習で使ったコマンド

React / Vite

アプリの作成と起動

npm create vite@latest
cd 作成したディレクトリ
npm install
npm run dev

package.json に定義されているスクリプト

課題の途中で追加したパッケージ
react-router-dom、ルーティングライブラリ
TailwindCSS、CSSフレームワーク

npm install react-router-dom
npm install tailwindcss @tailwindcss/vite

Git

課題ごとにブランチを作り、コミットしてGitHubへ反映し、プルリクエストを出す。
課題1の例

git checkout -b feature/task_1
git add .
git commit -m "課題1の実装"
git push origin head

レビューに合格したら、プルリクエストをマージし、ローカルのmainを最新に合わせてから次の課題へ進む。

git checkout main
git pull origin main --rebase
git checkout -b feature/task_2

Tailwind CSSの設定

npm install tailwindcss @tailwindcss/vite のあと、プラグインの登録とCSSの読み込みを行う。

vite.config.js で、Tailwind CSSのプラグインを追加。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

src/index.css に、次の1行を書く。Viteの初期状態では、このファイルを src/main.jsx が読み込む。

@import "tailwindcss";

これで、コンポーネントの className にTailwind CSSのクラスを書いてスタイルを付けられる。