Step 1: Set Up Your Theme /themes/custom/my_react_theme
Step 2: Initialize Node.js: In your theme's root directory, run npm init -y to create a package.json file.
Step4 : add the build scripts .locate the "scripts" section. Add the "build" and "dev" entries as shown below
Step4 : create dist and component folder into theme root directory.
Step 3: create and Configure Vite vite.config.js file
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import glob from 'glob';
import path from 'path';
export default defineConfig({
plugins: [react()],
build: {
// Automatically find all .jsx files as entry points
rollupOptions: {
input: glob.sync(path.resolve(__dirname, 'components/**/*.jsx')),
output: {
// Output compiled files to a 'dist' folder in your theme
dir: 'dist',
entryFileNames: '[name].js',
},
},
},
});
Step 4: Connect React to Drupal via SDC
Step 6: Build Your React Component