<CodeLearn/>

React入門

初級

コンポーネントベースのUIライブラリで、モダンなWebアプリを構築しよう

全10レッスン

1

JSXの基本

HTMLに似たJavaScriptの構文

→2

コンポーネント

UIの部品を作って組み合わせる

→3

Props

コンポーネントにデータを渡す

→4

State（useState）

コンポーネントの状態管理

→5

Hooks入門

useState、useEffect、カスタムHook

→6

useEffect

副作用の処理（API呼び出し等）

→7

イベント処理

クリック、入力、フォーム送信

→8

リスト表示とKey

配列データの繰り返し描画

→9

ルーティング

ページ遷移の仕組み

→10

React総合演習

天気予報アプリを作ろう

→

Reactとは？

Reactは、Meta（旧Facebook）が開発した JavaScriptのUIライブラリです。「コンポーネント」という小さな部品を組み合わせて、 複雑なユーザーインターフェースを効率的に構築できます。

仮想DOM（Virtual DOM）という仕組みにより、必要な部分だけを効率的に更新するため、 高速でスムーズなUIを実現できます。現在、世界中の多くのWebアプリケーションで採用されています。

⚡

コンポーネント指向

UIを再利用可能な部品に分割して開発

🔄

宣言的UI

状態に応じてUIが自動的に更新される

🌐

巨大なエコシステム

Next.js、React Nativeなど豊富な周辺ツール

Reactの基本概念

Reactを学ぶ前に、主要な概念を押さえましょう。

  • JSX — HTMLに似た構文でUIを記述する
  • コンポーネント — UIの再利用可能な部品
  • Props — 親から子へデータを渡す仕組み
  • State — コンポーネント内部の状態管理
  • Hooks — 関数コンポーネントで状態や副作用を扱う仕組み

最初のReactコード

Reactでは、関数がUIの部品（コンポーネント）になります。以下は最もシンプルなReactコンポーネントです。

function App() {
  return (
    <div>
      <h1>こんにちは、React！</h1>
      <p>はじめてのReactアプリです。</p>
    </div>
  );
}

export default App;

各レッスンで、この基本構造の上にさまざまな機能を積み上げていきます。