feat(react): upgrade to React 19 and replace reactstrap with react-bootstrap

Fix #28130

Author: sreeshanth-soma

generators/react/__snapshots__/generator.spec.ts.snap

@@ -279,6 +279,14 @@ ${comment}
         source.mergeClientPackageJson!({
           overrides: {
             'browser-sync': nodeDependencies['browser-sync'],
+            'react-jhipster': {
+              react: nodeDependencies.react,
+              'react-dom': nodeDependencies['react-dom'],
+            },
+            'react-redux-loading-bar': {
+              react: nodeDependencies.react,
+              'react-dom': nodeDependencies['react-dom'],
+            },
           },
         });
         if (application.clientRootDir) {

generators/react/generator.ts

@@ -8,15 +8,15 @@
     "bootstrap": "5.3.8",
     "bootswatch": "5.3.8",
     "path-browserify": "1.0.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-hook-form": "7.71.2",
     "react-jhipster": "0.25.3",
     "react-redux": "9.2.0",
     "react-redux-loading-bar": "5.0.8",
     "react-router": "7.13.1",
     "react-toastify": "11.0.5",
-    "reactstrap": "9.2.3",
+    "react-bootstrap": "2.10.9",
     "redux": "5.0.1",
     "rxjs": "7.8.2",
     "sockjs-client": "1.6.1",
@@ -31,8 +31,8 @@
     "@testing-library/react": "16.3.2",
     "@types/jest": "30.0.0",
     "@types/node": "22.19.13",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.1.6",
+    "@types/react-dom": "19.1.6",
     "@types/webpack-env": "1.18.8",
     "autoprefixer": "10.4.27",
     "browser-sync": "3.0.4",

generators/react/generators/bootstrap/__snapshots__/generator.spec.ts.snap

@@ -120,7 +120,7 @@ translate('global', { min:20, max: 50, pattern: '^[a-zA-Z0-9]*$',
 import React from 'react';
 import { Link } from 'react-router';
 import { Translate } from 'react-jhipster';
-import { Row, Col, Alert } from 'reactstrap';
+import { Row, Col, Alert } from 'react-bootstrap';
 
 import { useAppSelector } from 'app/config/store';
 
@@ -212,7 +212,7 @@ export default Home;
 import React from 'react';
 import { Link } from 'react-router';
 
-import { Row, Col, Alert } from 'reactstrap';
+import { Row, Col, Alert } from 'react-bootstrap';
 
 import { useAppSelector } from 'app/config/store';
 

generators/react/resources/package.json

@@ -43,7 +43,7 @@
     "react-redux-loading-bar": "<%= nodeDependencies['react-redux-loading-bar'] %>",
     "react-router": "<%= nodeDependencies['react-router'] %>",
     "react-toastify": "<%= nodeDependencies['react-toastify'] %>",
-    "reactstrap": "<%= nodeDependencies['reactstrap'] %>",
+    "react-bootstrap": "<%= nodeDependencies['react-bootstrap'] %>",
     "redux": "<%= nodeDependencies['redux'] %>",
 <%_ if (skipServer) { _%>
     "sonar-scanner": "<%= nodeDependencies['sonar-scanner'] %>",

generators/react/support/translate-react.spec.ts

@@ -113,7 +113,7 @@ Custom button styles
 Generic styles
 ========================================================================== */
 
-/* Temporary workaround for availity-reactstrap-validation */
+/* Temporary workaround for react-bootstrap validation */
 .invalid-feedback {
   display: inline;
 }

generators/react/templates/package.json.ejs

@@ -21,7 +21,7 @@ import './app.scss';
 import 'app/config/dayjs';
 
 import React, { useEffect } from 'react';
-import { Card } from 'reactstrap';
+import { Card } from 'react-bootstrap';
 import { BrowserRouter } from 'react-router';
 import { ToastContainer, toast } from 'react-toastify';