過去記事「ViteでVue.jsとVuex（Pinia）とVue Routerを使ってみる」では、ViteでVue.jsを使えるように環境構築をしてみましたが、今回はReactの環境構築をしていきます。Vue.jsの時は合わせて状態管理のライブラリとルーティングができるサンプルを作成しましたが、Reactでも同様に状態管理とルーティングをViteの環境で出来るようにしたいと思います。   今回の内容は、下記の記事でViteの基本的な開発環境ができているという前提になります。詳しくは各記事でまとめていますので合わせてご参照ください。 （参考記事） フロントエンドの開発環境にVite ＋ TypeScriptを導入する ViteでPostCSS周りの設定やSassを使う ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング ViteでVue.jsとVuex（Pinia）とVue Routerを使ってみる ViteでStylelintとESlintを使える環境を構築する ViteでMarkuplintとPrettierを使える環境を構築する ViteでPugのコンパイル環境を導入する    

Reactのインストールと環境構築

Vue.jsと同じようにViteの新規プロジェクト作成時にオプションが用意されているので、その際にReactを選択することで、簡単に環境構築ができてしまいます。もちろんTypeScriptに対応させることも可能です。

$ npm create vite@latest

? Select a framework: ›
❯ React
? Select a variant: ›
❯ TypeScript

  VanillaJSで進めている状態からは、Reactの環境に必要なパッケージを追加していきます。下記ではルーティング用のライブラリなどは含まれておらず、純粋にReactだけを使う場合の例になります。

$ npm install --save-dev @types/react @types/react-dom @vitejs/plugin-react
$ npm install react react-dom

// package.json
{
  .....
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
  },
  "devDependencies": {
    .....
    "@types/react": "^18.2.9",
    "@types/react-dom": "^18.2.4",
    "@vitejs/plugin-react": "^4.0.0",
  }
}

  ESLintを利用する場合には、別途必要なパッケージがあるので追加しておきましょう。

$ npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-react-hooks eslint-plugin-react-refresh

  続いて各種設定ファイルを用意していきます。この辺りはプロジェクトに応じて適宜内容の方を設定していきます。下記は一例になります。 【tsconfig.json】※一部抜粋

{
  "compilerOptions": {
    .....
    "jsx": "react-jsx",
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "src/**/*.jsx",
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

  【tsconfig.node.json】

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.js"]
}

  最後にViteの設定ファイルになります。Viteで扱う際のReact専用のプラグインが用意されているので、それをインポートしてプラグインのオプションに追加するだけで、Reactを使えるようになります。とても簡単ですね。 【vite.config.js】

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
  ....
  plugins: [
    ....
    react()
  ],
});

  実際にコンポーネントを作成してみます。エントリーポイント用のスクリプトで、ReactのコンポーネントをDOM要素にマウントしていきます。 【src/main.tsx】

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
  <React.StrictMode> 
    <App />
  </React.StrictMode>
);

  コンポーネントの方も用意します。今回は状態管理のデモをコンポーネントに含めており、ReactでもVue.js同様にさまざまな状態管理のライブラリがありますが、コンポーネント間でグローバル変数のように手軽で扱うのであれば、Reactにデフォルトで用意されている、「useContext」のhookを使うことでも対応できます。詳しくは割愛させていただきますが、下記ではストア用のデータとして文字列の値をもつオブジェクトを用意し、それをcontextとしてコンポーネント間でPropsを介さず受渡できるようにしています。 【src/App.tsx】

import React, { createContext, useState, useContext, useEffect } from 'react';
const storeData = {
  message: 'Hello World'
}
const SampleContext = createContext({});
const App: React.FC = () => {
  const [context, setContext] = useState(storeData);
  useEffect(() => {
    setContext({message: 'state updated'});
  }, []);
  return (
    <>
      <SampleContext.Provider value={{context, setContext}}>
        { context.message }
      </SampleContext.Provider>
    </>
  )
}

export function useSampleContext() {
  return useContext(SampleContext);
}

export default App;

  また、useContextを汎用的に使えるように関数として切り出しておくと便利です。下記のように別のコンポーネントからこの関数を呼び出すことができます。

// 別コンポーネントからContextを取得、更新
import { useSampleContext } from './App';

const ExampleComponent: React.FC = () => {
  // Contextを取得
  const store = useSampleContext();
  useEffect(() => {
    // Contextの値を更新
    store.setContext({message: 'state updated from component'});
  }, []);
  return (
    <>
      <p>{store.context.message}</p>
    </>
  )
}

  実際に開発コマンドやビルドコマンドを実行すると、ソースファイルがコンパイルされてReactのコンポーネントが機能しているのが確認できますね。    

