Your First Render
Load React from a CDN and put your first component on the screen with ReactDOM.createRoot and root.render.
Step 1 of 3
What it takes to run React in a plain HTML page
To use React without installing anything, you load three scripts from a CDN (a free public file host) right inside your HTML:
- react — the core library: how components and state work.
- react-dom — the part that actually puts React onto a real web page (the DOM).
- @babel/standalone — a translator. React code is usually written in JSX (HTML-looking markup inside JavaScript), and browsers do not understand JSX. Babel rewrites JSX into plain JavaScript the browser can run.
You then add one special script tag — <script type="text/babel"> — and write your React code inside it. The type="text/babel" is what tells Babel "translate this one before running it."
Tip — this setup is for learning only
Loading React and Babel from a CDN and translating in the browser is great for learning, but slow and not how real apps ship. Real projects translate the code ahead of time with a build tool — which is exactly what the Next.js for Beginners module teaches next.
Learn more on MDN
HTMLREAD ONLY