クイックスタート

React ドキュメントへようこそ！このページでは、日常的に使用する React の概念の 80% を紹介します。

コンポーネントの作成とネスト

React アプリはコンポーネントで構成されています。コンポーネントとは、独自のロジックと外観を持つ UI（ユーザーインターフェース）の一部です。コンポーネントはボタンのように小さなものから、ページ全体のように大きなものまであります。

React コンポーネントは、マークアップを返す JavaScript 関数です：

これでMyButtonを宣言したので、別のコンポーネントにネストできます：

<MyButton />が大文字で始まっていることに注目してください。これが React コンポーネントであることを示す方法です。React コンポーネント名は常に大文字で始める必要があり、HTML タグは小文字でなければなりません。

結果を見てみましょう：

export defaultキーワードは、ファイル内のメインコンポーネントを指定します。JavaScript 構文に慣れていない場合は、MDNとjavascript.infoに優れたリファレンスがあります。

JSX でのマークアップ記述

上記で見たマークアップ構文はJSXと呼ばれます。これはオプションですが、利便性からほとんどの React プロジェクトで JSX が使用されています。ローカル開発に推奨するツールはすべて、JSX をすぐにサポートしています。

JSX は HTML よりも厳格です。<br />のようなタグを閉じる必要があります。また、コンポーネントは複数の JSX タグを返すことができません。<div>...</div>や空の<>...</>ラッパーのような共通の親要素でラップする必要があります：

大量の HTML を JSX に移植する必要がある場合は、を使用できます。オンラインコンバーター

スタイルの追加

React では、CSS クラスをclassNameで指定します。これは HTML のclass属性と同じように機能します：

次に、別の CSS ファイルでそのための CSS ルールを記述します：

React は CSS ファイルの追加方法を規定していません。最も単純なケースでは、HTML に<link>タグを追加します。ビルドツールやフレームワークを使用している場合は、そのドキュメントを参照してプロジェクトに CSS ファイルを追加する方法を確認してください。

データの表示

JSX を使用すると、マークアップを JavaScript 内に記述できます。中括弧を使用すると、JavaScript に「エスケープバック」してコード内の変数を埋め込み、ユーザーに表示できます。例えば、これはuser.nameを表示します：

JSX 属性からも JavaScript に「エスケープ」できますが、引用符の代わりに中括弧を使用する必要があります。例えば、className="avatar"は"avatar"文字列を CSS

JSXの中括弧内には、より複雑な式を入れることもできます。例えば、文字列連結などです：

上記の例では、style={{}}は特別な構文ではなく、{}の中にある通常のオブジェクトです。スタイルがJavaScriptの変数に依存する場合は、style={ } JSXの中括弧内でstyle属性を使用できます。

条件付きレンダリング

Reactでは、条件を記述するための特別な構文はありません。代わりに、通常のJavaScriptコードを書くときと同じテクニックを使用します。例えば、if文を使用してJSXを条件付きで含めることができます：

より簡潔なコードを好む場合は、条件（三項）演算子を使用できます。ifとは異なり、これはJSX内で動作します：

elseelse分岐が必要ない場合は、より短い論理&&構文も使用できます：

これらのアプローチはすべて、属性を条件付きで指定する場合にも有効です。これらのJavaScript構文に慣れていない場合は、最初は常にif...elseを使用することから始めても構いません。

リストのレンダリング

コンポーネントのリストをレンダリングするには、forループや配列のmap()関数などのJavaScript機能に依存します。

例えば、商品の配列があるとします：

コンポーネント内で、map()関数を使用して、商品の配列を<li>アイテムの配列に変換します：

にはkey属性があることに注意してください

イベントへの応答

コンポーネント内でイベントハンドラー関数を宣言することで、イベントに応答できます：

イベントハンドラー関数を呼び出さないでください：単に渡すだけです。ユーザーがボタンをクリックすると、Reactがイベントハンドラーを呼び出します。

画面の更新

多くの場合、コンポーネントに何らかの情報を「記憶」させて表示したいと思うでしょう。例えば、ボタンがクリックされた回数を数えたい場合があります。これを行うには、コンポーネントにstateを追加します。

importuseStatefrom React:

これで、コンポーネント内にstate変数を宣言できるようになりました：

からは2つのものが得られます：現在の状態（count）と、それを更新する関数（setCount）です。任意の名前を付けることができますが、慣例として[something, setSomething]と書きます。

ボタンが初めて表示されるとき、countは0になります。なぜなら、0をuseState()に渡したからです。状態を変更したいときは、setCount()を呼び出し、新しい値を渡します。このボタンをクリックするとカウンターが増加します：

Reactはコンポーネント関数を再度呼び出します。このとき、countは1になります。次に2になります。以降も同様です。

同じコンポーネントを複数回レンダリングすると、それぞれが独自の状態を持ちます。各ボタンを個別にクリックしてみてください：

各ボタンが独自のcount状態を「記憶」し、他のボタンに影響を与えないことに注目してください。

フックの使用

で始まる関数はフックと呼ばれます。useState他の組み込みフックはAPIリファレンスで確認できます。既存のフックを組み合わせて独自のフックを書くこともできます。

フックは他の関数よりも制限が厳しいです。フックはコンポーネント（または他のフック）のトップレベルでのみ呼び出すことができます。条件文やループ内でuseStateを使用したい場合は、新しいコンポーネントを抽出してそこに配置してください。

コンポーネント間でのデータ共有

前の例では、各MyButtonは独立したcountを持ち、各ボタンがクリックされると、クリックされたボタンのcountのみが変化しました：

最初は、各MyButtonのcount状態は0です。

最初のMyButtonはそのcountを1に更新します。

しかし、多くの場合、コンポーネントがデータを共有し、常に一緒に更新される必要があります。

両方のMyButtonコンポーネントが同じcountを表示し、一緒に更新されるようにするには、状態を個々のボタンから、それらすべてを含む最も近いコンポーネントへ「上方」に移動する必要があります。

この例では、それはMyAppです：

最初、MyAppのcount状態は0であり、両方の子コンポーネントに渡されます。

クリックすると、MyAppはそのcount状態を1に更新し、両方の子コンポーネントに渡します。

これで、どちらのボタンをクリックしても、MyApp内のcountが変化し、それがMyButton内の両方のカウントを変化させます。これをコードで表現する方法は以下の通りです。

まず、状態を上に移動させます。MyButtonからMyAppへ：

次に、状態を下に渡します。MyAppから各MyButtonへ、共有のクリックハンドラーと一緒に渡します。MyButtonに情報を渡すには、JSXの中括弧を使用します。これは以前に<img>のような組み込みタグで行ったのと同じです：

このように渡される情報はpropsと呼ばれます。これで、MyAppコンポーネントはcount状態とhandleClickイベントハンドラーを含み、両方をpropsとして各ボタンに渡します。

最後に、MyButtonを変更して、親コンポーネントから渡されたpropsを読み取るようにします：

ボタンをクリックすると、onClickハンドラーが発火します。各ボタンのonClickpropは、MyApp内のhandleClick関数に設定されているため、その中のコードが実行されます。そのコードはsetCount(count + 1)を呼び出し、count状態変数を増加させます。新しいcount値は各ボタンにpropとして渡されるため、すべてのボタンが新しい値を表示します。これは「状態のリフトアップ」と呼ばれます。状態を上に移動することで、コンポーネント間で状態を共有したことになります。

次のステップ

これで、Reactコードを書くための基本を理解しました！

これらの知識を実践に移し、Reactで最初のミニアプリを構築するには、チュートリアルをチェックしてください。