ViteでReactとReact Routerを使ってみる
最終更新日: Update!!
過去記事「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: › ❯ TypeScriptVanillaJSで進めている状態からは、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-specMarkuplintの設定ファイルを更新していきます。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環境で扱えるようにしてみました。プロジェクトによって採用されるフレームワークはさまざまですが、簡単に開発環境の構築ができるのでどちらもあわせて準備しておきたいですね。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories