⚙️ Setting Up React

React can be added to your project in multiple ways. You can start small by embedding it into an HTML page or go full-scale with modern build tools like Vite or Create React App (CRA).

📄 Option 1: Use React via CDN (Quick Start)

This is great for beginners or small experiments without needing a build process.

<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(React.createElement('h1', null, 'Hello React!'));
    </script>
  </body>
</html>

🚀 Option 2: Create React App (CRA)

CRA is an official way to scaffold a React project with zero config.

npx create-react-app my-app
cd my-app
npm start

This creates a project with Webpack, Babel, hot reload, and production build setup—all ready to go.

⚡ Option 3: Vite + React (Recommended)

Vite is faster and more modern than CRA, perfect for new projects.

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Vite offers instant dev start, faster builds, and ES modules support out of the box.

📌 Summary

Use CDN for learning or testing without a build setup
Use Create React App for simplicity and full setup
Use Vite for faster, modern development experience

← Previous: React vs Vanilla JS / Angular / Vue Next: Your First React App →