Reactを学ぶ - コーディング講座

Reactを学ぶなら、React入門向けのReact jsチュートリアル。JSXからフック、状態管理、アプリ開発まで、スマートフォンのライブプレビューで学べます。88コース、324のインタラクティブなレッスンを収録。A1～C1のレベルと22言語に対応しています。

スマートフォンでコードを書く

• JSX IDE/editor：読んで、書いて、実行し、ライブプレビューで確認。パソコンや環境構築は不要です。

• 同梱のReactDOM/Babelが、サーバーではなく端末上で動作します。

• 複数ファイルのプロジェクト、コンポーネントのインポート、操作できるボタンやフォームに対応。

ラボ

• Hooks Lab：状態の変化と再レンダリングをリアルタイムで確認。

• Props knobs：スライダーでpropsを調整。

• Render profiler/state timeline（Pro）：再レンダリングされた箇所と理由を確認し、状態の履歴を前後にたどれます。

初級から上級まで、ステップごとに

• JSX、コンポーネント、props、state、イベント、リストとキー、条件付きレンダリング

• useState、useEffect、useRef、useReducer、カスタムフック、useLayoutEffectなど

• フォームとバリデーション、React Hook Form、制御・非制御の入力

• Context、Redux Toolkit/RTK Query、Zustand、Jotai

• React Router、データ取得、TanStack Query、SWR、楽観的UI

• TypeScript、テスト、Storybook、アクセシビリティ、セキュリティ

• メモ化、コード分割、Suspense、トランジション、リストの仮想化

• React 19、Server Components、SSRとハイドレーション、ストリーミング

• Next.js App Router、データ取得、認証

• Web開発者向けのReact nativeの基礎

• デプロイ、マイクロフロントエンド、モジュールフェデレーション

実際のプロジェクトを作る

Reactを学ぶためのガイド付きプロジェクトを20件収録：いいねボタン、プロフィールカード、チップ計算機、クイズゲーム、ストップウォッチ、登録フォーム、ショッピングカート、画像カルーセル、ページ分割付きリスト、ToDoアプリなど。各ステップでコンポーネントの動作をチェックします。

定着するまで練習する

• 30のコーディングミッション：初級・中級・上級で、フック、レンダリング、フォーム、Context、パフォーマンスを練習。

• UI Match：お手本を再現し、構造・スタイル・テキストのスコアを確認。

• Bug Hunt：コンポーネントのバグを見つけて修正。

• Component Recall：間隔を空けて復習しながら、欠けているコンポーネントのコードを復元。

• クイズ50問、面接対策50問、チートシート。

• デイリーチャレンジ、連続学習記録、XP、ランキング。

AIメンター（Pro）

AIによる解説、コードレビュー、修正案、好きなトピックのカスタムレッスン。

修了証（Pro）

最終試験に合格すると、共有できる修了証を取得できます。

対象者

• HTML、CSS、JavaScriptのいずれかを少し学んだことがあり、React入門に取り組む初心者

• 短期間でフレームワークを乗り換えたい開発者

• フロントエンド開発者の面接に備える方

• Reactを学ぶことで、プロジェクトのポートフォリオを作る独学のプログラマー

無料とPro

無料：最初のコース、ガイド付きプロジェクト1件、コーディングミッション2件、editorとライブプレビュー、Hooks Lab、Props knobs、Bug Hunt、UI Matchのチェック1日3回。広告あり。

Pro：全88コース、すべてのプロジェクトとミッション、AIメンター、Render profiler/state timeline、修了試験。広告なし。

Reactなどの商標は、それぞれの権利者に帰属します。本アプリは独立した学習アプリであり、商標権者との提携関係はなく、承認も受けていません。

プライバシーポリシー：https://www.coddykit.com/terms/privacy-policy