Posted in React

[React] JSXの導入–JSXの特性と記述方法について

   Published Date: 2023年12月5日

ReactではJSXというJavaScriptの拡張構文を使ったほうが便利です。
公式ページでもReactとJSXを使うことを推奨しています。
JSXはテンプレート言語ではなく、JavaScriptの機能をすべて備えています。

JSXはReact要素を生成します。そしてReact要素をDOMに変換して利用するという流れになります。

JSXの基本

JSXの最も基本的な書き方です。
nameという変数を宣言し、文字列を代入。
それをH1タグの中に展開。

const name = 'Sato Taro';
const element = <h1>Hello, {name}</h1>;

JSXの基本として、有効なJavaScriptの式を中括弧{}で囲みます。

関数を利用したJSX記述

もう少し、関数っぽい記述になると、
まず、functionで姓と名をつなげる関数を作ります。
userという変数を宣言し、その中にfirstNameとLastNameを宣言し、文字列を代入します。

userの中からfirstNameとLastNameを取り出して、function formatName(user)で連結。
それをH1タグに表示させます。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Taro',
  lastName: 'Sato'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

const elementの部分では複数行記述のため、();で囲んでいます。

JSXは式

コンパイルされた後、JSXの式はJavaScriptの関数呼び出しに変換されてJavaScriptオブジェクトに評価されます。
JSXはif文やfor文の中で利用、変数に代入、引数として利用、関数から返すなどで利用できます。

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSXでの属性指定

通常のHTMLと同じように引用符を利用できます。

const element = <a href="https://www.example.com"> link </a>;

属性にJavaScriptを埋め込みたい場合は中括弧を利用します。

const element = <img src={user.Url}></img>;

JXSはキャメルケースを利用

JSXはHTMLよりJavaScriptに近い性質を持っています。ReactのDomはキャメルケースの命名規則を利用します。
classname →　className
indexpage → indexPage

Reactでの使い方

Reactライブラリをインポートします。

import REact from 'react'

記述例

const SampleButton =() =>{
    return (
    <button className {'btn-red'}>
    Sample
    </button>
    )
}

export default SampleButton;

React要素はイミュータブル

Reactの要素はイミュータブルオブジェクトで、オブジェクトを作成した後にその子要素や属性を変更できません。

ミュータブルオブジェクト→オブジェクト作成後に状態を変更できる
イミュターブルオブジェクト→オブジェクト作成後に状態を変更できない

ReactでどのようにUIを変更するかというと、root.render()に変更したい新しい要素を渡します。

下記のHTMLファイルを作成します。
divのidはrootとします。

<div id="root"></div>

root.renderによる変更

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

・まずReactDom.creatRootにDom要素を渡す
・elementを定義する
・root.renderにelementを渡す

公式ページの参考例で秒刻みで動く時計があります。

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>Time: {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

setInterval()でroot.render()を毎秒呼び出しています。が、しかし、Reactのアプリケーションはroot.render()を一度しか呼び出せないそうです。
そのため、state付きのコンポーネントにカプセル化する必要があります。

stateについては以下の公式ページに記載してあります。
https://ja.legacy.reactjs.org/docs/state-and-lifecycle.htm

（参考）
React公式ページ　要素のレンダー
React公式ページ–JSX の導入
React公式ページ stateとライフサイクル



Author: webmaster