JS三大フレームワークの一つ「React」を習得するためにやったことをここにまとめます。2019年の大晦日に滑り込みました。随時更新していきます!
※フックとFirebaseのRealtime DatabaseをFetch APIで連携(2021/02/24追加)
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、UIフレームワーク)
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)
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)
今後も随時更新していきます!