研修の章立てについて

[aTomohiroIto]

現在の研修内容は、下記のようにボリュームが偏っています。

• HTML/CSS(0.5日)
• Typescript(1.0日)
• React(2.5日)
• 実習科目(3.5日)

実習は良い区切りがつかなくとも仕方ない（代わりに、適宜ミニ講義を挟む）のですが、Reactが大きくなりすぎなので、このように構成しなおすのはどうでしょうか。

章立て案

• はじめに
  • プロダクト紹介
  • WebFrontend 新卒研修の序論
• 第1章 (1.0日) TypeScript
  • 基礎研修
  • Deep Dive
• 第2章 (1.0日) HTML/DOM/CSS
  • HTML/CSS
  • ReactDOM
    • (旧1章)TSXを学ぶ
    • (旧2章)要素のレンダー
    • (旧4章)イベント処理
  • CSS modules
  • (旧15章)CSS Layout
• 第3章 (1.0日) React 基礎
  • 準備 なぜReactを学ぶのか
  • (旧3章)コンポーネントとprops
  • (旧8章)state
  • (旧7章)Reactのライフサイクル
  • (旧12章)副作用を実行する useEffect
  • (旧13章)その他のHooks関数
  • (旧5章)条件付きレンダー
  • (旧10章)Hooksのルール
• 第4章 (1.0日) React Deep Dive
  • (旧11章)値の同一性を理解する
  • (旧6章)リストとkey
  • (旧12章)副作用を実行する Suspense
  • (旧9章)複数のstateをまとめる
  • (旧14章)描画パフォーマンスの最適化
• 第5章 発展課題
  • 付録 : 発展課題
• 演習 (3.5日)
  • 実習の進め方
  • ミニ講義 (各15分程度 + 質疑応答)
    • Chrome 開発者ツールの主な使い方
    • React の状態管理について
    • Next.js
    • ACCESSとPUBとEPUB
    • (旧12章)副作用を実行する esLint
    • (旧15章)Redux、Concurrent、テスト

参考 : 現状こうなっています

• プロダクト紹介
• WebFrontend 新卒研修の序論
• HTML/CSS
• TypeScript
  • 基礎研修
  • Deep Dive
• React
  • 準備 なぜReactを学ぶのか
  • 第1章　TSXを学ぶ
  • 第2章　要素のレンダー
  • 第3章　コンポーネントとprops
  • 第4章　イベント処理
  • 第5章　条件付きレンダー
  • 第6章　リストとkey
  • 第7章　Reactのライフサイクル
  • 第8章　state
  • 第9章　複数のstateをまとめる
  • 第10章　Hooksのルール
  • 第11章　値の同一性を理解する
  • 第12章　副作用を実行する
  • 第13章　その他のHooks関数
  • 第14章　描画パフォーマンスの最適化
  • 第15章　高度なアプリケーション実装に向けて
  • 付録 : 発展課題
• ミニ講義
  • Chrome 開発者ツールの主な使い方
  • React の状態管理について
  • Next.js
  • ACCESSとPUBとEPUB
• 演習

[aDaikiWatanabe]

@aTomohiroIto

• 第1章 (1.0日) HTML/DOM/CSS
  • HTML/CSS
  • ReactDOM
  • (旧1章)TSXを学ぶ
  • (旧2章)要素のレンダー
  • (旧4章)イベント処理
  • CSS modules
  • (旧15章)CSS Layout
• 第2章 (1.0日) TypeScript
  • 基礎研修
  • Deep Dive

JS/TSを全く触れてこなかった人に対して、TSXを学ぶで突然式、文字列リテラルやreturn isDisplay && <Greeting {...rest} />;を出して、混乱させないか不安に思います。