React.js 学習備忘録①~基本事項~

Reactの学習を始めたので、自分の中で情報を整理するためにも記録を残しておく。

JSX記法

・HTMLのような構造だが、JSと併用が可能
・閉じタグが必要
・JS部分は{}で囲う
・拡張子は.jsx
・レンダリングする際、returnする内容は1つのタグで囲う必要がある
・その際は何も記述しないタグで囲うのが一般的 <>jsxの内容>
・class名はclassNameとする

App.jsx

export　const App = () => {
    const hoge = 'huga';
    return(
    <> //HTMLでは出力されない
      <input/> //1つのタグからなる要素も閉じタグ代わりの/が必須
      <div className="App">　//HTMLでは <div class="App">と出力
        {hoge} //HTMLではfugaと出力される
      </div>
    </>
    );
};

コンポーネント

・Reactを構成する部品
・コンポーネントを組み合わせてページを作っていく
・コンポーネント名の最初は大文字
・クラスコンポーネントと関数コンポーネントがある（今はほぼ関数コンポーネント）
・インポートしたコンポーネントをタグとして使用が可能

src/components/Child.jsx

export const Child = () => {
    return(
    <> 
      <div>
        子コンポーネント
      </div>
    </>
    );
};

App.jsx

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

export const App = () => {
    return(
        <>
            <div>
                親コンポーネント
            </div>
            <Child /> //子コンポーネントと出力
        </>
    );
};

イベント

・キャメルケースで設置 onClick,onChangeなど

App.jsx

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

export const App = () => {
    const onClickAlert = () => alert();
    return(
        <>
            <button onClick={onClickAlert}> //クリックすることでアラート表示
                アラート表示
            </button>
        </>
    );
};

Props

・コンポーネントに渡される引数
・親側はコンポーネントタグに プロップス名=値 で子に渡す
・子側は () => {} の（）内でまとめて受け取る

SelfIntroduction.jsx

export const SelfIntroduction = (props) => { //props名はなんでもOK
    const {firstName, lastName} = props;
    return(
        <>
            <p>私の名前は{lastName} {firstName}です。</p>
        </>
    );
};

App.jsx

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

export const App = () => {
    return(
        <>
            <SelfIntroduction firstName='太郎' lastName='山田' /> //私の名前は山田 太郎です。と出力
            <SelfIntroduction firstName='花子' lastName='山田' /> //私の名前は山田 花子です。と出力
        </>
    );
};

state

・コンポーネントが持つ状態
・useStateを使用することで値を更新する
・useStateはuseState()とすることで、変数名、変数を更新する関数(set変数名)を定義する
・useState()の()内で初期値を定義できる

App.jsx

import { useState } from "react";

export const App = () => {
    const [ number, setNumber] = useState(0);
    const onClickIncrement = () => {
        setNumber(number + 1);
    };
    return(
        <>
            {number} //初期値として0が出力
            <button onClick={onClickIncrement}>インクリメント</button> //クリックする度にnumberの値がインクリメントされて更新
        </>
    );
};

何かミスやアドバイス等ありましたら、コメント頂けると幸いです。

次回：再レンダリングについて