02_Using React with CDN (Without JSX) - Maniconserve/React-Wiki GitHub Wiki

Step 1: Create index.html 

<!DOCTYPE html>
<html>
<head>
    <title>React Without JSX</title>
</head>
<body>

    <div id="root"></div>

    <!-- React CDN -->
    <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>

    <!-- Your JS file -->
    <script src="app.js"></script>

</body>
</html>

Step 2: Create app.js 

// Creating element without JSX
const element = React.createElement(
    "h1",
    null,
    "Hello React without JSX 👋"
);

// Render to DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);

Step 3: Run the App

  • Keep both files in same folder
  • Open index.html in browser

👉 Your React app will run without JSX

Why we are NOT using this approach

❌ 1. Code is Hard to Read

React.createElement("h1", null, "Hello")

👉 Looks complex compared to JSX:

<h1>Hello</h1>

❌ 2. Difficult for Large UI

  • Nested elements become messy
  • Hard to maintain

❌ 3. No Component Structure

  • Not easy to organize code into reusable components

❌ 4. Not Industry Practice

  • Real-world apps use JSX + build tools

Why we use JSX instead

✅ Easy to Write

Looks like HTML → easier to understand

✅ Better Structure

Components are clean and reusable

✅ Better Developer Experience

Less code, more clarity

Summary

  • CDN + no JSX → Good for basics
  • JSX + tools → Best for real projects
⚠️ **GitHub.com Fallback** ⚠️