これは何？

Reactを初めて触ったので、すぐに思い出せるように、基本をまとめた記事です。

目次

目次
 Reactの環境構築
 書き始める前のお決まりのお作法
 JSX記法
 コンポーネント
 イベントとstyle
props
state
useEffect
通常のexportとdefault export
終わりに

Reactの環境構築

0から環境構築をするのは大変なので、Create React Appを使用する

Node.jsをインストールする
下記のコマンドを入力する

npx create-react-app my-app
cd my-app
npm start

自動的にブラウザにReactの文字が表示される
srcディレクトリ配下のファイルをすべて削除し、新しくindex.jsを作成する
index.jsを編集していく

書き始める前のお決まりのお作法

index.htmlに下記が書かれていることを確認

<div id="root"></div>

index.jsに下記を追加

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

App.jsを新しく作成し、App.jsに下記を記述する

import React from 'react';

// ここにReactを記述する

export default App;

App.jsにReactを記述していく

Reactの拡張子はjsxだが、jsでも問題ない。もちろんjsxにしても良い

JSX記法

JavaScript の構文の拡張で、htmlタグを式の中に記述する書き方。

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

複数のタグを記述する場合、<>か<React.fragment>で囲む必要がある

コンポーネント

UI を独立した再利用できる部品に分割し、部品それぞれを分離して考えることができるようになる。
すでにApp.jsxを作成しているが、それがコンポーネント。
関数コンポーネントとクラスコンポーネントがあるが、基本的に関数コンポーネントだけでOK。

コンポーネントのファイル名は必ずパスカルケースで記述すること

イベントとstyle

イベント

htmlタグの中で扱うイベントやstyleの名称はすべてキャメルケースになる。
また、波括弧で囲むことでjavaScriptを記述することができる。

const App = () => {
    const onClickButton = () => alert();
    return (
        <button onClick={onClickButton}>ボタン</button>
    );
};

javaScriptのonclickイベントがonClickとして記述されている
波括弧内にjavaSciptで定義した変数を渡すことができる

style

htmlタグに直接styleを記述することができる

const App = () => {
    return (
        <h1 style={{ color: 'red' }}>こんにちは</h1>
    );
};

外側の波括弧はjavaScirptとして記述しますよ、という波括弧
内側の波括弧はjavaScriptのオブジェクトとしての波括弧

変数を渡すこともできる

const App = () => {
    const contentStyle = {
        color: 'red',
    };
    return (
        <h1 style={contentStyle}>こんにちは</h1>
    );
};

props

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

// App.jsxに記述
const App = () => {
    return (
        <>
            <ColorfulMessage color='blue' message='How are you?'/>
            <ColorfulMessage color='green' message='Good!'/>
        </>
    );
};

// ColofulMessage.jsxに記述
import React from 'react';

