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

2023年10月18日React

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

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

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の分も含まれているか確認します。

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 />
);

カタログの一括ダウンロードを作るとして、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とREACT DOMだけでなく、BabelでJSXを読めるように@babel/core @babel/preset-env @babel/preset-react babel-loaderあたりを読み込む点が詰まりどころですので、もし動かない場合は、presetをちゃんとインストールして設定しているかを確認しましょう。