feat(create-rsbuild): add React 18 templates (#4608)

Author: chenjiahan

e2e/cases/create-rsbuild/jsTemplates.test.ts

@@ -9,6 +9,13 @@ rspackOnlyTest('should create react project as expected', async () => {
   expect(pkgJson.devDependencies['@rsbuild/plugin-react']).toBeTruthy();
 });
 
+rspackOnlyTest('should create react18 project as expected', async () => {
+  const { pkgJson } = await createAndValidate(import.meta.dirname, 'react18');
+  expect(pkgJson.dependencies.react.startsWith('^18')).toBeTruthy();
+  expect(pkgJson.dependencies['react-dom'].startsWith('^18')).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-react']).toBeTruthy();
+});
+
 rspackOnlyTest('should create preact project as expected', async () => {
   const { pkgJson } = await createAndValidate(import.meta.dirname, 'preact');
   expect(pkgJson.dependencies.preact).toBeTruthy();

e2e/cases/create-rsbuild/tsTemplates.test.ts

@@ -8,6 +8,15 @@ rspackOnlyTest('should create react-ts project as expected', async () => {
   expect(pkgJson.dependencies['react-dom']).toBeTruthy();
   expect(pkgJson.devDependencies['@rsbuild/plugin-react']).toBeTruthy();
 });
+rspackOnlyTest('should create react18-ts project as expected', async () => {
+  const { pkgJson } = await createAndValidate(
+    import.meta.dirname,
+    'react18-ts',
+  );
+  expect(pkgJson.dependencies.react.startsWith('^18')).toBeTruthy();
+  expect(pkgJson.dependencies['react-dom'].startsWith('^18')).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-react']).toBeTruthy();
+});
 
 rspackOnlyTest('should create preact-ts project as expected', async () => {
   const { pkgJson } = await createAndValidate(import.meta.dirname, 'preact-ts');

packages/create-rsbuild/src/index.ts

@@ -29,7 +29,8 @@ async function getTemplateName({ template }: Argv) {
       message: 'Select framework',
       options: [
         { value: 'vanilla', label: 'Vanilla' },
-        { value: 'react', label: 'React' },
+        { value: 'react', label: 'React 19' },
+        { value: 'react18', label: 'React 18' },
         { value: 'vue3', label: 'Vue 3' },
         { value: 'vue2', label: 'Vue 2' },
         { value: 'lit', label: 'Lit' },
@@ -62,6 +63,10 @@ function mapESLintTemplate(templateName: string): ESLintTemplateName {
     case 'svelte-js':
     case 'svelte-ts':
       return templateName;
+    case 'react18-js':
+      return 'react-js';
+    case 'react18-ts':
+      return 'react-js';
   }
   const language = templateName.split('-')[1];
   return `vanilla-${language}` as ESLintTemplateName;
@@ -71,8 +76,12 @@ create({
   root: path.resolve(__dirname, '..'),
   name: 'rsbuild',
   templates: [
+    'vanilla-js',
+    'vanilla-ts',
     'react-js',
     'react-ts',
+    'react18-js',
+    'react18-ts',
     'vue3-js',
     'vue3-ts',
     'vue2-js',
@@ -81,8 +90,6 @@ create({
     'svelte-ts',
     'solid-js',
     'solid-ts',
-    'vanilla-js',
-    'vanilla-ts',
   ],
   getTemplateName,
   mapESLintTemplate,

packages/create-rsbuild/template-react18-js/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "rsbuild-react18-js",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "rsbuild dev --open",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.2.8",
+    "@rsbuild/plugin-react": "^1.1.0"
+  }
+}

packages/create-rsbuild/template-react18-js/rsbuild.config.mjs

@@ -0,0 +1,6 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+});

packages/create-rsbuild/template-react18-js/src/App.css

@@ -0,0 +1,26 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}

packages/create-rsbuild/template-react18-js/src/App.jsx

@@ -0,0 +1,12 @@
+import './App.css';
+
+const App = () => {
+  return (
+    <div className="content">
+      <h1>Rsbuild with React</h1>
+      <p>Start building amazing things with Rsbuild.</p>
+    </div>
+  );
+};
+
+export default App;

packages/create-rsbuild/template-react18-js/src/index.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

packages/create-rsbuild/template-react18-ts/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "rsbuild-react18-ts",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "rsbuild dev --open",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.2.8",
+    "@rsbuild/plugin-react": "^1.1.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "typescript": "^5.7.3"
+  }
+}

packages/create-rsbuild/template-react18-ts/rsbuild.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+});

packages/create-rsbuild/template-react18-ts/src/App.css

@@ -0,0 +1,26 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}

packages/create-rsbuild/template-react18-ts/src/App.tsx

@@ -0,0 +1,12 @@
+import './App.css';
+
+const App = () => {
+  return (
+    <div className="content">
+      <h1>Rsbuild with React</h1>
+      <p>Start building amazing things with Rsbuild.</p>
+    </div>
+  );
+};
+
+export default App;

packages/create-rsbuild/template-react18-ts/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />

packages/create-rsbuild/template-react18-ts/src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  const root = ReactDOM.createRoot(rootEl);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  );
+}

packages/create-rsbuild/template-react18-ts/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "module": "ESNext",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}

website/docs/en/guide/start/quick-start.mdx

@@ -56,7 +56,8 @@ When creating a project, you can choose from the following templates provided by
 | -------- | ------------------------------- | ----------------- |
 | vanilla  | Vanilla JavaScript              | TypeScript        |
 | react    | [React 19](https://react.dev/)  | TypeScript        |
-| vue3     | [Vue 3](https://vuejs.org/)     | TypeScript        |
+| react18  | [React 18](https://react.dev/)  | TypeScript        |
+| vue      | [Vue 3](https://vuejs.org/)     | TypeScript        |
 | vue2     | [Vue 2](https://v2.vuejs.org/)  | TypeScript        |
 | lit      | [Lit](https://lit.dev/)         | TypeScript        |
 | preact   | [Preact](https://preactjs.com/) | TypeScript        |

website/docs/zh/guide/start/quick-start.mdx

@@ -61,7 +61,8 @@ import { PackageManagerTabs } from '@theme';
 | ------- | ------------------------------- | ---------- |
 | vanilla | 原生 JavaScript                 | TypeScript |
 | react   | [React 19](https://react.dev/)  | TypeScript |
-| vue3    | [Vue 3](https://vuejs.org/)     | TypeScript |
+| react18 | [React 18](https://react.dev/)  | TypeScript |
+| vue     | [Vue 3](https://vuejs.org/)     | TypeScript |
 | vue2    | [Vue 2](https://v2.vuejs.org/)  | TypeScript |
 | lit     | [Lit](https://lit.dev/)         | TypeScript |
 | preact  | [Preact](https://preactjs.com/) | TypeScript |