React基礎文法

Reactについて勉強したのでその時のメモです。

JSX記法

• JacaScript内にHTMLを書いていく感じ。
• return内が複数行になるなら（）で囲う。
• JSXは一つのタブ<>>で囲う。

import React from "react";
import ReactDom from "react-dom";

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

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

コンポーネントの使い方

• 画面要素の１単位のことで１画面からテキストボックスなど大小様々。
• ファイルを分けることでコンポーネント分割できる。
• 読み込むときはimport読み込ませるときはexportを使う。
• Reactのコンポーネントを使用している場合は拡張子はjsxにするといい。
• コンポーネント名は頭文字は大文字にする。

index.js

import React from "react";
import ReactDom from "react-dom";
import { App } from "./App";

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

App.jsx

import React from "react"

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

Reactでのイベントとスタイル

イベント

• イベント名はキャメルケース(onChange、onClickのような形のこと)
• {}で囲った部分がJavaScriptになり関数名などを入れる。

import React from "react"

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

  return(
    <>
      <h1>こんにちは！</h1>
      <p>お元気ですか？</p>
      <button onClick={onClickButton}>ボタン</button>
    </>
  );
};

スタイル

• {}内でオブジェクトとしてスタイルを書く方法。その際割り当てる値は文字列にする。 ※ ①
• オブジェクトの変数の中にCSSを定義して反映する方法。　※ ②
• スタイルの当て方は他にもある。

import React from "react"

export const App = () => {
  const contentStyle = { // ②
    color: 'blue'
    fontSize: '18px'
  };

  return(
    <>
      <h1 style={{ color: 'red' }}>こんにちは！</h1> 　// ①
      <p style={contentStyle}>お元気ですか？</p> // ②
    </>
  );
};

Props

• コンポーネントに渡される引数のようなもの。
• 動的に変更したい部分をpropsとして使う。
• 変数名とchildrenで値を受け渡せる。
• 渡ってきたpropsに分割代入することで可読性UP。

例：スタイルで色のついた文字を表示させる場合

components/ColorfulMessage.jsx

import React from "react";

export const ColorfulMessage = (props) => {
  const { color, children } = props;
  const contentStyle = {
    color: color
  };

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

App.jsx

import React from "react";
import { ColorfulMessage } from "./components/ColorfulMessage";

export const App = () => {
  return (
    <>
      <ColorfulMessage color="green">お元気ですか？</ColorfulMessage>
      <ColorfulMessage color="red">こんにちは</ColorfulMessage>
    </>
  );
};

結果

State

• コンポーネントが持つ状態のこと。
• Stateが変更されると再レンダリングされる。

useState

• Reactでstateを扱う場合に使う関数。

const [stateの変数名, stateを変更する関数(setを使う) ] = useState(初期値)

• 使い方の例 カウントアップ

stateで初期値を０に設定しボタンを押したらカウントアップする関数を定義することでカウントアップを実現できる。

import React from "react";
import { useState } from "react";

export const App = () => {
  const [num, setNum] = useState(0);

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

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

#　再レンダリング

• Reactではstateの変更があると再レンダリング(コードをまた上から実行)走る。
• 再レンダリングはバグの原因になることがある。

useEffect

• useEffectを使うことで再レンダリングを防止する。

useEffect(() => {
  // 処理
}, [] );

第2引数が空だと処理の部分が最初にレンダリングされたときだけ実行される。
第2引数に変数を設定すればその変数を監視するのでその変数のstateが変わった時に実行される。

使う例としては、APIで記事一覧ページを取得したときにuseEffectで記事一覧ページを取得するのは初回のみと設定できたりなど。

参考