はじめに
Reactの状態管理方法の一つであるReduxを実務でよく用いられる技術スタックと合わせて
機能開発しながら学んでいきます。
学べる技術スタック
- Next.js14(app router)
- TypeScript
- Tailwind css
- Redux Toolkit
Redux Toolkitドキュメント
React icon
完成品デモ
プロジェクトリポジトリ
作業手順
1. ひな形のインストール
// 任意のリポジトリで下記コマンド叩いてひな形を準備
npx create-next-app@latest
プロジェクト名は好きな名前をつけて、オプションは画像のように選択してください
2.ライブラリインストール
// Redux Toolkit をインストール
npm install @reduxjs/toolkit react-redux @types/react-redux
// react-iconインストール
npm install react-icons --save
3. commit履歴を見ながら実装していく
「11commits」の部分をクリック
矢印の方向に従って実装していく
必要な画像はプロジェクトからダウンロードできます
自分でオリジナル画像を使ってもOKです。めんどくさい方はダウンロードしてください。
注意事項
- 調べてもわからなかったり質問がある場合はリポジトリの各コミットにコメントいただければ幸いです。
- また、React, Nextjs, TypeScriptにおける最低限の知見は必要になってきますので、全くReactに触れたことがない方にはちょっと難しいかと思われます。