今日やったこと

• 「モダンJavaScriptの基本から始める React実践の教科書」 P94〜99
  • 4-2 JSX 記法

学習メモ

• Reactでは <App /> のように関数名をHTMLのようにタグで囲むことによってコンポーネントとして扱うことができる

• SPAの場合、HTMLファイルは1つのみなので「HTMLのここにコンポーネントをレンダリングする！」というように指定してあげる

index.js

import ReactDOM from "react-dom";

const App = () => {
    return <h1>こんにちは！</h1>
	);
}

ReactDOM.render(<App />, document.getElementById("root"));

index.html

（…省略）
<div id="root"></div>
（…省略）

実行結果

JSXのルール

• return 以降が複数行になる場合は () で囲う
• return 以降は1つのタグで囲われている必要がある

1つのタグで囲わないと、以下のようなエラーになる

対処法は以下の２つ

1. <div>で囲む

import ReactDOM from "react-dom";

const App = () => {
    return (
        <div>
            <h1>こんにちは！</h1>
            <p>お元気ですか？</p>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

2. React に用意されている Fragment というものを使用する。二通りの書き方がある

Fragmentの場合

import ReactDOM from "react-dom";
import { Fragment } from "react";

const App = () => {
    return (
        <Fragment>
            <h1>こんにちは！</h1>
            <p>お元気ですか？</p>
        </Fragment>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

省略記法（空タグ）の場合

import ReactDOM from "react-dom";

const App = () => {
    return (
        <>
            <h1>こんにちは！</h1>
            <p>お元気ですか？</p>
        </>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

Fragmentを利用すると、不要なDOMが生成されないので、エラーを回避するためだけに外側を囲みたい場合などに有効な手段となる

所感

今日は勉強する時間があまりとれませんでした。
今のペースだと終わらなそうなので、学習する日を増やします。