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

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

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

Contents

1 JSXの基本
2 関数を利用したJSX記述
3 JSXは式
4 JSXでの属性指定
5 JXSはキャメルケースを利用
6 Reactでの使い方
7 React要素はイミュータブル

JSXの基本

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


const name = 'Sato Taro';
const element = <h1>Hello, {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>
);

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>;
}

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>;

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

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


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

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

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

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

Reactでの使い方

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


import REact from 'react'

import REact from 'react'

記述例


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

export default SampleButton;

const SampleButton =() =>{

return (

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);

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);

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とライフサイクル

Search Light（Python, React, Django, PHP, Linux）