Help us understand the problem. What is going on with this article?

Reactを習得するためにやったことまとめ(随時更新)

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】クラスコンポーネントで属性を設定する

プロジェクト編

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)

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

i-ryo
フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時!
https://www.i-ryo.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away