const ColorfulMessage = (props) => {
    const contentStyle = {
        color: props.color,
        fontSize: '14px',
    }

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

export default ColorfulMessage;

定義したコンポーネント(ColofulMessage)をタグとして使用できる
color, messageがpropsという変数としてColorfulMessageに渡される

タグで囲った要素をpropsとしてコンポーネントに渡すこともできる

// App.jsxに記述
const App = () => {
    return (
        <>
            <ColorfulMessage color='blue'>How are you?</ColorfulMessage>
            <ColorfulMessage color='green'>Good!</ColorfulMessage>
        </>
    );
};

// ColofulMessage.jsxに記述
const ColorfulMessage = (props) => {
    const contentStyle = {
        color: props.color,
        fontSize: '14px',
    }

    return (
        <p style={contentStyle}>{props.children}</p>
    );
}

タグで囲った要素はprops.childrenとして渡される

javaScriptの分割代入を使えばもっと簡単に書ける

// ColofulMessage.jsxに記述
const ColorfulMessage = (props) => {
    const { color, children } = props;
    const contentStyle = {
        color,
        fontSize: '14px',
    }

    return (
        <p style={contentStyle}>{children}</p>
    );
}

cssではキー名と値が同じ場合、color: color を color のように省略できる

state

各コンポーネントが持つ状態のこと。
Stateが変更されると再レンダリングされる。
使用する場合はuseStateを使う。

import React, { useState } from 'react';

const App = () => {
    const [num, setNum] = useState(100);
    return (
        <p>{num}</p>
    );
};

useStateを配列として分割代入した時、1番目はstateとして使用する変数名(num)、2番目はstateを変更するための関数(setNum)を取り出す
useState(100)は初期値を表す（初期値は100なので、numには100が表示される）

stateを変更するための関数を使用することで変数の値を変更できる

const App = () => {
    const [num, setNum] = useState(100);
    const onClickCountUp = () => {
        setNum(num + 1);
    };

    return (
        <>
            <button onClick={onClickCountUp}>カウントアップ！</button>
            <br/>
            <p>{num}</p>
        </>
    );
};

カウントアップボタンを押すとonClickCountUpが呼ばれ、setNum(num + 1)によりnum = num + 1が実行され、numの値がボタンを押すたびに1ずつ増えていく
setNum(1000)にするとnum = 1000が実行されるので、numが1000になる

useEffect

useEffectはstateの対象を限定する関数こと。関心を分離させる。

レンダリングで気をつけること

再レンダリングがされる主なタイミングは下記の3つ。

stateが変更された時
propsの値が変更された時
親のコンポーネントのstateが変更された時

再レンダリングが意図せずされてしまうと、思わぬバグを引き起こしてしまうので注意

バグを引き起こしてしまうコードの例

const App = () => {
    const [num, setNum] = useState(0);
    const [faceShowFlag, setFaceShowFlag] = useState(true);

    const onClickSwitchShowFlag = () => {
        setFaceShowFlag(!faceShowFlag);
    }

    if (num % 3 === 0) {
        setFaceShowFlag(true);
    } else {
        setFaceShowFlag(false);
    }

    return (
        <>
            <button onClick={onClickCountUp}>カウントアップ！</button>
            <br/>
            <button onClick={onClickSwitchShowFlag}>on/off</button>
            <p>{num}</p>
            {faceShowFlag && <p>😄</p>}
        </>
    );
};

numの初期値が0のためif文でsetFaceShowFlag(true)が実行される。しかし、stateが更新されたため、再び上から読み込みがされ、また同じif文を通ることになり、無限に再レンダリングが繰り返される。

useEffectの使い方1

最初のレンダリングの時だけ読み込ませたい処理を記述する

useEffect(() => {
    console.log('useEffect!');
}, []);

第2引数を空の配列にした場合、useEffect内に記述された処理は1度だけ実行される

useEffectの使い方2

関心をもたせたい変数を指定して、渡した変数に変更があった場合のみ、処理を実行されるようにする

const App = () => {
    const [num, setNum] = useState(0);
    const [faceShowFlag, setFaceShowFlag] = useState(false);

    const onClickCountUp = () => {
        setNum(num + 1);
    };
    const onClickSwitchShowFlag = () => {
        setFaceShowFlag(!faceShowFlag);
    }

    useEffect(() => {
        if (num > 0 && num % 3 === 0) {
            faceShowFlag || setFaceShowFlag(true);
        } else {
            faceShowFlag && setFaceShowFlag(false);
        }
    }, [num]);

    return (
        <>
            <button onClick={onClickCountUp}>カウントアップ！</button>
            <br/>
            <button onClick={onClickSwitchShowFlag}>on/off</button>
            <p>{num}</p>
            {faceShowFlag && <p>😄</p>}
        </>
    );
};

上記の場合、numが更新された場合のみuseEffect内の処理が走る

通常のexportとdefault export

default exportの書き方

// ColorfulMessage.jsxに記述
import React from 'react';

const ColorfulMessage = (props) => {
    // 省略
}

export default ColorfulMessage;

// App.jsxに記述
import React, { useEffect, useState } from 'react';
import ColorfulMessage from './components/ColorfulMessage';

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

通常のexportの書き方

// ColorfulMessage.jsxに記述
import React from 'react';

export const ColorfulMessage = (props) => {
    // 省略
}

import React, { useEffect, useState } from 'react';
import { ColorfulMessage } from './components/ColorfulMessage';

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

通常のexportの場合、分割代入で書く

終わりに

reactは素のJavaScriptよりも、簡単にいろいろなことができて便利ですね。
もし間違っている部分があればご指摘ください。
何かの参考になれば幸いです。