+
+ );
+}
+
+export default App;
diff --git a/examples/rspack-react/src/assets/react.svg b/examples/rspack-react/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/examples/rspack-react/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/rspack-react/src/index.css b/examples/rspack-react/src/index.css
new file mode 100644
index 0000000..917888c
--- /dev/null
+++ b/examples/rspack-react/src/index.css
@@ -0,0 +1,70 @@
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/examples/rspack-react/src/main.tsx b/examples/rspack-react/src/main.tsx
new file mode 100644
index 0000000..54beba1
--- /dev/null
+++ b/examples/rspack-react/src/main.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import { hydrate } from "react-dom";
+import App from "./App.tsx";
+import "./index.css";
+
+hydrate(
+
+ 
+
+
+ Rspack + React + TypeScript
+
+
+
+
+ Edit src/App.tsx and save to test HMR
+
+ Click on the Rspack and React logos to learn more +
+${app}
+
+ `;
+};
diff --git a/examples/rspack-react/ssr.config.js b/examples/rspack-react/ssr.config.js
new file mode 100644
index 0000000..4c6b30b
--- /dev/null
+++ b/examples/rspack-react/ssr.config.js
@@ -0,0 +1,68 @@
+const path = require("path");
+/**
+ * @type {import('@rspack/cli').Configuration}
+ */
+module.exports = {
+ mode: "production",
+ entry: path.resolve(__dirname, "./src/ssr-entry.tsx"),
+ target: "webworker",
+ output: {
+ clean: true,
+ chunkFormat: false,
+ chunkLoading: false,
+ path: path.resolve(__dirname, "./dist/ssr"),
+ publicPath: "",
+ globalObject: "this",
+ filename: "index.js",
+ iife: false,
+ library: {
+ type: "var",
+ // Entry point
+ name: "SSR",
+ },
+ },
+ optimization: {
+ minimize: false,
+ splitChunks: false,
+ },
+ resolve: {
+ fallback: { fs: false, path: false },
+ extensions: [".ts", ".tsx", ".jsx"],
+ },
+ module: {
+ rules: [
+ {
+ test: /\.svg$/,
+ type: "asset",
+ },
+ {
+ test: /\.(jsx?|tsx?)$/,
+ use: [
+ {
+ loader: "builtin:swc-loader",
+ options: {
+ jsc: {
+ parser: {
+ syntax: "typescript",
+ tsx: true,
+ },
+ },
+ },
+ },
+ ],
+ },
+ {
+ test: /\.(png|jp(e*)g|svg|gif)$/,
+ use: [
+ {
+ loader: "file-loader",
+ options: {
+ name: "./images/[hash]-[name].[ext]",
+ },
+ },
+ ],
+ },
+ ],
+ },
+ plugins: [],
+};
diff --git a/examples/rspack-react/tsconfig.json b/examples/rspack-react/tsconfig.json
new file mode 100644
index 0000000..1f067d6
--- /dev/null
+++ b/examples/rspack-react/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "compilerOptions": {
+ "target": "ES6",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}