【React】Webサイトにちょい足ししてCRUDなどを操作をする方法

2023年10月18日React

Web制作など既存のWebサイトや、そこまでガチガチにReactなどを使う必要がないときでもReactをちょい足ししてリッチする方法を紹介します。
企業サイトを作成する場合は、カタログの一括ダウンロードだったり、商品を顧客がまとめてチェックしてみれるようにするなど、いろいろできるようになります。

ReactでWebサイトにちょい足ししてCRUDなどを操作をする方法

ディレクトリ構造

project/
├── src/
│   ├── catalog/
│   │   └── Catalog.js
│   └── index.js
├── public/
│   └── index.html
├── webpack.config.js
├── package.json
└── babel.config.json

REACTとREACT DOMをインストールする

npm install react react-dom

こちらのコマンドでReactの必要なパッケージをインストールします。

BabelでJSXを読めるように、インストールする

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

webpack.config.jsの設定を変更する

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            'compact': false
          }
        },
      }
    ]
  },
}

もしwebpackを使ってバンドルしている場合は、preetsを変更する必要があります。
'@babel/preset-react’を足すことでreactも正常にバンドルできるようになります。
エラーが出る場合は、presetがちゃんと上のようにReactの分も含まれているか確認します。
compact: falseのオプションは出力コードを圧縮せず可読性を確保する設定で、デバッグ時に役立ちます。
React 19やWebpackのデフォルト設定では不要な場合が多くなっているのでcompactのオプションはなくても問題ありません。

html

<section class="top" id="top">
  <nav id="navigation"></nav>
</section>

まずはマウントするためのhtmlです。id属性などなんでもいいのでDOMを準備します。

catalog.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import Catalog from './catalog/Catalog'

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(
<Catalog />
);

ReactDOM.createRootはReact 18以降で導入され、以前のバージョンでは動作しないため、ReactV18や、V19を使用するようにしましょう。
カタログの一括ダウンロードを作るとして、catalog.jsというファイルを用意しています。
別にapp.jsでもなんでも大丈夫です。

catalog/Catalog.js

import React from 'react'
const Catalog = () => {
    return (
        <h1>Hello World cataghhh!</h1>
    )
}
export default Catalog

そして、Catalogコンポーネントの内容を記述します。
これであとは、好きなようにReactのコンポーネントを拡張していけばOKです。

React V19のRefreshのセットアップ（開発体験向上）

React 19を使用する場合、ホットリロード機能の「React Refresh」を導入することで、開発体験が向上します。以下の内容を記事に追加すると、より実践的になります。

npm install react-refresh @pmmmwh/react-refresh-webpack-plugin --save-dev

webpack.config.jsにReact Refresh用の設定を追加

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  mode: 'development', // 本番環境では不要
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['react-refresh/babel'],
          },
        },
      },
    ],
  },
  plugins: [
    new ReactRefreshWebpackPlugin(),
  ],
  devServer: {
    hot: true,
  },
};

React Refreshを利用することで、開発時にページをリロードせずに変更が反映されるようになります。

React.StrictModeの推奨

React 19では、StrictModeがより重要な役割を果たします。

import React from 'react';
import { createRoot } from 'react-dom/client';
import Catalog from './catalog/Catalog';

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(
  <React.StrictMode>
    <Catalog />
  </React.StrictMode>
);

開発中に潜在的な問題を検出しやすくなるため、特に学習目的や開発時におすすめです。

まとめ

REACTとREACT DOMだけでなく、BabelでJSXを読めるように@babel/core @babel/preset-env @babel/preset-react babel-loaderあたりを読み込む点が詰まりどころですので、もし動かない場合は、presetをちゃんとインストールして設定しているかを確認しましょう。

React

Posted by devsakaso