[docs] react in jsx scope

[oliviertassinari]

Summary

https://mui.com/material-ui/react-button/#basic-button

See the:

import * as React from 'react';

What is this for? Since React 17.0.0 https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports and the introduction of a new JSX transform, the import of React doesn't no longer need to be in the scope. We don't support older versions now:

material-ui/packages/mui-material/package.json

Line 82 in 44e3ce3

"react": "^17.0.0 || ^18.0.0 || ^19.0.0",

So most of the demos in the docs could be written without the import of React. This would be simpler. It's actually a DX problem because of https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md.

• Vite (latest version) warns when starting a new project and copying and pasting our demos in the docs:

• Next.js (latest version) doesn't say anything, it's happy with having import * as React from 'react' or not having it.

Examples

They don't have those imports:

• https://mantine.dev/core/chip/
• https://ui.shadcn.com/docs/components/dialog

Motivation

In the past, we didn't make the change because there were too many React users <17.0.0. But this seems to be mostly OK now:

https://tools-public.mui.com/prod/pages/npmVersion?package=react

I assume that all bundlers use the new JSX transform.

Context

Related a bit to #38966.

[brijeshb42]

Agreed. We can atleast start with our own docs, update the eslint rules, and then update the examples.

[oliviertassinari]

cc @colmtuite @aarongarciah @joserodolfofreitas @samuelsycamore it looks like it's a no-brainer to deploy this change in all our demos, e.g.

-import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';

 export default function BasicButtons() {
   return (
     <Stack spacing={2} direction="row">
       <Button variant="text">Text</Button>
       <Button variant="contained">Contained</Button>
       <Button variant="outlined">Outlined</Button>
     </Stack>
   );
 }