🐣 【日報】React実践の教科書 P99〜104
ENJIN React.js
作成日： 2021/12/08
1

今日やったこと

  • 「モダンJavaScriptの基本から始める React実践の教科書」 P99〜104
    • 4-3 コンポーネントの使い方
    • 4-4 イベントやスタイルの扱い方

学習メモ

4-3 コンポーネントの使い方

  • React開発では画面の要素を様々な粒度のコンポーネントに分割することで再利用性や保守性を高める

  • 関数で定義されたコンポーネントを関数コンポーネントと呼ぶ

    • 以前のReactではClassで定義されたクラスコンポーネントも使われていたが、今は関数コンポーネントが主流

  • Reactにはコンポーネント用の拡張子 .jsx が用意されている

    • 基本的にはコンポーネントファイルの拡張子は.jsxにする
      • コンポーネントなのか普通のJSなのか見分けがつきやすい
      • 拡張子が.jsxになっていることでエディターの便利な補完機能が働く

例：export した関数を、他のファイルで import する

App.jsx

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

index.js

import { App } from "./App";

4-4 イベントやスタイルの扱い方

イベントの扱い方

  • Reactの場合はイベント等がキャメルケース（単語のつなぎ部分を大文字にする記法）になる
  • JSXで書いているHTMLのようなタグの中では { } で囲むことでJavaScriptを記述できる
export const App = () => {
    return (
        <>
			{console.log("TEST")} // つまりこういうことも可能
            <h1>こんにちは！</h1>
            <p>お元気ですか？</p>
            <button>ボタン</button>
        </>
    );
};

例：ボタンを押したらアラートを表示させる

export const App = () => {

    // ボタンを押したときに実行する関数を定義
    const onClickButton = () => {
        alert();
    };

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

スタイルの扱い方

  • CSSの各要素はJavaScriptのオブジェクトとして記述する
  • CSSファイルを読み込む方法や、CSS-in-JSと呼ばれるJSファイルの中でCSSを記述する方法もある

例：フォントを赤色にする

export const App = () => {
	// …省略
    return (
        <>
            <h1 style={{ color: "#FF0000" }}>こんにちは！</h1>
            <p>お元気ですか？</p>
            <button onClick={onClickButton}>ボタン</button>
        </>
    );
};

例： pタグの文字の色と大きさの変更

export const App = () => {
	// …省略
    // CSSオブジェクト
    const contentStyle = {
        color: "#0000FF",
        fontSize: "20px"
    };

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

所感

ここまで進めるのに1時間半かかってしまいました。

DOM操作のしかたが今まで書いてきたものとは全く違うので
まだ違和感があるのですが、習得したら楽になりそうです。

引き続きコツコツ進めていきます🐢
Yuri Ishiguro