refactor(create-vite): use named imports for react

[Knightwalker]

Description

This PR refactors the default Vite templates for React, in order to utilize named imports from react-dom/client instead of importing the entire ReactDOM namespace.

The reasons for change were:

• Clarity: Using named imports makes it explicit which part of the module is being used. This can improve code readability and maintainability.
• Potential Bundle Size Reduction: If your build system supports tree-shaking (which Vite does), using named imports can potentially reduce the bundle size by excluding unused parts of the module vs bringing in the entire ReactDOM namespace.
• Consistency: I frequently find myself and my colleagues making this adjustment when starting new projects to ensure we are using the latest React practices.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[ArnaudBarre]

• I agree for using named export.
• The temporary variable is not needed
• ! is always better than using as

[nilsingwersen]

Same should apply for typescript template for consistency right?

[bluwy]

FWIW React is still adamant with publishing in CJS, so named imports doesn't help much with treeshaking as CJS is harder to analyze. They also mention that the internals are very intertwined, so even if treeshaking works, you're not reducing by much.

[ArnaudBarre]

Yeah I know that why it was not an issue but I think this is good to follow how every other modules are imported