Reactを学ぶ - 無料インタラクティブ講座
最初のレッスンから本物のコンポーネントを書いてReactをマスター。JSX、props、state、イベントを学んだら、そのままNext.jsへ - ファイルシステムルーティング、レイアウト、サーバーコンポーネント、データフェッチ、サーバーアクション。すべてブラウザ上で動き、つまずいたらAIヒントが助けてくれます。修了時には無料の修了証を獲得。
1,000+ 人のcoddersが登録中
89 レッスン69 チャレンジ164 クイズの問題
- 初心者向け
AIによるコーディングサポート
実践的なインタラクティブレッスン
全レッスンに音声ナレーション付き
知識を確かめるクイズ
無料の修了証明書
シラバス
セクション 1
基本概念
セクションを始める開始開く閉じるコンポーネント、JSX、props、state、イベントなど、React を使ったユーザーインターフェース構築の基礎を学び、最初のコンポーネント作成から動作するミニアプリの構築までを目指します。Reactの概要
5 レッスン513JSX式
5 レッスン58コンポーネント
5 レッスン48Props
6 レッスン510ステートとイベント
6 レッスン59フォームと入力
5 レッスン47条件分岐とリスト
6 レッスン510プロジェクト：プロフィールカード
4 レッスン4セクション 2
Next.js の基本専用ページ
セクションを始める開始開く閉じるReact コンポーネントから実践的なアプリへのステップアップ：ファイルシステムルーティング、レイアウト、サーバー/クライアントコンポーネント、データ取得、Server Actions、そして完成された Next.js プロジェクトの構築までを学びます。なぜNext.jsなのか
4 レッスン39ルーティングとリンク
6 レッスン516レイアウトとメタデータ
6 レッスン515サーバーとクライアント
6 レッスン515サーバー上のデータ
6 レッスン516Server Actions
5 レッスン413クライアント側のナビゲーション
5 レッスン515プロジェクト：Coddy Eats
プロジェクト9 レッスン
Learn by Doing
Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.
Build Your Coding Streak
Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.
12 days streak
Return tomorrow to keep your streak!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
Double or Nothing
Day 5 of 7
Streak Freeze
2 left
Code Anywhere, Anytime
Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.
You're Not Alone in This
Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!
1
2
3
Promotion zoneEvery way to learn
Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.
A variable is a named container that stores a value you can reference later in your program.
In Python, you create one by writing the name, an equals sign, then the value you want to store.
The value can change over time - reassigning the name simply points it to a new value.
Prove Your Skills
Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.
Certificate of CompletionPython Fundamentals
Add to LinkedInCoddyでReactを学ぶ理由
- 最初のレッスンからブラウザでJSXを書ける。Nodeのインストールもcreate-react-appもビルド設定も不要 - 各レッスンで本物のコンポーネントコードを編集して実行できます。
- 本物のアプリで終わるカリキュラム。基礎セクションでコンポーネント、props、state、イベント、フックを学び、その後はルーティング、レイアウト、サーバー/クライアントコンポーネント、データフェッチ、サーバーアクションを扱う本格的なNext.jsセクションへ。
- あなたの実際のコードを読むAIヒント。コンポーネントが描画されない、stateが更新されないといったとき、答えを明かさずにバグの場所を示すヒントがもらえます。
- 修了時には無料のReact修了証。Reactが今も最も需要の高いUIライブラリであるフロントエンド職への強いアピールになります。
React学習に関するよくある質問
Reactとは何ですか？
Reactを学ぶ前にJavaScriptを知っている必要がありますか？
Reactの習得は難しいですか？
ReactとNext.jsの違いは何ですか？
Reactはオンラインで無料で学べますか？
React講座の修了後に修了証はもらえますか？
