【React】学んだこと①

やりたいこと

• こちらで学んだ知識の整理（実装方法は省略）

• 環境構築はこちらを参照

環境

ubuntu-24.04
node.js:   "v24.12.0"   # $ node -v
react:     "18.3.1"     # $ npm list react react-dom
react-dom: "18.3.1"
next:      "12.3.7"     # package.jsonを参照

フォルダの構成図

$ npx create-next-app blog   # 新規プロジェクト(blog)の作成

👇これは，👆のコマンドで入るもの以外も含む（実装に応じて適宜追加）

blog/
├─ .next/
├─ components/           # 各機能(コンポーネント)を実装, 定義とインポート時は"大文字"で始める！
│  ├─ header.js          # Logo, Navをインポート
│  ├─ hero.js
│  ├─ footer.js          # Logoをインポート
│  ├─ layout.js
│  ├─ logo.js
│  └─ nav.js             # 各ページへのリンクを作成
├─ node_modules/
├─ pages/                 
│  ├─ blog/               
│  │  └─ index.js         # Blogページ
│  ├─ _app.js
│  ├─ index.js            # Topページ
│  └─ about.js            # Aboutページ
├─ public/
├─ style/                 # 各コンポーネントに適応させるCSSを格納
│  ├─ globals.css         # CSSの初期化, ベースの仕様
│  ├─ header.module.css   # headerコンポーネント用のCSS
│  ├─ hero.module.css
│  └─ footer.module.css
├─ jsconfig.json          # 絶対パスを使用可能にする記述
├─ next.config.js
├─ package-lock.json      # Reactなどのバージョンを記述
└─ package.json           # 実行時に必要な処理を記述

実行

$ cd blog
$ npm run dev  # 実行

結果

感想

• Chapter1~3の内容を学んだ．
• 6時間で100ページ進んだ．