42
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2019-12-31

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

プロジェクト編

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」を作った(ビートルズの楽曲を検索できるアプリ)

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

42
46
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?