以前Reactでのプロジェクトの作成方法を説明いたしましたが、本日はJSXというReactの機能ではありませんが、Reactが推奨している拡張構文です。
では早速説明していきます。
以前作成したReactのプロジェクトを元に説明していくので、まだの方は以下を参考にしてプロジェクトを作成して下さい。
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>となっています。
7行目以降で先ほどの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;
こちらでは5行目でitemsというJSON配列を作成し、{items.map((value) =>(・・・))}こちらはitemsの中身を順番に取り出していくメソッドです。
以下のようなテーブルが作成されたと思います。このように簡単にテーブルを作成することができます。
nabe 出身:日本
nguyen 出身:ベトナム
sara 出身:アメリカ
まとめ
いかがでしたでしょうか?
JSXでは簡単にHTMLを書き換えることができるので便利なので、是非使って下さい。
コメント