Reactの記法や概念について

目的

Reactで用いられる記法（useStateやProps）、概念（コンポーネントなど）について学ぶ。

JSX記法

JavaScriptファイルの中でHTMLのタグが書けるというもの。
重要なルールの1つとしてreturn以降は1つのタグで囲われている必要があるというものがあります。
例えば
index.js

import ReactDOM from "react-dom";

const App = () => {
  return (
      <h1>おはよう</h1>
      <p>こんにちは</p>
   );
};

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

とした場合、returnの中に2つのタグがあるためエラーを出してしまいます。
なので、以下のようにするとエラーを出さなくなります。
index.js

import ReactDOM from "react-dom";

const App = () => {
  return (
    <div>  //<div>タグで一番外側を囲む
      <h1>おはよう</h1>
      <p>こんにちは</p>
   </div>
   );
};

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

その他には

<Fragment>  //<Fragment>タグで囲む
   <h1>おはよう</h1>
   <p>こんにちは</p>
</Fragment>

<>  //<>タグで囲む
   <h1>おはよう</h1>
   <p>こんにちは</p>
</>

などがあります。
尚、Fragmentタグを用いる際は

import { Fragment } from "react";

というようにimportする必要があります。

コンポーネントについて

Reactの開発では画面の要素を様々な粒度のコンポーネントに分割することで再利用性や保守性を高めるのが基本となります。（1つのファイルに全て書かず小分けにしていく）
これを理解していくために例えば次のようなフォルダを用意します。

ここでは新たにmy-app/src/App.jsxを追加したところです。
App.jsx にこのように記述します。

const App = () => {
  return(
      <> //先程説明した空タグを用いてます
          <h1>おはよう</h1>
          <p>こんにちは<p>
     </>
   );
};

この関数コンポーネントを他のファイルでも使えるようにするためにはexportする必要があります。

export const App = () => {
  return(
      <> //先程説明した空タグを用いてます
          <h1>おはよう</h1>
          <p>こんにちは<p>
     </>
   );
};

これで他のファイルでも使えるようになりました。他のファイルで使用する際にはimportする必要があります。
index.js（jsx記法の説明で用いたファイル）

import ReactDOM from "react-dom";
import { App } from "./App";    //追加

//ここから
const App = () => {
  return(
      <> //先程説明した空タグを用いてます
          <h1>おはよう</h1>
          <p>こんにちは<p>
     </>
   );
};
//ここまで削除（App.jsに切り出したので）

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

これでコンポーネント化ができました。

イベントやスタイルについて

例としてボタンを押した時のイベントonClickについては以下のように行います。

export const App = () => {
  const onClickButton = () => {
          alert();
  };

 return (
   <>
      <h1>おはよう</h1>
      <p>こんにちは</p>
      <button onClick={onClickButton}>ボタン</button>
   </>
 );
};

尚、returnの中でJavaScriptで定義した関数を使う時は{}で囲むようにします。

次にスタイル（CSS）のあてかたについてです。
Reactでは各タグにstyle属性を記述することでスタイルを適用できます。ここで注意点ですがCSSの各要素はJavaScriptのオブジェクトとして記述します。
例として文字の色を黄色に変更したい場合は以下のようになります。

export const App = () => {
  //省略
  return (
     <>
         <h1 style={{color: "yellow"}}>おはよう</h1>
         <p>こんにちは</p>
    </>
  );
};

JavaScriptを書くので、style={}としており{}の中でCSSを書くのでさらに{}が入り、結果としてstyle={{}}となります。
先程述べたようにCSSの各要素はJavaScriptのオブジェクトとして記述するのでyellowではなく"yellow"と記述します。
またタグ内で定義するのではなく事前に定義して変数にいれたものを使うこともできます。

export const App = () => {
  //省略

 //CSSオブジェクトを定義
 const contentStyle = {
   color: "green",
   fontSize: "30px",
 };

 return (
    <>
      <h1 style={{color: "yellow"}}>おはよう</h1>
      <p style={contentStyle}>こんにちは</p>  //style={変数名}
   </>
 );
};

Propsについて

Propsとはコンポーネントに渡す引数のようなもので、コンポーネントは受け取ったPropsに応じて表示するスタイルや内容を変化させます。
以下で例を見ていきます。
まずはmy-app/src/components/ColoredMessage.jsxというコンポーネントファイルを作成します。
ColoredMessage.jsx（これがApp.jsxからProps（中身は色とテキスト）を受け取って色付きの文字を返すコンポーネント）

//引数であるpropsの中にApp.jsxから送られてきたcolorとmessageが入っている
export const ColoredMessage = (props) => {
    const contentStyle = {
         color: props.color,
         fontSize: "20px",
    };

   return <p style={contentStyle}>{props.message}</p>;
};

App.jsx

import { ColoredMessage } from "./components/ColoredMessage";

export const App = () => {
   const onClickButton = () => {
       alert();
   };

  return (
     <>
         <ColoredMessage color="yellow" message="おはよう" />  //ここでpropsとして情報を渡しています
         <ColoredMessage color="red" message="こんにちは" />
     </>
   );
};

これで一つのコンポーネント（ここではColoredMessage）を複数使いページを表示することができます。

そしてもう一つPropsを使う上で用いるのがchildrenというものです。
実際にchildrenを用いて先程のコードを確認すると以下となります。
App.jsx

<ColoredMessage color="yellow" message="おはよう" /> //変更前
<ColoredMessage color="yellow">おはよう</ColoredMessage> //変更後

このようにタグで囲むことでmessageがchildrenとして渡されるようになりました。渡される方のColoredMessage.jsxは以下のように変更します。

省略

return <p style={contentStyle}>{props.message}</p>; //変更前
return <p style={contentStyle}>{props.children}</p>; //変更後

今はchildrenのメリットがわかりづらいですが、今後複雑なコンポーネントを組む際に便利となるようです。

State(useState)

Stateとはコンポーネントの状態を表す値です。
状態とは例えばボタンを押す、エラーがあるorない、モーダルが開いているor開いていないなどがあります。
これらをStateを用いて管理します。
「状態を表す」とは言い換えれば「変数をもつ」でありコンポーネントの中でイベント実行時などに更新処理を行うことで動的なアプリケーションを表現します。

今回はReact Hooksと呼ばれる機能の中のuseStateを用いてStateを考えます。
使用するにはまずuseStateをimportする必要があります。

import { useState } from "react";

useStateの書式は以下のようになります。

const [ num, setNum ] = useState();

配列の中で1つ目にState変数（状態を持つ変数）を、2つ目にそれを更新するための関数を設定します。
useStateは関数なので用いる際は()をつけます。State変数に初期値を置きたい時はこの()内に設定します。
例えばボタンを押下時にカウントアップする機能を実装する場合は以下のようにできます。

import { useState } from "react";

export const App = () => {
  const [ num, setNum ] = useState(0); //初期値に0を置いています

  const onClickButton = () => {
       setNum(num + 1);
  };

  return (
     <>
         <button onClick={onClickButton}>ボタン</button>
         <p>{num}</p>  //ここで変数を表示します
     </>
  );
};

これで以下のような初期状態のボタンができました。

「ボタン」を押下すると変数に+1されるのでカウントの数値が変化していきます。

以上でReactで頻出する基本の書式をまとめてみました。他にも多くの表現方法があると思いますがそれは実際にアプリを作る際にさらに調べてみようと思います。