Reactで学んだことまとめ【JSX記法】【Props】【State】

今回もReactを学んでいて、覚えたことをアウトプットしたいと思います。

JSX記法

Reactでは、JavaScriptの中にHTMLを書いていきます。これがJSX記法と呼ばれるもの。

そのJSX記法のルールとして、複数のHTML要素を書くためには、それを<React.Fragment>というタグで囲わなければならないというルールがあります。

import React from "react";

export default function App() {
  return (
    <React.Fragment>
      <h1>タイトル</h1>
      <p>本文の内容が入ります</p>
    </React.Fragment>
  );
}

// 下記のコードだとエラーになる
export default function App() {
  return (
    <h1>タイトル</h1>
    <p>本文の内容が入ります</p>
  );
}

また、この<React.Fragment>は、<>と書いて省略することができます。

import React from "react";

export default function App() {
  return (
    <>
      <h1>タイトル</h1>
      <p>本文の内容が入ります</p>
    </>
  );
}

拡張子を.jsxにする

コンポーネントを使用している場合は、ファイルの拡張子を.jsから.jsxにする必要があります（.jsxにしなくてもエラーにはならない）

コンポーネントとは、画面要素の１単位のようなもの。

また、Reactのコンポーネントはパスカルケースで命名するというルールもあります。

Props

Propsはコンポーネントに渡す引数のようなもの。

State

Stateは各コンポーネントが持つ状態。

再レンダリング

再レンダリングは、

・propsの中身が変わった時
・stateを更新した時

に行われる。

これによって、例えばボタンをクリックした時にpropsの中身が変わったり、stateが更新されたりすると再レンダリングされて、差分だけを画面に反映させるということができる。


以上、簡単ですが覚えたことをまとめました。