React 練習課題

1 ダウンロード
・初めてReactを使うので間違ったアプリをダウンロードしないために、下記のサイトを参考に
dockerを使用した

*dockerとは?
コンテナという仮想の箱を作りその中に使用したいアプリをダウンロードすることで、実際のpcにアプリを入れずに動かすことが出来るというサービス

参考url
https://zenn.dev/boarinclover/articles/a839e8d24ff9c0

・これだけでは、基本的な使い方を理解できなかったので下記のサイトも併用して利用した

参考url
https://qiita.com/k5n/items/2212b87feac5ebc33ecb
2 React
・今回の学習ではReactの基本的な動作の確認を重視して勉強しました

2.1 コードの解説

Button.jsx

import React from "react";

export const Button = ({ buttonText, onClick }) => (
  <button className="button" onClick={onClick}>
    {buttonText}
  </button>
);

・Button関数に対して、buttontextとonclickというpropsが受け継がれている
*propsとはコンポーネントに引き渡す引数つまり関数などに与える値のことを示していて、
親コンポーネントから子コンポーネントに引き渡される
今回の場合は親コンポーネントがPageで子コンポーネントがButtonとScreenになる

・buttontextはbuttonの内部にtextとして表示し、onclickは指定した中にある関数がbuttonをclickしたときに呼び出す仕組みになっている

Screen.jsx

import React from "react";

export const Screen = ({ content }) => <div className="screen">{content}</div>;

・contetというpropsをPageコンポーネントから受け取って、その内容を描画している

Page.jsx

import React, { useState } from "react";
import "../style/style.css";
import { Button } from "./Button";
import { Screen } from "./Screen";

export const Page = () => {
  const [screenState, setScreenState] = useState("");
/*一番目が現在のstateを示す関数、二番目には更新するときに使うときの関数を入れる*/
  const handleButtonClick = e => {
    setScreenState(e.target.textContent);
  };

  return (
    <div>
      <Screen content={screenState} />
      <div className="button-container">
        {["A", "B", "C"].map(text => (
          <Button key={text} buttonText={text} onClick={handleButtonClick} />
        ))}
      </div>
    </div>
  );
};

・importを使ってbuttonコンポーネントとScreenコンポーネントを持ってきている

・const Pageの中には、screenstateの中身を空白の状態に指定する関数やscreenstateの状態をイベントを起こしたボタンのテキストに合わせて更新する関数が存在する

・Page関数の処理が終わったら、そのままScreenstateが更新されたScreenコンポーネントとtext =A,B,Cになったbuttontext関数を持ち、クリックされるとhandleButtonClick関数が起動するButtonコンポーネントが三つ表示されるようになっている

2.2全体の流れ
1Page関数が実行されてscreenstateが空文字の状態に更新された後、Pageから送られてきた空白のcontextpropsを表示したScreenコンポーネントとA,B,Cと表示されたButtonコンポーネントが三つレンダリングされる

2下に表示されるA,B,CどれかのButtonコンポーネントを押すことで,Reactのonclickというpropsを経由しhandleButtonClickが起動して、Screenstateの値がButtonコンポーネントのButtontextと同じ値になる

3その後またレンダリングされて、今度は先ほど押したボタンのbuttontextを持つcontextpropsを表示したScreenコンポーネントと三つのButtonコンポーネントが表示されるようになる

3感想
今回初めてReactに触って、いろいろと分からないことも多かったが、コンポーネントに分けて機能を実装することや関数の作成方法や使い方そしてstateの更新などを使って無駄なくそして分かりやすく書くことの重要性を理解する良い機会になった