【React入門】JSX

以前Reactでのプロジェクトの作成方法を説明いたしましたが、本日はJSXというReactの機能ではありませんが、Reactが推奨している拡張構文です。

では早速説明していきます。

以前作成したReactのプロジェクトを元に説明していくので、まだの方は以下を参考にしてプロジェクトを作成して下さい。

JSX
実践
まとめ

JSX

例を見ながら学習していきましょう。

<!--sample.html-->
<div id="root"></div>

//sample.js
function Welcome(props) {
  return <h1>こんにちは！{props.name}さん</h1>;
}

const element = <Welcome name="nabelog" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

まずは2〜4行目ですが、こちらはh1タグを返しています。その中の{props.name}がJSXの構文です。
このようにHTML内の値をJavaScriptで変更することができます。

6行目で先ほどのwelcome関数を引数nameを渡して呼び出して、elementに格納しています。
中身は{}内が置き換えられ、<h1>こんにちは！nabelogさん</h1>となっています。

７行目以降で先ほどのelementをsample.htmlのrootというidのタグにレンダーしています。

実践

ではサンプルを作成したので、こちらの記事で作成したプロジェクトのApp.jsを以下のように変更してみて下さい。

import React from 'react';
import './App.css';

function App() {
  let items =[
    {"name": "nabe", "Country": "日本"},
    {"name": "nguyen", "Country": "ベトナム"},
    {"name": "sara", "Country": "アメリカ"}  
  ]

  return (
    <div className="App">
      <table>
        <tbody>
          {items.map((value) =>(
            <tr>
              <th scope="row">
                {value.name}
              </th>
              <td>
                出身：{value.Country}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default App;

こちらでは５行目でitemsというJSON配列を作成し、{items.map((value) =>(・・・))}こちらはitemsの中身を順番に取り出していくメソッドです。

以下のようなテーブルが作成されたと思います。このように簡単にテーブルを作成することができます。

nabe　　出身：日本
nguyen　出身：ベトナム
sara　　出身：アメリカ