React - Quick Start

{{#isin:React}}

サクッと始めよう。

ようこそ 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タグは全て小文字ですが。

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

<iframe src="https://codesandbox.io/embed/vs9srv?view=editor+%2B+preview&hidenavigation=1"

    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>