The recommended way to start a new React project today is a build tool like Vite, which sets up a development server with fast hot-reloading and bundles your code for production — Create React App, the older standard tool, has fallen out of favor and is no longer actively recommended for new projects. For quick experiments or embedding React into an existing non-React page without a build step, you can instead load React and ReactDOM directly via script tags from a CDN, though this approach doesn't support JSX without an in-browser transpiler like Babel, which adds noticeable overhead unsuitable for production use.
1Understanding Installation of React
The recommended way to start a new React project today is a build tool like Vite, which sets up a development server with fast hot-reloading and bundles your code for production — Create React App, the older standard tool, has fallen out of favor and is no longer actively recommended for new projects. For quick experiments or embedding React into an existing non-React page without a build step, you can instead load React and ReactDOM directly via script tags from a CDN, though this approach doesn't support JSX without an in-browser transpiler like Babel, which adds noticeable overhead unsuitable for production use.
Prefer a build tool like Vite over CDN script tags for anything beyond a tiny experiment — CDN-based setups require an in-browser Babel transpiler to use JSX at all, which is slow and not suitable for a real, production application.
# Terminal
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev2Practical Example
Here is a real-world application of Installation of React showing how it is used in production React code.
<!-- Quick CDN setup, no build step -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script>
const e = React.createElement;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(e('h1', null, 'Hello from CDN React!'));
</script>3Best Practices
Follow these guidelines when working with Installation of React:
1. Use Vite, or a meta-framework like Next.js, to scaffold new React projects, rather than the now-outdated Create React App
2. Reserve CDN-based script-tag setups for small experiments or embedding React into an existing static page, not full applications
3. Keep React and ReactDOM versions in sync, since mismatched versions between the two packages can cause subtle runtime errors
Tip: Prefer a build tool like Vite over CDN script tags for anything beyond a tiny experiment — CDN-based setups require an in-browser Babel transpiler to use JSX at all, which is slow and not suitable for a real, production application.
# Terminal
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev