C
React 一覧
前へ1 / 22次へ
React/はじめに/Lesson 01

Reactの紹介

30分·theory
このチャプター
1/2
JavaScript

Reactの紹介

💡 なぜReactを学ぶべきなのか？

🎯 フロントエンドの求人の80%がReactを要求 — 国内シェアNo.1フレームワーク
💼 コンポーネントの再利用により、通常のHTMLと比べて開発速度が3〜5倍向上
⚡ Naver、Kakao、Toss、Karrot MarketはすべてReactを採用
🔗 Reactを一度習得すれば、React Nativeでモバイルアプリ開発も可能
🏢 실무에서는
Tossアプリの送金画面やKarrot MarketのチャットUIは、いずれもReactで構築されています

Reactとは何か？ — レゴブロックのたとえ

ReactはUIをコンポーネント（部品）で構築するJavaScriptライブラリです。

通常のHTMLではこのように書きます：

html
<!-- ボタンを100か所で使うには100回コピペする必要がある -->
<button class="btn">いいね 👍</button>
<button class="btn">いいね 👍</button>
...

Reactではこのように書きます：

jsx
// ボタンコンポーネントを一度だけ定義して
function LikeButton() {
  return <button>いいね 👍</button>;
}

// どこでも再利用できる
<LikeButton />
<LikeButton />
<LikeButton />

> 💡 レゴブロックのように、一度作ったものを組み合わせていくイメージです。

Reactを始めよう — Viteで5分セットアップ

① Node.jsをインストール（まだの場合）：nodejs.org → LTSバージョンをダウンロード

② プロジェクトを作成（ターミナルで）：

code
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

③ ブラウザで http://localhost:5173 を開く

> 💡 Reactのロゴがくるくる回る画面が表示されれば成功です！

💻 はじめてのReactコンポーネント 
// コンポーネント = 関数 (大文字で開始！)
function Greeting() {
  return (
    <div>
      <h1>こんにちは！ 👋</h1>
      <p>私の最初のReactコンポーネントです。</p>
    </div>
  );
}

// Appコンポーネントで使用
export default function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
      <Greeting />
    </div>
  );
}

⚛️ Reactパターン — Reactの紹介

Reactの紹介をReactでどのように使うか、コードを交えながらステップごとに学びましょう。
1 🧩 1. Reactの紹介が必要なシナリオ
この機能が必要となる状況。
↓
2 💻 2. コードを書く
Reactの紹介の基本的な使い方。
↓
3 🎨 3. レンダリング結果
ユーザーが見る画面。
↓
4 💡 4. 実践的なヒント
よくある落とし穴とベストプラクティス。

🎮 Reactの紹介 — ステップバイステップ

各ステップをクリックして内容を読み、✓ 理解できた ボタンで進捗を確認しましょう。
🖥️ 実行結果 — レンダリングされたReactコンポーネント
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — まず結果を確認し、エディタで自由に編集できます。

理解度チェック

Reactでは、コンポーネント名はどの文字で始める必要がありますか？
💡 Reactコンポーネントは必ず大文字で始める必要があります。小文字で始めると、ReactはそれをHTMLタグとして認識してしまい、コンポーネントが正しく動作しません。
先に読むとよい概念: エラー処理の深化 — Result<T, E> パターン
次のおすすめ: JSX 構文
前へ一覧次へ
Reactの紹介 - React