ViteでReact Routerのライブラリを使う

アプリの状態管理であれば上記のようにReactのデフォルト機能で対応できますが、SPAなどでルーティングを扱いたい場合には別途ライブラリを利用する形になります。Reactの場合では「React Router」というものを使っていきます。まずはパッケージをインストールしていきます。

$ npm install react-router-dom

  アプリケーション側のコンポーネントでルーティングの設定を行なっていきます。React Routerでは設定方法についていくつかありますが、下記では「createBrowserRouter」を使う方法で進めています。createBrowserRouterメソッドの引数にルーティングのオプションを入れていきます。そして「RouterProvider」のrouter属性の値に指定します。この中でルーティングに対応するコンポーネントが呼び出される形になりますね。 【src/App.tsx】

import React, { createContext, useState, useContext, useEffect } from 'react';
import ExampleComponent from './components/ExampleComponent';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import Foo from './pages/Foo';
import Bar from './pages/Bar';

// store
const storeData = {
  message: 'Hello World'
}
const SampleContext = createContext({});

// route
const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/foo',
    element: <Foo />,
  },
  {
    path: '/bar',
    element: <Bar />,
  },
]);

const App: React.FC = () => {
  const [text, setText] = useState('ExampleComponent');
  const [context, setContext] = useState(storeData);
  console.log(context.message);
  useEffect(() => {
    setContext({message: 'state updated'});
  }, []);
  return (
    <>
      <SampleContext.Provider value={{context, setContext}}>
        <ExampleComponent message={text} />
        <RouterProvider router={router} />
      </SampleContext.Provider>
    </>
  )
}

export function useSampleContext() {
  return useContext(SampleContext);
}

export default App;

  それぞれルーティングに対応したコンポーネントも用意します。React Routerに対応するリンクは「Link」をつかって「to」属性の値にルーティングのパスを指定する形になります。この辺りはVue Routerと似ていますね。 【src/pages/***.tsx】

// Home.tsx
import React from 'react';
import { Link } from 'react-router-dom';

const Home: React.FC = () => {
  return (
    <>
      <nav>
        <ul>
          <li><Link to='/'>Home</Link></li>
          <li><Link to='/foo'>Foo</Link></li>
          <li><Link to='/bar'>Bar</Link></li>
        </ul>
      </nav>
      <h1>Current page：Home</h1>
    </>
  )
}

export default Home;

  これでReactのアプリケーションでルーティングに対応してコンポーネントの表示を切り替えられるようになります。    

Markuplintへの対応

最後にMarkuplintにReactを対応させる設定を行なっていきます。専用のパーサーなどを追加でインストールしていきます。Markuplintについて詳しくは過去記事「ViteでMarkuplintとPrettierを使える環境を構築する」でまとめていますのであわせて参照してください。

$ npm install --save-dev @markuplint/jsx-parser @markuplint/react-spec

  Markuplintの設定ファイルを更新していきます。Reactを扱う場合には下記のような設定を行います。 【.marklintntrc.json】※一部抜粋

{
  .....,
  "parser": {
    .....,
    ".tsx$": "@markuplint/jsx-parser",
    ".jsx$": "@markuplint/jsx-parser",
  },
  "specs": {
    .....,
    ".tsx$": "@markuplint/react-spec",
    ".jsx$": "@markuplint/react-spec",
  },
}

  リンター実行のコマンドで、jsxやtsxのReactコンポーネントファイルも対象として加えていきます。 【package.json】※一部抜粋

{
  .....,
  "scripts": {
    .....,
    "lint": "npm run lint:style && npm run lint:es && npm run lint:html",
    "lint:style": "stylelint src/**/*.{css,scss,vue,ts,tsx,jsx}",
    "lint:es": "eslint src/**/*.{vue,ts,tsx}",
    "lint:html": "markuplint src/**/*.{html,hbs,vue,pug,tsx}",
    "format": "prettier --write 'src/**/*.{ts,tsx,jsx,js,json,md,html,vue,hbs}' 'dist/**/*.html'"
  },
}

  これでReactコンポーネント内にあるHTMLもチェックできるようになりました。今回はVue.js同様にReactもVite環境で扱えるようにしてみました。プロジェクトによって採用されるフレームワークはさまざまですが、簡単に開発環境の構築ができるのでどちらもあわせて準備しておきたいですね。