なぜReactなのか、最初のコンポーネントとJSX

Reactとは何かを知り、いちばん最初のコンポーネントを書いて、JSXの基本ルールを学びましょう。

8 分 · 3 問

React は JavaScriptのライブラリ、言い換えればすぐに使える便利なコードの道具箱で、ユーザーインターフェース を作るために生まれました。画面上で目にして操作するものすべて（ボタン、メニュー、フォームなど）です。このモジュールに必要な前提知識はJavaScriptの基礎（変数、関数、配列）だけです。なぜReactが大切なのかを理解するために、まずはReactを 使わずに ページを変更する方法を見てみましょう。

const el = document.getElementById("title");
el.textContent = "Hello!";
el.style.color = "green";

このやり方でも動きますが、ページが大きくなるとすぐに、すべての要素を探し出し、適切なタイミングで更新し、しかも一つも忘れないようにしなければなりません……。あっという間に手に負えなくなります。Reactは別の考え方を提案します。インターフェースを コンポーネント に分割するのです。コンポーネント とは、インターフェースの一部（ボタン、カード、メニュー）を記述するJavaScriptの関数です。レゴブロックのように組み立てて一つのページを作り上げ、画面を最新の状態に保つ仕事はReactが代わりにやってくれます。

import { createRoot } from "react-dom/client";

function Hello() {
  return <h1>Hello!</h1>;
}

const root = createRoot(document.getElementById("root"));
root.render(<Hello />);

Hello 関数はコンポーネントです。JavaScriptの中に直接書かれたHTMLのようなものを返しています。この構文は JSX と呼ばれます。覚えておくべき3つのルール。コンポーネントは たった一つの親要素 を返す。一部の属性は名前が変わる（class は className になる）。すべてのタグは閉じなければならない（たとえば <img />）。JSXには特別な力があります。波かっこ { } を使えば、どんなJavaScriptの値でも出力の中に差し込めるのです。

function Welcome() {
  const firstName = "Sarah";
  return <h2>Welcome, {firstName}!</h2>;
}

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. Reactとは何ですか？
   • JavaScriptに取って代わるプログラミング言語
   • ユーザーインターフェースを構築するためのJavaScriptライブラリ
   • ウェブサイトのモックアップを作る作図ツール
2. Reactにおいて、コンポーネントとは何ですか？
   • JSXを返すJavaScriptの関数
   • サイトのレイアウトを整えるCSSファイル
   • 訪問者を保存するデータベース
3. JSXの中で波かっこ { } は何のために使いますか？
   • HTMLのコメントを書くため
   • 自動的にループを作るため
   • JavaScriptの値を出力に差し込むため