Reactコース

小さな部品から、複数ページを持つアプリまで。

JSXとコンポーネントから始めて、状態、API、設計、Routerへ。 6つの学習コースで、fleamaを実務的なSPAへ育てます。

全8コース・148レッスン（約37時間）

この道のりに含まれますフロントエンドエンジニアへの道

UIを組み立て、実務的なSPAへ育てよう

基礎3コースでUIの作り方を固め、実践3コースで型、状態管理、複数ページ設計へ進みます。

STEP 1｜小さな部品をつくり、組み立てる

学習有料プラン

React入門

JSX・コンポーネント・props

JSX、コンポーネント、props、イベントを扱います。プロフィールサイトをReactの部品へ分け、再利用できるUIにします。

22レッスン

始める

STEP 2｜状態を持つ、インタラクティブなUIをつくる

学習有料プラン

state・フォーム・リスト

入力やクリックに応じてUIを変える

useState、フォーム、条件表示、配列の描画を扱います。ユーザーの入力や操作に応じて変化する画面を作ります。

25レッスン

始める

STEP 3｜副作用を扱い、コンポーネントを分割する

学習有料プラン

useEffect・コンポーネント設計

副作用と部品の責務を整理する

useEffect、依存配列、cleanup、データ取得、責務分割を扱います。動くだけの画面を、変更しやすい設計へ整えます。

19レッスン

始める

STEP 4｜TypeScriptでReactとAPIを扱う

学習有料プラン

TypeScript・API

ReactとAPIを型で安全に扱う

props、state、イベント、APIレスポンスへ型を付けます。 loading、success、errorを安全に扱うfleamaの画面を作ります。

23レッスン

始める

STEP 5｜状態とロジックを、複数画面で共有する

学習有料プラン

カスタムフック・状態管理

Context・Reducerで状態を共有する

カスタムフック、Context、useReducerを扱います。画面からロジックを分離し、アプリ全体の状態を整理します。

21レッスン

始める

STEP 6｜URLと画面をつなぎ、アプリを設計する

学習有料プラン

React Router・アプリ設計

複数ページのSPAを完成させる

React Router、ネスト、URLパラメータ、検索条件、404を扱います。複数ページを持つfleamaを完成させます。

18レッスン

始める

つくるのと、直すのは違う力

白紙から組む力と、壊れたコードを直す力は別ものです。設計する道場と、原因を突き止める道場の両方を用意しました。

チャレンジしてみよう!

道場有料プラン

React道場

陽葵「注文ウィジェット、今風にできる?」

propsを受ける部品から、state、条件付きのクラス、絞り込み、入力の検証まで。最後は部品の分割と、注文ウィジェットの完成まで進みます。

10レッスン

道場に挑む

チャレンジしてみよう!

道場有料プラン

フロントデバッグ道場

呪われたウィジェットを、1つずつ供養する

見つけやすいタイポから、stateの直接変更、useEffectの無限ループ、非同期の追い越しへ。最後は5つの不具合が同時に起きた画面を、順番に片付けます。

10レッスン

道場に挑む

チャレンジしてみよう!

実践買い切り

タスク管理アプリ

Node.js / Prisma / React で、JWT 認証つきの業務 SaaS を組み上げます。

全17章・約67時間

実践内容を見る

スライドで復習する

手を動かす前に、図解でざっと思い出せます

同じ表示、書くものが違う

左は「どうやって画面を組み立てるか」の手順、右は「どうなっていてほしいか」を書いています。

命令的：手順を書く

const box = document.getElementById("profile");
const title = document.createElement("h1");
title.textContent = "あおいのプロフィール";
box.appendChild(title);

宣言的 UI：完成形を書く

export default function App() {
  return <h1>あおいのプロフィール</h1>;
}

DOM をどの順番で組み立てるかは React がやります。

1 / 4

命令的UIでは、手順を人がつなぐ

画面に1行足すだけでも、人がこの3手を順番に書きます。

作る

createElement で部品を1つ作る

文字を入れる

textContent で中身の文字を決める

つなぐ

append で親の下にぶら下げる

3手目のつなぐをやるまで、作った部品は画面のどこにも入っていません。順番を覚えているのは書いた人の側です。

2 / 4

Reactでは、返す形を変える

左の形を書きかえると、右の画面がそのとおりに変わります。document は使いません。

プレビュー

あおいのプロフィール

Web エンジニア

export default function App() {

return (

<div>

<h1>あおいのプロフィール</h1>

あおいのプロフィール見出しに出る文字

<p>Web エンジニア</p>

Web エンジニア段落に出る文字

</div>

);

}

export default function App() {

return (

<div>

<h1>あおいのプロフィール</h1>

見出しに出る文字

<p>Web エンジニア</p>

段落に出る文字

</div>

);

}

3 / 4

考えてみよう外しても進めます

React で表示している見出しの文字を変えたいとき、書きかえるのはどれですか。

選ぶと、この枚の中で答えと理由を確かめられます。

4 / 4

