サクッと始めよう

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

あなたが学ぶこと。

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

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

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

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

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

} </syntaxhighlight>今、あなたは MyButton を作ったので、これを別のコンポーネントの中に入れてみましょう。<syntaxhighlight lang="react" line="1">export default function MyApp() {

 return (

Welcome to my app

     <MyButton />

);

}</syntaxhighlight><MyButton /> が大文字で始まっていることに気付くでしょうか。これによって、あなたはこれが React のコンポーネントだと知ることができます。React のコンポーネントは必ず大文字で始めて下さい。一方で、HTMLタグは全て小文字です。

さて、結果を見てみましょう。

    style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
    title="react.dev"
    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
  ></iframe>

上記のように export default と書くことによって、ファイルのメインとなるコンポーネントを決めることができます。もしあなたが JavaScript の書き方に慣れてないなら、MDN と javascript.info は最高の情報源ですので参照して下さい。

JSX を使ってマークアップを書こう

上の例であなたが見たマークアップの書き方は「JSX」と呼ばれます。JSX を利用するかどうかは自由ですが、便利なのでほとんどの Reactプロジェクトで利用されます。私たちがオススメする全ての開発ツールで JSX はサポートされています。

JSX は HTML より厳格です。あなたはきちんと <br /> のようにタグを閉じる必要があります。しかも、あなたが作るコンポーネントは複数の JSXタグを同時に生成できません。複数の JSXタグがある場合は、それらを共通の親タグ、<div>...</div> や、空文字の <>...</> で包んであげる必要があります。<syntaxhighlight lang="react" line="1"> function AboutPage() {

 return (
   <>

About

Hello there.
How do you do?

   </>
 );

} </syntaxhighlight>もしも JSX に変換したい大量の HTML があるならネット上にある変換機を使って下さい。

スタイルを適応する

React では CSS クラスを指定する時は className を使います。これは HTML の class 属性と同じように機能します。<syntaxhighlight lang="react" line="1"> <img className="avatar" /> </syntaxhighlight>適応させたい CSSルールは別の CSSファイルに書いて下さい。<syntaxhighlight lang="react" line="1"> /* In your CSS */ .avatar {

 border-radius: 50%;

} </syntaxhighlight>React はあなたに CSSファイルの追加方法を特に指定していません。恐らく、もっとも簡単なのは自分の HTML に <link> で組み込む方法でしょう。制作ツールやフレームワークを使っている場合は、それらの説明書を読んで CSSファイルを自分のプロジェクトに追加する方法を確認して下さい。

Displaying data

JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display user.name:

React - Quick Start

目次