React(JSX)

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

ReactにはHTMLのタグを直接JavaScriptに記述する仕組みがあります。これをJSXと呼んでいます。
JSXを使うことで複雑なタグの構造をシンプルに記述できるようになるのです。

コンパイル

ある言語で書かれているものを別の言語に置き換える

<script type="text/babel">

JSXで記述した値はそのまま仮想DOMのElementオブジェクトとして扱うことができるのでcreateElementしなくてもよくなります。

1

JSXを使わない場合

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

JSXを使う場合

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

2

document.createElementは一般的なDOM(Elementオブジェクト)を返しますが、React.createElementはReactElementという独自のDOMオブジェクトを返します。これはReactDOMと呼ばれる独自のVirtual DOMのオブジェクト

JSXを使わない場合

render:function(){
  return(
    React.createElement('p',{},'JSXを使わないサンプル')
　　);
}

‘p’ タグの指定

{} 属性情報

‘JSXを使わない’ コンテンツ

JSXを使う場合

var MyComponent = React.createClass({
      displayName:'my component',
      render:function(){
  return(
    <p>Reactのサンプルです</p>
　　);
}
});

ReactDOM.render(
  <MyComponent />,
document.getElementById('msg')

React.createClass→ReactというオブジェクトにあるcreateClassというメソッドを呼び出している。ここではコンポーネントのクラスを作成している。スクリプトの基本はコンポーネントを作成し、それを画面に表示する

render→コンポーネントを表示する要求があったときに生成するHTMLを指定する

Reactのサンプルです→実行時にBabelのコンパイルによって通常のJavaScr4ipt文に変換

<MyComponent/>→レンダリングする内容

document.getElementById(‘msg’)→レンダリングした結果を表示するDOMを指定。id=”msg”のタグにレンダリング結果を表示するようにしている

Reactオブジェクト

ReactオブジェクトはReactの基本となるオブジェクトでここに機能の中心となるメソッド類がまとめられている

createClass

作成するコンポーネントに必要な情報をオブジェクトとして引数に用意

displayName:コンポーネントに設定される名前。これは開発時にデバッグメッセージとして使われたりする

render:レンダリングされる内容を示す

変数elに<div>タグをそのまま値として代入している。
JSXにJavaScriptの値を埋め込む場合は{}の中に変数や値を記述することで埋め込むことができます。

タグの属性の値を埋め込む場合は{link}

  let el = (
    <div>
      <h2>JSX sample</h2>
      <p>{title}</p>
    </div>
  )

JSXは一つのエレメントを作成します。今回の場合<div>タグで囲ってあげないと<p>タグと<h2>タグの2つのエレメントを作成することになるためエラーとなります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>React</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
  <h1>React</h1>
  <div id="root">wait...</div>
  <script type="text/babel">
  let dom = document.querySelector('#root')

let title = "タイトル"

  let el = (
    <div>
      <h2>JSX sample</h2>
      <p>{title}</p>
    </div>
  )

  ReactDOM.render(el, dom)
  </script>
</body>

className

JSXでは<div class=” “>を<div className=” “>というように記述します。

スタイル設定

スタイル情報をオブジェクトとしてまとめて設定する

複雑な表示を作る

様々なタグを生成する関数（JSXをreturn）を用意し、必要に応じて呼び出せば複雑な表示を作れるようになります。

メッセージのエレメントを作成して返す処理です。

JSXは階層構造になっていないといけない。(並列で書けない)
React.Fragmentで囲むことで並列で書くことができる。

return(
  <React.Fragment>
    <p></p>
    <p></p>
  </React.Fragment>
)

let printMsg = function(msg, size, color){
  const style = {
    fontSize: size + "pt",
    fontWeight:'700',
    color: color,
    border: "1px solid " + color
  }
  return <p style={style}>{msg}</p>
}

<script type="text/babel">
let dom = document.querySelector('#root')

let title = "React page."
let message = "メッセージを表示します。"

const msg = {
  fontSize:"20pt",
  fontWeight: "bold",
  color:"red",
  border:"2px solid green"
}

let printMsg = function(msg, size, color){
  const style = {
    fontSize: size + "pt",
    fontWeight:'700',
    color: color,
    border: "1px solid " + color
  }
  return <p style={style}>{msg}</p>
}

let el = (
  <div>
    <h4>{title}</h4>
    <h6>{message}</h6>
    <div className="alert alert-secondary mt-3">
      {printMsg('最初のメッセージ', 36, '#fff')}
      {printMsg('次のメッセージです.', 24, '#aaa')}
      {printMsg('最後のメッセージでした.', 12, '#666')}
    </div>
  </div>
)

ReactDOM.render(el, dom)
</script>

条件による表示

真偽値がtrueならば&&の後のJSXが表示され、falseならば表示されなくなる。

<script type="text/babel">
let dom = document.querySelector('#root')

let title = "React page."
let message = "メッセージを表示します。"
let content = `※これが、trueのときに表示されるメッセージです。
    ちゃんと表示されていますか？`

let flg = true; // ☆

let el = (
  <div>
    <h4>{title}</h4>
    <h6>{message}</h6>
  {flg && 
    <div className="alert alert-primary mt-3">
      <p>{content}</p>
    </div>
  }
  </div>
)

ReactDOM.render(el, dom)
</script>