【React】初心者向け入門講座・サンプル豊富でわかりやすさ重視【v18対応・Hooks・MUIデザイン】

Reactの特徴でもあるコンポーネントの作り方、使い方を解説しています。

GoogleChrome拡張機能のReact Developer Toolsの紹介、インストール方法、設定方法について解説しています。

コンポーネントの中にコンポーネントを含め、親子関係を作る方法を解説しています。

親子関係のコンポーネントで情報を受け渡す際に必須なpropsの使い方を解説しています。

propsを使い配列を渡し、子ども側で展開する方法を解説しています。

propsを使い子コンポーネントを繰り返して表示する方法を解説しています。

propsにデフォルト値を設定する方法を解説しています。

コンポーネントの間の情報を取得する方法であるprops.childrenの使い方を解説しています。

コンポーネントにリアクティブな情報を持たせるuseStateについて解説します。

useStateでステート変数が更新されるタイミングについて解説しています。

useStateの更新用関数内で現在の値を取得したいパターンがあるので事前に解説しております。

子コンポーネントから親コンポーネントへ情報を渡す方法を解説しています。

セクション2の簡単なまとめになります。

サンプルアプリをつくるために事前にCSSについて簡単に解説しています。

サンプルとしてタブメニューをつくるための準備をしています。(CSS、フォルダ、拡張機能等)

タブメニューでクリックしたらidを取得するところまで作成しています。

タブメニューの残りの処理を書いていきます。

サンプル2つ目はモーダルウィンドウをつくっていきます。準備としてCSS、画像、fontawesomeのリンクを設定します。

トグル機能の作り方を解説しつつコードを書いていきます。

サンプル3つ目はカルーセル(スライドショー)をつくっていきます。まずは準備+ JSXをつくりこんでいきます。

このセクションの簡単なまとめになります。

一般的なフォームの概要と、Reactでフォームをつくるための方法について解説しています。

useStateを使って基本的なフォームを作る方法を解説しています。

useStateでオブジェクトを使うとフォームの更新がシンプルになるのでその方法を解説しています。

textareaとradioボタンをつくっています。

mapを使って配列の数の分だけoptionタグを作る方法で、selectボックスをつくっていきます。

boolean型で1つのチェックボックスを作る方法を解説しています。

useStateに配列を使う注意も解説しつつ、checkbox複数時の対応方法を解説しています。

useRef()フックの使い方を簡単な例を用いて解説しています。

useRefを使ってファイルアップロードの方法を解説します。

フォームのサンプルという事でTodoリストをつくります。まずは追加機能から解説しています。

ToDoリストの削除機能を解説しています。

ToDoリストのチェックをつけたら横線をつける機能を解説しています。

このセクションの簡単なまとめになります。

HTTPやCORSなど基本的なweb通信について解説しています。

GoogleChromeの拡張機能を使って簡易サーバーを立ち上げる方法を解説しています。

JSで非同期処理・非同期通信をする際に知っておきたい記法についてまとめて扱っています。

コンポーネントのライフサイクルについて解説しています。

useEffect()の記述方法、注意点を簡単なサンプルを交えて解説しています。

useEffectを使い、初回のみ外部APIをたたいて情報取得する方法を解説しています。

useEffectを使ってTodoリストに検索機能を追加する方法を解説しています。

useEffectとsetIntervalを組み合わせてカルーセルの画像を自動で切り替える機能を追加しています。

このセクションの簡単なまとめになります。

Reactのインストール方法について、

動画収録時から時間がかかっていることもあり、バージョンが古くなっております。

これからインストールいただく場合は下記のコマンドで実行お願いできればと思います。

npm create vite@latest my-app --template react

講座内の比較表になります。追って動画収録も予定しております。

モダンJavaScript開発環境としてNode.js webpack, babel, polyfill などをまとめて解説しています。

実際にcreate-react-app をインストールしていきます。

create-react-appで作成したプロジェクト内フォルダ構成を解説しています。

エントリーポイントのindex.jsや関数コンポーネントApp.jsのコードを解説しています。

簡単なコンポーネントを作成してimportし、useStateも使う方法も合わせて解説しています。

JavaScriptファイルを別で作成し、export/importして使うパターンを解説しています。(カスタムフックについては別のセクションで扱います。)

コンポーネントを組み合わせてページを作るときに知っておきたいAtomicDesignについて解説しています。

ReactでのCSSの記述方法をいくつか紹介し、StyledComponent (CSS in JS) の概要を解説しています。

簡単なStyledComponentを実際に作ってみます。

StyledComponentは継承をする事ができるのでその方法を解説しています。

StyledComponentにuseStateとpropsを組み合わせて動的にCSSを変更する方法を解説しています。

CSS in JSの一つであるEmotionの書き方を解説しています。

変数でCSSをあてて複数設定したり、継承する方法も合わせて解説しています。

EmotionをStyled-Componentのようにスタイル専用コンポーネントを作ることができるのでその方法を解説しています。

このセクションの簡単なまとめになります。

ReactでSPAを実現するためのreact-router-domをインストールしていきます。

ReactRouter v6の基本となる3つのコンポーネントを設定してきます。

無効なURLを叩いた時に表示するコンポーネントの設定方法を解説しています。

SPAでリンクを設定する方法を解説しています。

プログラム側でページ切替をしたい場合は 専用のフックがあるので使い方を解説しています。

リダイレクト用のコンポーネント Navigateを使う方法を解説しています。

URLを入れ子にして一覧、詳細と表示させる方法を解説しています。

一覧、詳細のコンポーネントを書いて内容を確認していきます。

このセクションの簡単なまとめになります。

マテリアルデザインに対応したUIフレームワークであるMUIをインストールしていきます。

MUIのテンプレートを見ながら、レイアウト関連のBox, Container, Gridコンポーネントを確認していきます。

MUIでスタイルを微調整できるsxプロパティについて解説しています。

MUI専用のthemeオブジェクトを変更する事で自由にカスタマイズできるのでその方法を解説しています。

今回作成する読書管理アプリの簡単な全体像を解説しています。

GoogleBooksAPIをたたき情報を取得しuseStateにセットする方法を解説しています。

localStorageの概要と、localStorageへの保存、情報取得の方法を解説しています。

localStorageとuseState, useEffectを組み合わせてコードを書いていきます。

今回の簡易アプリで使うコンポーネントを作成しreact-routerコードも追記していきます。

まずは検索画面をつくっていきます。

googleBooksAPIをたたき本の一覧をカードで表示する方法を解説しています。

追加ボタンを押してlocalStorageに情報を保存し、editへ移動する方法を解説しています。

ブラウザ更新してもlocalStorageが消えないように対応しています。

本の情報詳細を表示するコンポーネントをつくっていきます。

DatePickerをインストールし日本語対応する方法を解説しています。

BookEditコンポーネントの保存処理を書いていきます。

読んだ日がDateクラスのままになっていたのでformatをかけてシンプルに変更しています。

localStorageに保存した一覧を表示できるようにつくりこんでいきます。

Reactフックを別ファイルに移しカスタムフックとして使う方法を解説しています。

このセクションの簡単なまとめになります。

ボーナスレクチャーはudemy講座内で唯一 宣伝を行っていい場所になっております。