React - Quick Start

2026年7月6日 (月) 08:17時点におけるYoo (トーク | 投稿記録)による版 (Yoo がページ「Quick Start - React」を「React - Quick Start」に、リダイレクトを残さずに移動しました)

サクッと始めよう

ようこそ React の説明書へ!このページはあなたが React を使う時の日常的な考え方の80%ほどを紹介します。

あなたが学ぶこと

  • どうやって コンポーネント 達を作ったり、囲ったりするのか
  • どうやって マークアップ やスタイルを適応させるのか
  • どうやってデータを表示させるのか
  • どうやって条件分岐させたりリストを作成するのか
  • どうやってイベントに反応させたり表示内容を更新したりさせるのか
  • どうやってコンポーネント達にデータを共有させるのか

コンポーネント達を作ったり、囲ったりする

Reactアプリは複数のコンポーネントによって形作られていきます。1つ1つのコンポーネントは UI (ユーザに表示させる面) の断片であり、独自の仕組みや見た目を持っています。ボタンみたいに小さいコンポーネントもあれば、ページ全体を成すコンポーネントもあります。

React のコンポーネント達は JavaScript の機能であり、彼らはマークアップを生成します。<syntaxhighlight lang="react" line="1"> function MyButton() {

 return (
   <button>I'm a button</button>
 );

} </syntaxhighlight>