feat(create-rstack): add React app templates

Author: chenjiahan

packages/create-rstack/README.md

@@ -13,16 +13,18 @@ npm create rstack@latest
 Using CLI flags:
 
 ```bash
-npx create-rstack --dir my-project --template app-ts
+npx create-rstack --dir my-project --template app-vanilla-ts
 
 # Using abbreviations
-npx create-rstack -d my-project -t app-ts
+npx create-rstack -d my-project -t app-vanilla-ts
 ```
 
 ## Templates
 
-- `app-js` - JavaScript application
-- `app-ts` - TypeScript application
+- `app-vanilla-js` - JavaScript Vanilla application
+- `app-vanilla-ts` - TypeScript Vanilla application
+- `app-react-js` - JavaScript React application
+- `app-react-ts` - TypeScript React application
 - `lib-js` - JavaScript Node.js library
 - `lib-ts` - TypeScript Node.js library
 

packages/create-rstack/src/index.ts

@@ -1,15 +1,18 @@
-import {
-  type Argv,
-  checkCancel,
-  create,
-  type ESLintTemplateName,
-  type RslintTemplateName,
-  select,
-} from '@rstackjs/create-toolkit';
+import { type Argv, checkCancel, create, select } from '@rstackjs/create-toolkit';
 import path from 'node:path';
 
 const getTemplateName = async ({ template }: Argv): Promise<string> => {
   if (typeof template === 'string') {
+    if (template === 'app' || template.startsWith('app-')) {
+      const [, framework = 'vanilla', language = 'js'] = template.split('-');
+
+      if (framework === 'js' || framework === 'ts') {
+        return `app-vanilla-${framework}`;
+      }
+
+      return `app-${framework}-${language}`;
+    }
+
     const [type, language = 'js'] = template.split('-');
     return `${type}-${language}`;
   }
@@ -24,6 +27,19 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
     }),
   );
 
+  const framework =
+    projectType === 'app'
+      ? checkCancel<string>(
+          await select({
+            message: 'Select framework',
+            options: [
+              { value: 'vanilla', label: 'Vanilla' },
+              { value: 'react', label: 'React' },
+            ],
+          }),
+        )
+      : undefined;
+
   const language = checkCancel<string>(
     await select({
       message: 'Select language',
@@ -34,21 +50,20 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
     }),
   );
 
-  return `${projectType}-${language}`;
+  return framework ? `${projectType}-${framework}-${language}` : `${projectType}-${language}`;
 };
 
-const mapESLintTemplate = (templateName: string): ESLintTemplateName =>
-  templateName.endsWith('-ts') ? 'vanilla-ts' : 'vanilla-js';
-
-const mapRslintTemplate = (templateName: string): RslintTemplateName =>
-  templateName.endsWith('-ts') ? 'vanilla-ts' : 'vanilla-js';
-
 await create({
   root: path.join(import.meta.dirname, '..'),
   name: 'rstack',
-  templates: ['app-js', 'app-ts', 'lib-js', 'lib-ts'],
+  templates: [
+    'app-vanilla-js',
+    'app-vanilla-ts',
+    'app-react-js',
+    'app-react-ts',
+    'lib-js',
+    'lib-ts',
+  ],
   builtinTools: [],
   getTemplateName,
-  mapESLintTemplate,
-  mapRslintTemplate,
 });

…/create-rstack/template-app-js/AGENTS.md …e-rstack/template-app-react-js/AGENTS.mdpackages/create-rstack/template-app-js/AGENTS.md renamed to packages/create-rstack/template-app-react-js/AGENTS.md packages/create-rstack/template-app-js/AGENTS.md renamed to packages/create-rstack/template-app-react-js/AGENTS.md

@@ -0,0 +1,19 @@
+{
+  "name": "rstack-app-react-js",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rs build",
+    "dev": "rs dev --open",
+    "preview": "rs preview"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^2.1.0",
+    "rstack": "^0.3.5"
+  }
+}

packages/create-rstack/template-app-react-js/package.json

@@ -0,0 +1,11 @@
+// @ts-check
+// Rstack configuration guide: https://rstack.rs/config
+import { define } from 'rstack';
+
+define.app(async () => {
+  const { pluginReact } = await import('@rsbuild/plugin-react');
+
+  return {
+    plugins: [pluginReact()],
+  };
+});

packages/create-rstack/template-app-react-js/rstack.config.js

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

…ate-rstack/template-app-js/src/index.css …rstack/template-app-react-js/src/App.csspackages/create-rstack/template-app-js/src/index.css renamed to packages/create-rstack/template-app-react-js/src/App.css packages/create-rstack/template-app-js/src/index.css renamed to packages/create-rstack/template-app-react-js/src/App.css

@@ -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-rstack/template-app-react-js/src/App.jsx

@@ -0,0 +1,23 @@
+{
+  "name": "rstack-app-react-ts",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rs build",
+    "dev": "rs dev --open",
+    "preview": "rs preview"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^2.1.0",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "rstack": "^0.3.5",
+    "typescript": "^7.0.2"
+  }
+}