[docs] Update Material UI code snippets for React 18

[samuelsycamore]

This PR updates all pages in the Material UI docs with code snippets that feature the deprecated way of rendering:

ReactDOM.render(<App />, document.querySelector('#app'));

EDIT: all instances have been removed (rather than being replaced).

[mui-bot]

Details of bundle changes

@material-ui/core: parsed: +Infinity% , gzip: +Infinity%
@material-ui/lab: parsed: +Infinity% , gzip: +Infinity%
@material-ui/styles: parsed: +Infinity% , gzip: +Infinity%
@material-ui/private-theming: parsed: +Infinity% , gzip: +Infinity%
@material-ui/system: parsed: +Infinity% , gzip: +Infinity%
@material-ui/unstyled: parsed: +Infinity% , gzip: +Infinity%
@material-ui/utils: parsed: +Infinity% , gzip: +Infinity%
@mui/material-next: parsed: +Infinity% , gzip: +Infinity%
@mui/joy: parsed: +Infinity% , gzip: +Infinity%

Generated by 🚫 dangerJS against 86ac27f

[siriwatknp]

@samuelsycamore instead of changing to React.createRoot(...), what if we remove the line. I don't see that it is necessary to have the ReactDOM.render(<App />, document.querySelector('#app')); or React.createRoot(...) in our doc. It creates a dependency on the doc which we will have to change every time React introduce new APIs.

[oliviertassinari]

what if we remove the line.

@siriwatknp For context, the idea of this line was to show that it's all that is needed, there is no provider and other some sort of configuration is needed (We used to require some configuration, I think in v0, developers were complaining about it).

[samuelsycamore]

I appreciate the point made in the intro docs to say "this is everything you need," but it does feel mostly unnecessary otherwise. I would assume that any React dev who's digging around in our docs understands how React components work and doesn't need the rendering line pointed out to them. I'm cool with just removing it entirely.

[oliviertassinari]

I would assume that any React dev who's digging around in our docs understands how React components work and doesn't need the rendering line pointed out to them

@samuelsycamore Agree. Now, this was not the purpose of showing this line of code. The purpose was to demonstrate that MuiThemeProvider or any other provider is not equired in v1 like it was in v0: https://v0.mui.com/#/get-started/usage (it was adding friction and leading to people opening annoying GitHub issues).

I think it's better to keep this line to be very clear, but if you think that it's better without, why not remove it.

[samuelsycamore]

That makes sense. In that case, I'm in favor of removing it.

[eps1lon]

Isn't this page about @mui/styles? If so then we shouldn't use React 18 APIs since that package isn't compatible with React 18.

[samuelsycamore]

Good catch @eps1lon!

[michaldudak]

I found one more occurrence of ReactDOM.render in the main readme. Would you mind updating it as well?

[oliviertassinari]

We removed the line but we didn't remove the react-dom import:

I'm fixing this in #33122