Webアプリ開発 React.js フロントエンド環境 Part(16) Node.js とcreate-react-app

Contents

はじめに
Node.js とcreate-reat-appを使う
サンプルプログラムの改造
1. MenuItemコンポーネント作成
2. MenuItemコンポーネント呼び出し
まとめ

はじめに

swim-loverです。初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。Webアプリ開発記事と述べていますが、未だに、公式ページをお手本にしているだけで、まだまだ道半ばです。

第15回では、公式サイトに従い、テスト用ドメインで、map関数の基本的な確認と公式サイトに従い、箇条書きリストを作成しました。

引き続き、Reactの勉強を進めていきたいと思います。

Node.js とcreate-reat-appを使う

これまで、作成したコードは、テスト用ドメインにコードを移動して、動作確認していました。

今回より、効率性の観点から、以下のように学び方を変更することにしました。

Node.js インストール　Local環境でReactを開発するために、Node.jsをインストールしました。 https://nodejs.org/ja/　より、LTS版を選択してインストールします。

VS code　インストール　エディタ環境はVisual Studio Codeをインストールしました。https://code.visualstudio.com/download

vs codeのTerminal windowからnodeのコマンドが実行できるのでWindwow切り替えの手間は省けます。

ここではwork_js というフォルダを作成しました。

node.js Versionを確認します。

node -v

“npm init”コマンドを実行します。これにより、package.jsonファイルが作成されます。package.jsonは、パッケージに関する設定情報が記述されたファイルです。npm installコマンドを実行すると、package.jsonの記載内容に従って、パッケージのインストールが実行されます。

create-react-app インストール

Create-React-appはReact開発環境の雛形だそうです。これを活用してシングルページアプリケーションを作って行きたいと思います。

https://ja.reactjs.org/docs/create-a-new-react-app.html

npx コマンドにより、create-reat-app パッケージを取得します。

npm startコマンドでsampleが起動しました。

npx create-react-app react-sample-app
cd react-sample-app
npm start

サンプルプログラムの改造

サンプルプログラムの改造を行います。今回、水泳トレーニングのメニュー作成を行ってみることにしました。

MenuItemコンポーネント作成

以下のようなMenuItemコンポーネントを作成しました。

MenuItemコンポーネントは、titleとdescriptionを親コンポーネントから受け取って、表示します。

MenuItem.js

import React, { Component } from 'react';
import './MenuItem.css';

class MenuItem extends Component {
  render() {
    const { title, description } = this.props;

    return (
      <div className="MenuItem">
        <div className="MenuItem-title">{title}</div>
        <div className="MenuItem-description">{description}</div>
      </div>
    );
  }
}

export default MenuItem;

MenuItem.css

.MenuItem {
  border: 3x solid orange;
  margin: 12px;
  border-radius: 4px;
  width: 500px;
  background-color: whitesmoke;
  box-shadow: 1px 2px 5px 3px goldenrod;
  padding: 4px 2px;
}

.MenuItem-title {
  font-size: 18px;
  margin: 4px 4px 4px;
  border-bottom: 2px solid skyblue;
  text-align: left;
  padding: 4px 8px;
}

.MenuItem-description {
  word-wrap: break-word;
  text-align: left;
  padding: 8px;
}

MenuItemコンポーネント呼び出し

App.jsを編集して、以下の様に書き換えます。10行目でMenuItemコンポーネントを呼び出しています。

import React, { Component } from 'react';
import './App.css';
import MenuItem from './MenuItem.js';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div align="center">
          <MenuItem
            title="Swim menu 2023/1/29"
            description="持久力トレーニング"
          />
        </div>
      </div>
    );
  }
}

export default App;

ReactAppアプリが以下のように更新されました。