[docs][examples] Remove create-react-app usages

docs/data/material/guides/content-security-policy/content-security-policy.md

@@ -72,13 +72,10 @@ function App(props) {
 }
 ```
 
-### Create React App (CRA)
+### CSP in Vite
 
-According to the [Create React App Docs](https://create-react-app.dev/docs/advanced-configuration/), a Create React App will dynamically embed the runtime script into index.html during the production build by default.
-This will require a new hash to be set in your CSP during each deployment.
-
-To use a CSP with a project initialized as a Create React App, you will need to set the `INLINE_RUNTIME_CHUNK=false` variable in the `.env` file used for your production build.
-This will import the runtime script as usual instead of embedding it, avoiding the need to set a new hash during each deployment.
+When deploying a CSP using Vite, there are specific configurations you must set up due to Vite's internal handling of assets and modules.
+See [Vite Features—Content Security Policy](https://vite.dev/guide/features.html#content-security-policy-csp) for complete details.
 
 ### Next.js Pages Router
 

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

@@ -156,34 +156,50 @@ import Button from '@mui/material/Button/Button.js';
 Future changes to the library's internal structure could break these paths. `babel-plugin-direct-import` allows for granular control over what gets imported, but it comes with the potential risk of relying on internal library paths. This may fail in future versions if the package is updated to use the `exports` field in `package.json`, which could block access to internal paths like this.
 :::
 
-If you are using Create React App, you will need to use a couple of projects that let you use `.babelrc` configuration, without ejecting.
+Material UI supports tree shaking out of the box when importing from specific paths (such as `@mui/material/Button`), so this configuration is optional and primarily useful if you want to enforce modular imports.
 
-`yarn add -D react-app-rewired customize-cra`
+Vite doesn't require extra Babel configuration by default because it uses esbuild for fast bundling and minification.
+But if you need to customize Babel (for example, to use babel-plugin-import), you can follow these steps:
 
-Create a `config-overrides.js` file in the root directory:
+1. Install dependencies:
 
-```js
-/* config-overrides.js */
-/* eslint-disable react-hooks/rules-of-hooks */
-const { useBabelRc, override } = require('customize-cra');
+```bash
+npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-plugin-transform-imports
+```
+
+2. Create a `.babelrc` file in the root directory:
 
-module.exports = override(useBabelRc());
+```json
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    [
+      "babel-plugin-transform-imports",
+      {
+        "@mui/material": {
+          "transform": "@mui/material/${member}",
+          "preventFullImport": true
+        },
+        "@mui/icons-material": {
+          "transform": "@mui/icons-material/${member}",
+          "preventFullImport": true
+        }
+      }
+    ]
+  ]
+}
 ```
 
-If you wish, `babel-plugin-import` can be configured through `config-overrides.js` instead of `.babelrc` by using this [configuration](https://github.com/arackaf/customize-cra/blob/master/api.md#fixbabelimportslibraryname-options).
+3. Update your `vite.config.js` to use the Babel plugin:
 
-Modify your `package.json` commands:
+```js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import babel from 'vite-plugin-babel';
 
-```diff
-   "scripts": {
--    "start": "react-scripts start",
--    "build": "react-scripts build",
--    "test": "react-scripts test",
-+    "start": "react-app-rewired start",
-+    "build": "react-app-rewired build",
-+    "test": "react-app-rewired test",
-     "eject": "react-scripts eject"
-  }
+export default defineConfig({
+  plugins: [react(), babel()],
+});
 ```
 
 Enjoy significantly faster start times.

docs/data/material/integrations/interoperability/interoperability.md

@@ -274,8 +274,8 @@ If, however, you would like to use styled-components, you can configure your app
 
 <!-- #repo-reference -->
 
-- [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components)
-- [Create React App with styled-components and TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
+- [Vite with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-styled-components)
+- [Vite with styled-components and TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-styled-components-ts)
 
 Following this approach reduces the bundle size, and removes the need to configure the CSS injection order.
 
@@ -582,7 +582,7 @@ It works exactly like styled components. You can [use the same guide](/material-
 
 <!-- #repo-reference -->
 
-If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project.
+To use Tailwind CSS with Material UI components, you can start by cloning the [example project](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-tailwind-ts) built with Vite and TypeScript.
 If you use a different framework, or already have set up your project, follow these steps:
 
 1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation/framework-guides.
@@ -596,7 +596,7 @@ If you use a different framework, or already have set up your project, follow th
  };
 ```
 
-3. Add the `important` option, using the id of your app wrapper. For example, `#__next` for Next.js and `"#root"` for CRA:
+3. Add the `important` option, using the id of your app wrapper. For example, `#__next` for Next.js:
 
 ```diff title="tailwind.config.js"
  module.exports = {

docs/data/material/integrations/styled-components/styled-components.md

@@ -102,8 +102,8 @@ We provide boilerplate examples of Create React App with Material UI and styled
 
 <!-- #repo-reference -->
 
-- [Material UI + CRA + styled-components (JavaScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components)
-- [Material UI + CRA + styled-components (TypeScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
+- [Material UI + Vite + styled-components (JavaScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-styled-components)
+- [Material UI + Vite + styled-components (TypeScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-styled-components-ts)
 
 :::warning
 `@emotion/react`, `@emotion/styled`, and `styled-components` are optional peer dependencies of `@mui/material`, so you need to install them yourself.

docs/data/material/migration/migration-v4/migrating-from-jss.md

@@ -392,7 +392,7 @@ See [this tss-react doc](https://docs.tss-react.dev/api/makestyles#naming-the-st
 
 You may end up with eslint warnings [like this one](https://user-images.githubusercontent.com/6702424/148657837-eae48942-fb86-4516-abe4-5dc10f44f0be.png) if you deconstruct more than one item.
 
-Don't hesitate to disable `eslint(prefer-const)`, [like this](https://github.com/thieryw/gitlanding/blob/b2b0c71d95cfd353979c86dfcfa1646ef1665043/.eslintrc.js#L17) in a regular project, or [like this](https://github.com/InseeFrLab/onyxia/blob/a264ec6a6a7110cb1a17b2e22cc0605901db6793/package.json#L133) in a CRA.
+Don't hesitate to disable `eslint(prefer-const)`, [like this](https://github.com/thieryw/gitlanding/blob/b2b0c71d95cfd353979c86dfcfa1646ef1665043/.eslintrc.js#L17) in a regular project.
 
 #### withStyles()
 

docs/src/modules/components/MaterialUIExampleCollection.js

@@ -42,17 +42,9 @@ const examples = [
     src: '/static/images/examples/remix.svg',
   },
   {
-    name: 'Create React App',
-    label: 'View JavaScript',
-    tsLabel: 'View TypeScript',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra',
-    tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts',
-    src: '/static/images/examples/cra.svg',
-  },
-  {
-    name: 'Tailwind CSS + Create React App',
+    name: 'Tailwind CSS + Vite',
     label: 'View TypeScript',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts',
+    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-tailwind-ts',
     src: '/static/images/examples/tailwindcss.svg',
   },
   {