React/Next.jsを習得するためにやったことまとめ（随時更新）

JS三大フレームワークの一つ「React」を習得するためにやったことをここにまとめます。2019年の大晦日に滑り込みました。随時更新していきます！

※[Next.jsで動的ページのルーティング、動的APIのルーティング、APIのデータ整形を設定](#nextjs)（**2022/09/13追加**）

# React基本

CDNリンクで仮想DOMを初体験！

※参考：[React事始め「すごいぞ！ReactはCDNで動いたんだ！」](https://www.i-ryo.com/entry/2019/12/31/175610)

CDNリンクでJSXを初体験！（2020/01/12追記）

※参考：[【React】JSX事始め「すごいぞ！JSXもCDNで動いたんだ！」](https://www.i-ryo.com/entry/2020/01/12/203345)

JSXの中で別の関数のJSXを入れ子にする（2020/02/17追記）

※参考：[【React】JSXの中に別の関数のJSXを読み込む（入れ子状態）](https://www.i-ryo.com/entry/2020/02/17/062420)

JSXの条件分岐。if文がエラー？回避方法。（2020/02/27追記）

※参考：[【React】条件分岐の書き方（if文エラー回避、論理演算子、三項演算子）](https://www.i-ryo.com/entry/2020/02/27/082712)

JSXでループ。for文がエラー？回避方法。（2020/03/04追記）

※参考：[【React】ループの書き方（for文エラー回避、配列、map()）](https://www.i-ryo.com/entry/2020/03/04/082411)

JSXとタイマー処理（setInterval()）（2020/03/26追記）

※参考：[【React】JSXレンダリングとタイマー処理（setInterval()）の関係を理解する](https://www.i-ryo.com/entry/2020/03/26/082634)

イベント属性（onChange、onClick）（2020/03/31追記）

※参考：[【React】イベント属性を使ってみた（onChangeとonClick）](https://www.i-ryo.com/entry/2020/03/31/075926)

# コンポーネント

### 基本編

コンポーネント事始め。一文字目は大文字にしないと認識されない！（2020/04/06追記）

※参考：[【React】コンポーネント事始め（一文字目は大文字！）](https://www.i-ryo.com/entry/2020/04/06/071658)

コンポーネントの属性の固有値を読み込んでバリエーション！（2020/04/14追加）

※参考：[【React】コンポーネントの属性値を読み込む（style、テキスト、四則演算）](https://www.i-ryo.com/entry/2020/04/14/193904)

コンポーネントでクラスを使ってみる（2020/04/23追加）

※参考：[【React】クラスを使ったコンポーネントの書き方（React.Component、render()、super()）](https://www.i-ryo.com/entry/2020/04/23/074723)

コンポーネントクラスの属性に個別の値を設定する（2020/04/28追加）

※参考：[【React】クラスコンポーネントで属性を設定する](https://www.i-ryo.com/entry/2020/04/28/182111)

### プロジェクト編

Reactプロジェクトの作成と実行（2020/05/03追加）

※参考：[【React】Create React Appのプロジェクトの作成と実行（エラー対処も）](https://www.i-ryo.com/entry/2020/05/03/200500)

Appコンポーネントの内容を書き換え（2020/05/13追加）

※参考：[【React】ReactプロジェクトのAppコンポーネントを書き換えてみる](https://www.i-ryo.com/entry/2020/05/13/081604)

複数コンポーネントをファイル分割して読み込む（2020/05/18追加）

※参考：[【React】Reactプロジェクトでクラスコンポーネント作成、入れ子、ファイル分割まで](https://www.i-ryo.com/entry/2020/05/18/190215)

# 状態管理

### ステート

setState()、タイマー処理、イベント処理（2020/05/27追加）

※参考：[【React】Reactプロジェクトでステートを事始め（setState()、タイマー処理、イベント処理）](https://www.i-ryo.com/entry/2020/05/27/080611)

ステートで三項演算子による条件分岐、map()によるループ（2020/06/02追加）

※参考：[【React】ステートで制御構造（条件分岐、ループ）](https://www.i-ryo.com/entry/2020/06/02/201503)

### コンテクスト

コンテクストでコンポーネント間の値のバケツリレーを解決（2020/06/09追加）

※参考：[【React】コンテクスト(Context)でネストされたコンポーネントに値を渡す](https://www.i-ryo.com/entry/2020/06/09/062229)

### Redux

Reduxをインストール、値の受け渡し、変更（2020/06/23追加）

※参考：[【React】Reduxを事始める（インストール〜ストア、レデューサー、プロバイダー設定）](https://www.i-ryo.com/entry/2020/06/23/081325)

### フック（React Hooks）

フック(React Hooks)事始め：useState、useEffect、useContext（2021/02/17追加）

※参考：[【React】フック(React Hooks)事始め：useState、useEffect、useContext](https://www.i-ryo.com/entry/2021/02/17/065811)

フックとjson-serverをFetch APIで連携、Reactライフサイクルの理解（2021/02/20追加）

※参考：[【React】フックとjson-serverをFetch APIで連携（Reactライフサイクルの理解）](https://www.i-ryo.com/entry/2021/02/20/062444)

フックとFirebaseのRealtime DatabaseをFetch APIで連携（2021/02/24追加）

※参考：[【React】フックとRealtime DatabaseをFetch APIで連携（React + Firebase環境）](https://www.i-ryo.com/entry/2021/02/24/062009)

# CSS設定

ReactのいろいろなCSS設定方法について調べた（2020/12/09追加）

※参考：[ReactのCSS設定方法について調べたこと（className属性、style属性、CSS Modules、CSS in JS、CSSフレームワーク）](https://www.i-ryo.com/entry/2020/12/09/073749)

CSS ModulesでCSSとSass(SCSS)のローカルスコープを作る（2020/12/11追加）

※参考：[【React】CSS ModulesでCSSとSass(SCSS)のローカルスコープを作る](https://www.i-ryo.com/entry/2020/12/11/065700)

styled-componentsでCSS in JSを事始め（2020/12/16追加）

※参考：[【React】styled-componentsでCSS in JSを事始める](https://www.i-ryo.com/entry/2020/12/16/052128)

Material UIでマテリアルデザイン事始め（2020/12/18追加）

※参考：[【React】UIフレームワークMaterial UIでマテリアルデザインを事始める](https://www.i-ryo.com/entry/2020/12/18/075846)

# React + CSS in JS + TypeScript環境

### 環境構築

React + TypeScriptの開発環境作ってGitHub Pagesにデプロイ（2021/01/26追加）

※参考：[【React】React + TypeScriptの開発環境を作る（デプロイまで）](https://www.i-ryo.com/entry/2021/01/26/074007 )

React + TypeScript + CSS in JS環境を作る（2021/01/31追加）

※参考：[【React】React + TypeScript + CSS in JSの開発環境を作る（Gitエラー対処も）](https://www.i-ryo.com/entry/2021/01/31/150319)

### EJS→JSX

Reactとメタ言語の比較、まずはHTMLコンポーネント化（2021/02/02追加）

※参考：[【React】HTMLコンポーネント化（Reactとメタ言語の比較-1）](https://www.i-ryo.com/entry/2021/02/02/070255)

react-helmetでheadのtitleとdescriptionを打ち替え（2021/02/04追加）

※参考：[【React】react-helmetでheadタグの中身を動的に打ち替える（Reactとメタ言語の比較-2）] (https://www.i-ryo.com/entry/2021/02/04/072258)

JSONデータをJSXに読み込んで表示（2021/02/08追加）

※参考：[【React】JSONデータをJSXに読み込んで表示する（Reactとメタ言語の比較-3）](https://www.i-ryo.com/entry/2021/02/08/065133)

### Sass(SCSS)→CSS in JS

styled-componentsのcreateGlobalStyleでbodyタグにCSS設定（2021/02/09追加）

※参考：[【React】styled-componentsのcreateGlobalStyleでbodyタグにCSS設定（Reactとメタ言語の比較-4）](https://www.i-ryo.com/entry/2021/02/09/183209)

styled-componentsのcss helperでスタイルを継承（2021/02/11追加）

※参考：[【React】styled-componentsのcss helperでスタイルを継承（Reactとメタ言語の比較-5）](https://www.i-ryo.com/entry/2021/02/11/151759)

### TypeScriptモジュール追加

React環境にピュアなTypeScriptモジュールを追加してみる（2021/02/12追加）

※参考：[【React】ピュアなTypeScriptモジュールを追加してみる（Reactとメタ言語の比較-6）](https://www.i-ryo.com/entry/2021/02/12/065827)

### ルーティング(React Router)

React RouterでSPAのルーティング設定、下層ページの404対策も（2021/02/28追加）

※参考：[【React】React RouterでSPAのルーティング設定（下層ページの404対策も）](https://www.i-ryo.com/entry/2021/02/28/174841)

# Next.js

SPAのOGPが不満だったため、ついにNext.jsに足を踏み入れてしまった…。（2021/04/19追加）

※参考：[【React】Next.jsを事始める（インストール、ページ設定、表示まで）](https://www.i-ryo.com/entry/2021/04/19/073647)

GitHub Pagesへのデプロイを検討したが、Vercelの方が簡単に実現できた！（2021/04/21追加）

※参考：[【React】Next.jsのデプロイ：Vercelがまったく・カン・タンだ！](https://www.i-ryo.com/entry/2021/04/21/072952)

Next.jsのLinkとHeadはReactのメリデメを相克している！（2021/04/23追加） 

※参考：[【React】Next.jsのリンク設定（Link）、共通コンポーネント化、headタグ設定(Head）](https://www.i-ryo.com/entry/2021/04/23/071217)

Create Next App環境にTypeScriptとCSS in JSを追加！（2021/04/24追加）

※参考：[【React】Create Next App + TypeScript + CSS in JS環境を作る](https://www.i-ryo.com/entry/2021/04/24/191849)

Next環境からRealtime Database、Firestore、スプレッドシートのデータを読み込む（2022/01/16追加）

※参考：[【React】Realtime Database、Firestore(&スプレッドシート)のデータをFetch APIで読み込む(Next.js環境)](https://www.i-ryo.com/entry/2022/01/16/102344)

Next.jsで動的ページのルーティング、動的APIのルーティング、APIのデータ整形を設定（**2022/09/13追加**）

※参考：[【React/Next.js】「ビートルズDB」を作った（ビートルズの楽曲を検索できるアプリ）](https://www.i-ryo.com/entry/2022/09/13/065345)



今後も随時更新していきます！