新・日本一わかりやすいReact入門【基礎編】をまとめてみる#02

はじめに

この記事ではYoutubeチャンネル【とらゼミ】トラハックのエンジニア学習講座にて投稿されている「新・日本一わかりやすいReact入門【基礎編】」をまとめることで自分のReactへの理解を復習し、より理解を深めていきたいと思う。

前回の内容: Reactの基礎知識

02 JSXの記法

ここではReactが扱う概念「コンポーネント」を表現するための記法「JSX」が説明される。

前回のおさらい:
コンポーネント = UI(見た目) + 機能(動画を再生、停止させるなど)

JSXとは

どんな記法なのかということで、以下の例が挙げられていた。

const BlueButton = () => {
    return (
        <button className={'btn-blue'}>
            Click me!
        </button>
    );
}

JSXの説明:

• JSXはjavascriptの拡張言語
  HTMLライクな記述 + javascriptの構文が使える
  ちなみにReact公式ページにはこう書かれている

  const element = <h1>Hello, world!</h1>;
  これは JSX と呼ばれる JavaScript の構文の拡張です

• 最終的にReact要素を生成する

React要素を生成するとは

Reactにはコンポーネント(component)という概念があり要素と訳せないでもない。
だからReact要素を生成するとはReact Componentを生成することだと最初は思った。

しかし、Reactの公式ページを見るとこのようにある。

コンポーネントは JavaScript の関数と似ています。（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。

そしてコンポーネントの例が記載されている。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

これはJSXの記法の例で挙げられていたコードの構成と同じ。
つまり、変数「BlueButton」はコンポーネントだったということ。

const BlueButton = () => {
    return (
        <button className={'btn-blue'}>
            Click me!
        </button>
    );
}

JSXの説明として「React要素を生成する」とあったが、
正確には「コンポーネントはReact要素を生成する」 ということ。

では結局React要素とはなにかというと公式ページにはこうある

(日本語) 要素とは React アプリケーションの最小単位の構成ブロックです。
(English) An element describes what you want to see on the screen.

React要素とはReact ElementでありReact Componentではなかった。
また、例が挙げられている。

const element = <h1>Hello, world</h1>;

つまり、関係性はこんな感じのよう。

             React App
                 |
        -----------------
        |               |
     React要素        React要素
        ↑(生成)          ↑(生成)
     コンポーネント      コンポーネント

なぜJSXを使うのか

「HTMLライクに書けて楽」と理解しておけばいい。

使わない場合

React.createElement(
    'button',
    {className: 'btn-blue'},
    'Click me!'
)

使った場合

    <button className={'btn-blue'}>
        Click me!
    </button>

JSXは何をしているか

コンパイル時にJSXを使った記法はJSXを使わない記法に変換される。

人間はわかりやすい書き方で、機械にとってわかりやすいようにするのはコンパイラのお仕事。

JSXの基本構文 & JSXの特殊構文

import React from 'react';

const BlueButton = () => {
    const yourMessage = "Click me!";
    return (
        <button className={'btn-blue'}>
            {yourMessage}
        </button>
    );
}
export default BlueButton;

注意点:

• Reactをimportすること
  • でなければ使えない
• 変数を埋め込む場合は{}で囲む
  • 囲まなければyourMessageとそのまま表示されることになる
• HTMLの場合と違い、cssを記述する場合はclass=...ではなくclassName=...の形式
• HTMLの場合と違い、変数はcamelCaseで
• HTMLの場合と違い、imgタグのようなタグでも閉じタグが必要

参考資料

Reactのコンポーネント周りの用語を整理する