React全部入り：Reactマスター Zero To Hero（動画コース／計7時間半）

React-Master-Course.pdf

【React全部入り。基礎から応用まで全範囲をカバーした待望のマスターコース！（計7時間半）】

◆ 2025年3月リリース。

◆ JavaScriptの基礎の基礎、Reactの基本コンセプト、そして発展的内容まで、Reactの全範囲をカバー。

◆ このコースだけで、2025年のフロントエンド開発で必要となる最新のReactの知識をすべて習得できます。

◆ 2024年12月に安定版がリリースされた最新のReactバージョン19に完全対応。

◆ 「バージョン19以前の書き方をしたコードを、19を使って書き直す」という方法により、新旧両方のReactコードをマスター

◆ 既刊コースで好評のハンズオン形式（作りながら学ぶスタイル）。自分でコードを書きながら進むので飽きづらく、さらにアプリを作り上げていく楽しさと充実感も味わえます。

◆ 盛りだくさんのトータル7時間半の動画コース。

◆ 最新のReact開発環境構築ツールReact + Viteをベースに、2025年に必要な最新知識を伝授。

◆ HTMLとCSSの知識だけで始められる優しい入門コース。JavaScriptの基礎の基礎もカバーしています。

◆ Reactのベーシックから発展的内容まで学ぶので、これまでReactを「なんとなく」書いてきた中級者にも学びが多い内容です。

【対象者】

◆ HTML／CSSの学習を終えた人（JavaScriptの知識不要）

◆ 最新のReact（バージョン19）について深く知りたい人

◆ 理論や説明を聞くだけでなく、自分の手を動かしながら学んでいきたい人

◆ 2025年最新のReact開発環境（React + Vite）で学びたい人

◆ 他のReact入門書やコースで挫折した人

◆ Reactを使って何個もアプリを作ったことはあるけど、いまいち自信をもってコードが書けないReact中級者

◆ React公式ドキュメントを難しいと思った人

◆ VueからReactに切り替えたい人

【発売日】
2025年3月19日

【動画数／時間】
92本／計7時間26分37秒

【視聴】
下記ページにて、数本の動画をお試しで公開しています。
▶︎▶︎ https://monotein-master-videos-viewing.netlify.app

【商品について】
本コースは動画配信プラットフォームVimeoにパスワード付きで用意してあります。本商品を購入すると、Vimeoへのリンクと閲覧パスワードの記載されたPDFファイルがダウンロードいただけます。

【本コースで利用するテクノロジーおよびバージョン情報等】
OS：Mac（Sequoia）
ブラウザ：Googleクローム
Node.jsバージョン22
Reactバージョン19
VS Code

*本ショッピングサイトは、ネットショップ開設サービス「BASE（ベイス）」を利用して作られています。決済サービスもBASE社の提供しているものです。

---------------------

【コースの内容】（計7時間26分）

◆ セクション１　アプリケーションの仕組みを知ろう（7分12秒）
【1-1】このセクションで学ぶこと
【1-2】ウェブサイトとウェブアプリケーションの違い
【1-3】フロントエンドとバックエンド
【1-4】CRUD操作

◆ セクション２　Reactについて知ろう（20分53秒）
【2-1】このセクションで学ぶこと
【2-2】Reactの概要
【2-3】Reactを使う理由
【2-4】コンポーネント
【2-5】仮想DOM
【2-6】JSX
【2-7】レンダリング

◆ セクション３　JavaScriptを知ろう（39分35秒）
【3-1】このセクションで学ぶこと
【3-2】JavaScript概略
【3-3】「データ」について
【3-4】データの種類
【3-5】データの形（オブジェクトと配列）
【3-6】データに名前をつける（定数宣言）
【3-7】データを操作する手段　その１（デフォルトの操作手段）
【3-8】データを操作する手段　その２（オリジナルのfunction）
【3-9】console.log()
【3-10】map()
【3-11】slice()
【3-12】function
【3-13】switch
【3-14】論理演算子（&&）と三項演算子（?）
【3-15】分割代入
【3-16】スプレッドオペレーター

◆ セクション４　Reactの基礎を学ぼう（2時間12分）
【4-1】このセクションで学ぶこと
【4-2】アプリの構成の確認
【4-3】バックエンドの準備
【4-4】React開発ツールの紹介
【4-5】React + Viteのインストール
【4-6】フォルダ構成の方法
【4-7】Reactコードの構造
【4-8】ReactでCSSを使う方法
【4-9】共通コンポーネントの準備
【4-10】Formコンポーネント開発１（データの取得）
【4-11】Formコンポーネント開発２（データの管理／state）
【4-12】Formコンポーネント開発３（イベント）
【4-13】Formコンポーネント開発４（データの整理）
【4-14】Recipeコンポーネント開発１（Reactのデータフロー）
【4-15】Recipeコンポーネント開発２（データを表示）
【4-16】Recipeコンポーネント開発３（ページの設定）
【4-17】Layoutコンポーネント開発
【4-18】画像とCSS
【4-19】ローディングの設定

◆ セクション５　Reactバージョン19の新機能を使ってみよう（計27分10秒）
【5-1】このセクションで学ぶこと
【5-2】formタグの役割とActionについて
【5-3】formタグのaction属性
【5-4】useTransitionの使い方
【5-5】useActionStateの使い方

◆ セクション６　Reactをもっと使ってみよう（1時間59分15秒）
【6-1】このセクションで学ぶこと
【6-2】Contextの導入１（Contextの機能確認）
【6-3】Contextの導入２（propsの整理）
【6-4】try／catch
【6-5】ダークモード開発１（ダークモードの仕組み）
【6-6】ダークモード開発２（ダークモードの実装）
【6-7】ダークモード開発３（カスタムHook）
【6-8】履歴表示機能の開発１（機能の確認）
【6-9】履歴表示機能の開発２（配列へのデータ保存方法）
【6-10】履歴表示機能の開発３（useEffectの使い方）
【6-11】履歴表示機能の開発４（履歴削除機能の実装）
【6-12】履歴表示機能の開発５（条件付きレンダリング）
【6-13】コメント投稿機能の開発１（投稿機能の実装）
【6-14】コメント投稿機能の開発２（楽観的更新の導入）
【6-15】メタデータの追加
【6-16】デプロイの紹介（参考情報）

◆ セクション７ さらに深くReactを知ろう（1時間40分32秒）
【7-1】このセクションで学ぶこと
【7-2】分割代入と省略記法
【7-3】functionの書き方のバリエーション
【7-4】関心の分離（ロジックと表示）
【7-5】React Hooksの種類と分類
【7-6】useStateの記法
【7-7】useLayoutEffect
【7-8】use
【7-9】useReducer
【7-10】useRef
【7-11】最適化のためのHooks（memo／useCallback／useMemo）
【7-12】Reactコンパイラ
【7-13】useTransition
【7-14】Redux
【7-15】テスト（function）
【7-16】Reactサーバーコンポーネント概要
【7-17】Reactサーバーコンポーネントの確認１（Next.js）
【7-18】Reactサーバーコンポーネントの確認２（Next.js）