React全部入り：Reactマスター Zero To Hero（動画コース／計7時間半）
- ダウンロード商品¥ 27,800
【React全部入り：Reactマスター Zero To Hero（動画コース／計7時間半）】 視聴はこちら 👉👉 https://monotein-master-videos-viewing.netlify.app
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秒） 本コースは動画配信プラットフォームVimeoにパスワード付きで用意してあります。本商品を購入すると、Vimeoへのリンクと閲覧パスワードの記載されたPDFファイルがダウンロードいただけます。 下記ページにて、数本の動画をお試しで公開しています。 ▶︎▶︎ https://monotein-master-videos-viewing.netlify.app
🟩 本コースで利用するテクノロジーおよびバージョン情報等
OS：Mac（Sequoia） ブラウザ：Googleクローム Node.jsバージョン22 Reactバージョン19 VS Code
🟩 カバーしている事項
🔷 アプリケーションの仕組み 🔷 フロントエンドの役割 🔷 バックエンドの役割 🔷 CRUD操作 🔷 Reactの概要 🔷 Reactを使う理由 🔷 コンポーネント 🔷 仮想DOM 🔷 レンダリングの種類 🔷 レンダリングのステップ 🔷 コミッティング 🔷 トリガーリング 🔷 ペインティング 🔷 初回レンダリング 🔷 再レンダリング 🔷 JavaScriptの歴史 🔷 オブジェクトと配列 🔷 データの種類 🔷 定数宣言 🔷 組み込みfunction 🔷 function 🔷 console.log() 🔷 map() 🔷 slice() 🔷 switch 🔷 演算子 🔷 分割代入 🔷 スプレッドオペレーター 🔷 React開発ツール 🔷 React + Vite 🔷 フォルダ構成の考え方 🔷 Reactコード（コンポーネント）の構造 🔷 Reactアプリの構造 🔷 SPA 🔷 CSSの適用方法 🔷 fetch() 🔷 Promise 🔷 非同期処理（async 🔷 await） 🔷 state 🔷 state更新の方法（useState） 🔷 テンプレートリテラル 🔷 イベントの種類 🔷 イベントの書き方のバリエーション 🔷 単方向データフロー 🔷 ページの設定方法（react-router-dom） 🔷 ページの移動 🔷 Layoutコンポーネント 🔷 ページタイトルの設定 🔷 ローディング 🔷 Reactバージョン19について 🔷 formタグの役割 🔷 Action 🔷 formのaction属性 🔷 useTransition 🔷 useActionState 🔷 functionの巻き上げ 🔷 stateの整理 🔷 Context 🔷 use 🔷 エラー処理 🔷 try 🔷 catch 🔷 ダークモードの仕組みと実装 🔷 CSS変数 🔷 localStorage 🔷 useEffectのレンダリング制御方法 🔷 デフォルトimportと名前付きimport 🔷 配列の扱い方 🔷 カスタムHook 🔷 条件付きレンダリング 🔷 メタデータの設定 🔷 Reactサーバーコンポネント 🔷 Next.jsの環境構築 🔷 分割代入と省略記法 🔷 functionの書き方のバリエーション 🔷 関心の分離（表示とロジック） 🔷 コンパウンド・コンポーネント 🔷 restオペレーター 🔷 useStateの書き方 🔷 useEffect 🔷 useLayoutEffect 🔷 useReducer 🔷 useRef 🔷 memo 🔷 useMemo 🔷 useCallback 🔷 Reactコンパイラ 🔷 useTransition 🔷 Suspense 🔷 Lazy 🔷 Redux 🔷 テスト（vitest）
🟩 講師について：三好アキ
Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』や、『動かして学ぶ！Next.js/React開発入門（翔泳社／2024年）』などの著者。 自身のJavaScript挫折経験をもとに、HTMLとCSSの知識だけで本格的なアプリ開発を始められる教材制作を得意とする。 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。 🔷 既刊書（Amazon） → https://www.amazon.co.jp/stores/author/B099Z51QF2 🔷 Udemy → udemy.com/user/aki-miyo 🔷 ウェブサイト → https://monotein.com 🔷 X（Twitter）→ https://twitter.com/monotein_ 🔷 note → https://note.com/monotein
🟩 コースの目次（計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）