【Reactの勉強】チュートリアルをやってみる(「条件分岐」まで)

概要

前回で最低限の環境構築が完了したので、以下の日本大学文理学部情報科学科の教授の方がクリエイティブ・コモンズで公開してくださっているチュートリアルをやっていく。

zenn.dev

今回は、「条件分岐」のセクションまでやったので感想・変更点・ハマったことなどを書く。

また、適宜、以下の本を参考にさせて頂きながら進める。(以下、『りあクト！』)

oukayuka.booth.pm

バージョン

「Reactの勉強」で使用している主なソフトウェアのバージョンは以下の通り。

• node: 15.5.0
• react-create-app: 4.0.1
• react: 17.0.1
• react-dom: 17.0.1
• typescript: 4.1.3
• eslint: 7.17.0
• prettier: 2.2.1
• stylelint: 13.8.0

感想・変更点・ハマったことなど

react-scriptsの設定について

私は、『りあクト！』に従って、「Create React App」で環境を構築したが、チュートリアルの方は「Create React App」使わずに

• react
• react-dom
• react-scripts

をインストールする手順になっていた。
その際に、package.jsonのscriptsに以下を登録していた。

"scripts": {
    "build": "react-scripts build",
    "start": "react-scripts start"
}

私の環境を確認したところ、package.jsonには既に以下の設定がされていた。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

今まで特に意識していなかったが、npm startと打っただけで画面が起動するのは、「Create React App」がこれらのコマンドを登録しておいてくれているからなんだと勉強になった。

FunctionComponentを使ってみた

「コンポーネントの分割」のセクションのところで、『りあクト！』の8章で紹介されている「FunctionComponent」の書き方を使ってみた。

「FC」をimportする。

import React, { FC } from 'react';

例えば「Header」コンポーネントの場合は以下のように書ける。

const Header: FC = () => {
  return (
    <header className="hero is-dark is-bold">
      <div className="hero-body">
        <div className="container">
          <h1 className="title">Cute Dog Images</h1>
        </div>
      </div>
    </header>
  );
};

型を定義する

元のチュートリアルの方ではTypeScriptを使用していないので、サンプルコードでは型を定義していない。

私はTypeScriptで開発環境を構築しており、ESLintも導入しているので、型を定義しないとESLintでエラーが発生してしまう箇所があった。

例えば、Galleryコンポーネントのpropsに画像のURLのリストを渡す箇所では、以下のように型情報を定義した。

Galleryコンポーネントのpropsの型を定義する。

type GalleryProps = {
  urls: string[];
};

Galleryコンポーネントのpropsに型情報を付与する。

const Gallery: FC<GalleryProps> = (props) => {
  const { urls } = props;
  // 省略
};

mainタグを知らなかった

チュートリアルでmainタグというのが使われているが、今まで使ったことなかったのと、そもそも存在自体を知らなかったので、こんなのあるんだという感じだった。

developer.mozilla.org

成果物

まだチュートリアルの途中だが、ここまでの段階で以下のようなアプリがローカルで動いた。

以上