JS三大フレームワークの一つ「React」を習得するためにやったことをここにまとめます。2019年の大晦日に滑り込みました。随時更新していきます!
※Next.jsで動的ページのルーティング、動的APIのルーティング、APIのデータ整形を設定(2022/09/13追加)
React基本
CDNリンクで仮想DOMを初体験!
※参考:React事始め「すごいぞ!ReactはCDNで動いたんだ!」
CDNリンクでJSXを初体験!(2020/01/12追記)
※参考:【React】JSX事始め「すごいぞ!JSXもCDNで動いたんだ!」
JSXの中で別の関数のJSXを入れ子にする(2020/02/17追記)
※参考:【React】JSXの中に別の関数のJSXを読み込む(入れ子状態)
JSXの条件分岐。if文がエラー?回避方法。(2020/02/27追記)
※参考:【React】条件分岐の書き方(if文エラー回避、論理演算子、三項演算子)
JSXでループ。for文がエラー?回避方法。(2020/03/04追記)
※参考:【React】ループの書き方(for文エラー回避、配列、map())
JSXとタイマー処理(setInterval())(2020/03/26追記)
※参考:【React】JSXレンダリングとタイマー処理(setInterval())の関係を理解する
イベント属性(onChange、onClick)(2020/03/31追記)
※参考:【React】イベント属性を使ってみた(onChangeとonClick)
コンポーネント
基本編
コンポーネント事始め。一文字目は大文字にしないと認識されない!(2020/04/06追記)
※参考:【React】コンポーネント事始め(一文字目は大文字!)
コンポーネントの属性の固有値を読み込んでバリエーション!(2020/04/14追加)
※参考:【React】コンポーネントの属性値を読み込む(style、テキスト、四則演算)
コンポーネントでクラスを使ってみる(2020/04/23追加)
※参考:【React】クラスを使ったコンポーネントの書き方(React.Component、render()、super())
コンポーネントクラスの属性に個別の値を設定する(2020/04/28追加)
プロジェクト編
Reactプロジェクトの作成と実行(2020/05/03追加)
※参考:【React】Create React Appのプロジェクトの作成と実行(エラー対処も)
Appコンポーネントの内容を書き換え(2020/05/13追加)
※参考:【React】ReactプロジェクトのAppコンポーネントを書き換えてみる
複数コンポーネントをファイル分割して読み込む(2020/05/18追加)
※参考:【React】Reactプロジェクトでクラスコンポーネント作成、入れ子、ファイル分割まで
状態管理
ステート
setState()、タイマー処理、イベント処理(2020/05/27追加)
※参考:【React】Reactプロジェクトでステートを事始め(setState()、タイマー処理、イベント処理)
ステートで三項演算子による条件分岐、map()によるループ(2020/06/02追加)
※参考:【React】ステートで制御構造(条件分岐、ループ)
コンテクスト
コンテクストでコンポーネント間の値のバケツリレーを解決(2020/06/09追加)
※参考:【React】コンテクスト(Context)でネストされたコンポーネントに値を渡す
Redux
Reduxをインストール、値の受け渡し、変更(2020/06/23追加)
※参考:【React】Reduxを事始める(インストール〜ストア、レデューサー、プロバイダー設定)
フック(React Hooks)
フック(React Hooks)事始め:useState、useEffect、useContext(2021/02/17追加)
※参考:【React】フック(React Hooks)事始め:useState、useEffect、useContext
フックとjson-serverをFetch APIで連携、Reactライフサイクルの理解(2021/02/20追加)
※参考:【React】フックとjson-serverをFetch APIで連携(Reactライフサイクルの理解)
フックとFirebaseのRealtime DatabaseをFetch APIで連携(2021/02/24追加)
※参考:【React】フックとRealtime DatabaseをFetch APIで連携(React + Firebase環境)
CSS設定
ReactのいろいろなCSS設定方法について調べた(2020/12/09追加)
※参考:ReactのCSS設定方法について調べたこと(className属性、style属性、CSS Modules、CSS in JS、CSSフレームワーク)
CSS ModulesでCSSとSass(SCSS)のローカルスコープを作る(2020/12/11追加)
※参考:【React】CSS ModulesでCSSとSass(SCSS)のローカルスコープを作る
styled-componentsでCSS in JSを事始め(2020/12/16追加)
※参考:【React】styled-componentsでCSS in JSを事始める
Material UIでマテリアルデザイン事始め(2020/12/18追加)
※参考:【React】UIフレームワークMaterial UIでマテリアルデザインを事始める
React + CSS in JS + TypeScript環境
環境構築
React + TypeScriptの開発環境作ってGitHub Pagesにデプロイ(2021/01/26追加)
※参考:【React】React + TypeScriptの開発環境を作る(デプロイまで)
React + TypeScript + CSS in JS環境を作る(2021/01/31追加)
※参考:【React】React + TypeScript + CSS in JSの開発環境を作る(Gitエラー対処も)
EJS→JSX
Reactとメタ言語の比較、まずはHTMLコンポーネント化(2021/02/02追加)
※参考:【React】HTMLコンポーネント化(Reactとメタ言語の比較-1)
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)
Sass(SCSS)→CSS in JS
styled-componentsのcreateGlobalStyleでbodyタグにCSS設定(2021/02/09追加)
※参考:【React】styled-componentsのcreateGlobalStyleでbodyタグにCSS設定(Reactとメタ言語の比較-4)
styled-componentsのcss helperでスタイルを継承(2021/02/11追加)
※参考:【React】styled-componentsのcss helperでスタイルを継承(Reactとメタ言語の比較-5)
TypeScriptモジュール追加
React環境にピュアなTypeScriptモジュールを追加してみる(2021/02/12追加)
※参考:【React】ピュアなTypeScriptモジュールを追加してみる(Reactとメタ言語の比較-6)
ルーティング(React Router)
React RouterでSPAのルーティング設定、下層ページの404対策も(2021/02/28追加)
※参考:【React】React RouterでSPAのルーティング設定(下層ページの404対策も)
Next.js
SPAのOGPが不満だったため、ついにNext.jsに足を踏み入れてしまった…。(2021/04/19追加)
※参考:【React】Next.jsを事始める(インストール、ページ設定、表示まで)
GitHub Pagesへのデプロイを検討したが、Vercelの方が簡単に実現できた!(2021/04/21追加)
※参考:【React】Next.jsのデプロイ:Vercelがまったく・カン・タンだ!
Next.jsのLinkとHeadはReactのメリデメを相克している!(2021/04/23追加)
※参考:【React】Next.jsのリンク設定(Link)、共通コンポーネント化、headタグ設定(Head)
Create Next App環境にTypeScriptとCSS in JSを追加!(2021/04/24追加)
※参考:【React】Create Next App + TypeScript + CSS in JS環境を作る
Next環境からRealtime Database、Firestore、スプレッドシートのデータを読み込む(2022/01/16追加)
※参考:【React】Realtime Database、Firestore(&スプレッドシート)のデータをFetch APIで読み込む(Next.js環境)
Next.jsで動的ページのルーティング、動的APIのルーティング、APIのデータ整形を設定(2022/09/13追加)
※参考:【React/Next.js】「ビートルズDB」を作った(ビートルズの楽曲を検索できるアプリ)
今後も随時更新していきます!