Reactの基本

jsxの記法

jsxとは

• JavaScriptの構文拡張
• 基本的には、JavaScriptの中にHTMLタグを直接書くことができるようになるもの。
• HTMLに似た見た目をしているが、背後ではJavaScriptが動作している。

実際の使われ方

• アロー関数によるReactコンポーネントの定義

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

• 上記コンポーネントの使い方
  App コンポーネントを ReactDOM.render() の中でレンダリングする

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

exportについて

名前付きエクスポート

• エクスポート元

// 名前付きエクスポート
export const name = 'John';
export function sayHello() {
   return `Hello, ${name}`;
}

• 使用先

import myFunction, { name, sayHello } from './module.js';

デフォルトエクスポート

• エクスポート元

// デフォルトエクスポート
export default function sayHello() {
   return 'Hello, World';
}

• 使用先

import myFunction, { name, sayHello } from './module.js';

イベントについて

onClickの指定について

• onClick={}の{}の中には実行される関数を指定する。
• 使い方の例

const handleClick = (message) => {
  alert(message);
};

<Button onClick={() => handleClick('Button was clicked!')}>Click me</Button>

• ※下記のように指定しないこと

<Button onClick={handleClick('Button was clicked!')}>Click me</Button>

React Hooksについて

React Hooksとは

• stateなどのReactの機能をクラスを使わずに使えるようになる機能

useState

• stateを管理するためのHooks
• 使い方は下記

// const [状態変数, 状態を変更するための関数] = useState(状態の初期値)

const [count, setCount] = useState(0);

-　再レンダリング後もstateは保持し続ける

• reactは一度に複数のstate更新リクエストを受け取った際、一括でバッチ処理をして1度のレンダリングにまとめてしまう
  • そのため関数内で複数回同様のsetStateを行うと、最後に記述したsetStateのみ実行される
  • 上記を防ぐためには、setStateに状態更新用の関数を渡せば良い
    setCount((prevCount)=> prevCount+1)

useEffect

• 関数をレンダリング後に実行させることができるHooks
• 第二引数に指定した変数に変化があった際のみ、第一引数の関数を実行させることができる
• 第二引数が空[]の場合、初回レンダリング時のみ関数が実行される

useEffect(() => {
  /* 第1引数には実行させたい副作用関数を記述*/
  console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 第2引数には副作用関数の実行タイミングを制御する依存データを記述

useContext

• コンポーネント間で共通のデータを使用したい時に使うHooks
• propsのバケツリレーを防ぐことができる