diff --git a/.changeset/tough-melons-worry.md b/.changeset/tough-melons-worry.md
new file mode 100644
index 000000000000..d78e5f726831
--- /dev/null
+++ b/.changeset/tough-melons-worry.md
@@ -0,0 +1,11 @@
+---
+"create-cloudflare": minor
+---
+
+feature: Use `create-vite` instead of `create-react-app` for React projects.
+
+[React's documentation](https://react.dev/learn/start-a-new-react-project#can-i-use-react-without-a-framework) now recommends using `create-vite` over `create-react-app`, as the latter has been deprecated. To align with these best practices, React projects created with C3 will now use [Vite](https://vitejs.dev/).
+
+With this change, the default development command will switch from using `create-react-app` to `create-vite`, providing a more modern and efficient development experience.
+
+Additionally, selection of variants for React projects created by Vite has been added, allowing users to choose different configurations based on their needs. The test suite has also been adapted to accommodate the new configuration, ensuring all tests run without errors.
diff --git a/packages/create-cloudflare/e2e-tests/frameworks.test.ts b/packages/create-cloudflare/e2e-tests/frameworks.test.ts
index ac3c9eda076e..7ec71591f031 100644
--- a/packages/create-cloudflare/e2e-tests/frameworks.test.ts
+++ b/packages/create-cloudflare/e2e-tests/frameworks.test.ts
@@ -287,12 +287,19 @@ const frameworkTests: Record<string, FrameworkTestConfig> = {
 		},
 	},
 	react: {
+		promptHandlers: [
+			{
+				matcher: /Select a variant:/,
+				input: [keys.enter],
+			},
+		],
 		testCommitMessage: true,
 		unsupportedOSs: ["win32"],
+		unsupportedPms: ["yarn"],
 		timeout: LONG_TIMEOUT,
 		verifyDeploy: {
 			route: "/",
-			expectedText: "React App",
+			expectedText: "Vite + React",
 		},
 	},
 	solid: {
diff --git a/packages/create-cloudflare/src/frameworks/package.json b/packages/create-cloudflare/src/frameworks/package.json
index 9972aa216680..c0c0e5ed10e0 100644
--- a/packages/create-cloudflare/src/frameworks/package.json
+++ b/packages/create-cloudflare/src/frameworks/package.json
@@ -13,7 +13,7 @@
 		"create-hono": "0.12.0",
 		"create-next-app": "14.2.5",
 		"create-qwik": "1.5.7",
-		"create-react-app": "5.0.1",
+		"create-vite": "5.2.3",
 		"create-remix": "2.11.1",
 		"create-solid": "0.5.12",
 		"create-svelte": "6.3.8",
@@ -31,7 +31,7 @@
 		"next": "create-next-app",
 		"nuxt": "nuxi",
 		"qwik": "create-qwik",
-		"react": "create-react-app",
+		"react": "create-vite",
 		"remix": "create-remix",
 		"solid": "create-solid",
 		"svelte": "create-svelte",
diff --git a/packages/create-cloudflare/templates/react/c3.ts b/packages/create-cloudflare/templates/react/c3.ts
index 4bd9d79d98a4..932795f8e5f0 100644
--- a/packages/create-cloudflare/templates/react/c3.ts
+++ b/packages/create-cloudflare/templates/react/c3.ts
@@ -1,4 +1,5 @@
 import { logRaw } from "@cloudflare/cli";
+import { processArgument } from "@cloudflare/cli/args";
 import { runFrameworkGenerator } from "frameworks/index";
 import { detectPackageManager } from "helpers/packageManagers";
 import type { TemplateConfig } from "../../src/templates";
@@ -7,11 +8,38 @@ import type { C3Context } from "types";
 const { npm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [ctx.project.name]);
+	const variant = await processArgument<string>(ctx.args, "variant", {
+		type: "select",
+		question: "Select a variant:",
+		label: "variant",
+		options: variantsOptions,
+		defaultValue: variantsOptions[0].value,
+	});
+
+	await runFrameworkGenerator(ctx, [ctx.project.name, "--template", variant]);
 
 	logRaw("");
 };
 
+const variantsOptions = [
+	{
+		value: "react-ts",
+		label: "TypeScript",
+	},
+	{
+		value: "react-swc-ts",
+		label: "TypeScript + SWC",
+	},
+	{
+		value: "react",
+		label: "JavaScript",
+	},
+	{
+		value: "react-swc",
+		label: "JavaScript + SWC",
+	},
+];
+
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "react",
@@ -20,8 +48,8 @@ const config: TemplateConfig = {
 	generate,
 	transformPackageJson: async () => ({
 		scripts: {
-			deploy: `${npm} run build && wrangler pages deploy ./build`,
-			preview: `${npm} run build && wrangler pages dev ./build`,
+			deploy: `${npm} run build && wrangler pages deploy ./dist`,
+			preview: `${npm} run build && wrangler pages dev ./dist`,
 		},
 	}),
 	devScript: "dev",