Reactとは

4枚

代表の印がないと表示されない

export default は「このファイルの代表はこれです」という印です。この印がないと、React はどの関数を表示すればよいか分かりません。

export default を書き忘れる

function App() {
  return <h1>あおいのプロフィールサイト</h1>;
}

export default を書いている

export default function App() {
  return <h1>あおいのプロフィールサイト</h1>;
}

React はファイル名だけを知っていて、中の関数の名前までは知りません。だから代表に印を付けます。

1 / 4

return した形だけが画面に出る

App 関数の中に console.log を書いても、画面には出ません。画面に出るのは return した形だけです。

console.log だけ書く

export default function App() {
  console.log("あおいのプロフィールサイト");
}

return で返す

export default function App() {
  return <h1>あおいのプロフィールサイト</h1>;
}

console.log の中身は開発者ツールのコンソールに出るだけで、プレビューには反映されません。

2 / 4

ここを書きかえると画面が変わる

演習で書きかえるのは、return のうしろにあるタグと文字だけです。

プレビュー

あおいのプロフィールサイト

export default function App() {

return <h1>あおいのプロフィールサイト</h1>;

h1タグの名前

あおいのプロフィールサイト画面に出る文字

}

export default function App() {

return <h1>あおいのプロフィールサイト</h1>;

タグの名前

画面に出る文字

}

3 / 4

考えてみよう外しても進めます

App.jsx から export default を消すと、画面はどうなりますか。

選ぶと、この枚の中で答えと理由を確かめられます。

4 / 4

最初の表示

4枚

JSXは文字列ではない

return のうしろに h1 のタグがそのまま書けます。クォートで囲むと、ただの文字列になってしまいます。

文字列として書くと

export default function App() {
  return "<h1>あおいのプロフィール</h1>";
}

JSXとして書くと

export default function App() {
  return <h1>あおいのプロフィール</h1>;
}

文字列は画面にそのまま表示され、要素にはなりません。

1 / 5

React入門：JSX・コンポーネント・props

JSXは関数呼び出しに変わる

書き方を切り替えて、ブラウザに渡る内容が同じか確かめてください。

書き方を切り替えても、ブラウザに渡るコードは同じ
変換を通さないままにすると、その場で止まる
画面に出る文字は、変換されたコードの中の文字列と同じもの

2 / 5

returnを丸かっこで囲む

見出しと段落のように2つ以上を返すときは、全体を丸かっこと1つのタグで包みます。

丸かっこが無いと

export default function App() {
  return
  <div>
    <h1>あおいのプロフィール</h1>
  </div>;
}

丸かっこで囲むと

export default function App() {
  return (
    <div>
      <h1>あおいのプロフィール</h1>
    </div>
  );
}

return とタグの間で改行するときは、必ず丸かっこで囲みます。

3 / 5

React入門：JSX・コンポーネント・props

閉じタグは自分で閉じる

HTML なら省略できた閉じタグも、JSX では自分で閉じます。

末尾をスラッシュと大なりで閉じます。閉じ忘れると画面が真っ白になります。

<img src="/works/recipe.png" alt="レシピ検索アプリ" />
<br />

4 / 5

考えてみよう外しても進めます

見出しと段落の2つを1つの App から返したいとき、正しいのはどれですか。

選ぶと、この枚の中で答えと理由を確かめられます。

5 / 5

JSX

5枚

この知識が出る資格

ここで学ぶ内容は、次の試験でも問われます

ITパスポート

IT全般の基礎知識を問う入門資格

70レッスン

基本情報技術者（FE）

アルゴリズムと擬似言語が中心

79レッスン

次に進むコース

Next.js

Reactアプリを、サーバー・検索・公開まで備えたサービスへ。

全3コース・58レッスン

すべてのコースを見る

Reactコース

UIを組み立て、実務的なSPAへ育てよう

React入門

state・フォーム・リスト

useEffect・コンポーネント設計

TypeScript・API

カスタムフック・状態管理

React Router・アプリ設計

つくるのと、直すのは違う力

React道場

フロントデバッグ道場

タスク管理アプリ

スライドで復習する

同じ表示、書くものが違う

命令的UIでは、手順を人がつなぐ

Reactでは、返す形を変える

あおいのプロフィール

React で表示している見出しの文字を変えたいとき、書きかえるのはどれですか。

代表の印がないと表示されない

return した形だけが画面に出る

ここを書きかえると画面が変わる

あおいのプロフィールサイト

App.jsx から export default を消すと、画面はどうなりますか。

JSXは文字列ではない

JSXは関数呼び出しに変わる

returnを丸かっこで囲む

閉じタグは自分で閉じる

見出しと段落の2つを1つの App から返したいとき、正しいのはどれですか。

この知識が出る資格

ITパスポート

基本情報技術者（FE）

人気のコース

エンジニアキャリアの歩き方

プログラミング学習のはじめ方

はじめての生成AI

AIへの指示の出し方：プロンプト入門

次に進むコース

Next.js