Pushing overhaul.

web/modules/custom/dc_react/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

web/modules/custom/dc_react/dc_react.info.yml

@@ -0,0 +1,5 @@
+name: DC React
+type: module
+description: React Plaground
+package: DC React
+core_version_requirement: ^10 || ^11

web/modules/custom/dc_react/dc_react.libraries.yml

@@ -0,0 +1,3 @@
+main:
+  js:
+    js/dist/main.min.js: { minified: true }

web/modules/custom/dc_react/dc_react.module

@@ -0,0 +1,21 @@
+<?php
+
+/**
+ * Implements hook_theme().
+ *
+ * Register a module or theme's theme implementations.
+ * The implementations declared by this hook specify how a particular render array is to be rendered as HTML.
+ *
+ * See: https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/8.2.x
+ *
+ * If you change this method, clear theme registry and routing table 'drush cc theme-registry' and 'drush cc router'.
+ */
+function dc_react_theme($existing, $type, $theme, $path) {
+  return [
+    'react_block' => [
+      'variables' => [
+        'data' => [],
+      ],
+    ],
+  ];
+}

web/modules/custom/dc_react/js/src/components/Button.js

@@ -0,0 +1,7 @@
+import React, { Component } from 'react';
+
+function Button(props) {
+  return <button className={"btn btn-" + props.classes}><a href={props.link}>{ props.text }</a></button>;
+}
+
+export default Button;

web/modules/custom/dc_react/js/src/components/Counter.js

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+
+export default Counter;

web/modules/custom/dc_react/js/src/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Button from './components/Button';
+import Counter from './components/Counter';
+
+const container = document.getElementById('react-block');
+const root = createRoot(container);
+
+root.render(
+  <div>
+    <Button text="Click me" link="https://www.drupal.org" classes="primary" />
+    <Counter />
+  </div>
+);

web/modules/custom/dc_react/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "dc_react",
+  "version": "1.0.0",
+  "description": "TO DEVELOP ---  Finish %",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "build:dev": "webpack",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "prop-types": "^15.8.1",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.27.1",
+    "babel-loader": "^9.1.3",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4"
+  }
+}

web/modules/custom/dc_react/src/Plugin/Block/ReactBlock.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Drupal\dc_react\Plugin\Block;
+
+use Drupal\Core\Block\BlockBase;
+
+/**
+ * Provides a React app block.
+ *
+ * @Block(
+ *   id = "react_block",
+ *   admin_label = @Translation("React Block"),
+ *   category = @Translation("React"),
+ * )
+ */
+class ReactBlock extends BlockBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    $build = [
+      '#theme' => 'react_block',
+    ];
+
+    return $build;
+  }
+
+}

web/modules/custom/dc_react/templates/react-block.html.twig

@@ -0,0 +1,3 @@
+{{ attach_library('dc_react/main') }}
+<div id="react-block" class="container"></div>
+<h4>This is dan saying hi!</h4>

web/modules/custom/dc_react/webpack.config.js

@@ -0,0 +1,28 @@
+const path = require('path');
+
+const config = {
+  entry: {
+    main: ["./js/src/index.jsx"]
+  },
+  devtool:'source-map',
+  mode:'development',
+  output: {
+    path: path.resolve(__dirname, "js/dist"),
+    filename: '[name].min.js'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        include: path.join(__dirname, 'js/src'),
+      }
+    ],
+  },
+};
+
+module.exports = config;