React - Setup (No Bundler)

Goal

Run React directly in your browser with zero build tools, using CDN links for React and Babel. Great for learning and quick prototypes.

Prerequisites

• A modern browser and an internet connection.

Minimal HTML

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-presets="react">
  function App(){
    return <h1>Hello, React!</h1>;
  }
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
</script>

Try it now

function App(){
  return (
    <div>
      <h2>It works!</h2>
      <p>You are running React with no bundler.</p>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('try-setup'));
root.render(<App />);

We’ll switch to production builds and tooling later. For learning, this is perfect.

What each script does

• react.development.js and react-dom.development.js: React core and DOM renderer (development builds with helpful warnings).
• @babel/standalone: Compiles JSX in the browser so we can use <App /> without a build step.
• type="text/babel" with data-presets="react": Tells Babel to transform JSX to JavaScript at runtime.

Syntax primer (for newcomers)

• function App(){ ... }: A React component is just a JavaScript function that returns JSX.
• const root = ReactDOM.createRoot(...): Creates a place where React renders your component tree.
• root.render(<App />): Renders the component into the page. <App /> is JSX.

Common pitfalls

• If nothing shows, ensure the container ID matches: document.getElementById('try-setup').
• JSX must be inside a <script type="text/babel"> tag when using Babel in the browser.
• Development builds are larger/slower—fine for learning; use production builds for deployment.

Checks for Understanding

1. Why do we use type=\"text/babel\" in the script tag for JSX?
2. What’s the difference between development and production builds of React?

Exercises

1. Create a second root div and render a different component into it.
2. Show an error boundary-like fallback by wrapping render code in a try/catch and rendering a message.
3. Switch the CDN URLs to the production builds and verify everything still works.