What is React and Why Use It for Web Development?

// Import React library for component creation
import React from 'react';

// Define a functional component named Welcome
function Welcome() {
  // Return JSX to render a greeting
  return <h1>Welcome to React!</h1>;
}

// Export the component for use in other files
export default Welcome;

// Import React and useState for managing state
import React, { useState } from 'react';

function ItemList() {
  // Initialize state for list items
  const [items, setItems] = useState(['Item 1', 'Item 2']);

  // Add a new item to the list
  const addItem = () => {
    setItems([...items, `Item ${items.length + 1}`]);
  };

  // Render the list and a button to add items
  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ItemList;

// Import React for component creation
import React from 'react';

// Define a Card component with props for customization
function ProductCard({ title, price }) {
  // Render a styled product card
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
      <h2>{title}</h2>
      <p>Price: ${price}</p>
      <button>Add to Cart</button>
    </div>
  );
}

// Export the component
export default ProductCard;

// Import React and the ProductCard component
import React from 'react';
import ProductCard from './ProductCard';

function Shop() {
  // Render multiple product cards
  return (
    <div>
      <ProductCard title="Laptop" price={999} />
      <ProductCard title="Phone" price={499} />
    </div>
  );
}

export default Shop;

// pages/index.js in a Next.js project
// Import React for component creation
import React from 'react';

// Define a Home page component
function Home() {
  // Return JSX with SEO-friendly content
  return (
    <div>
      <h1>Welcome to Our React App</h1>
      <p>Learn React for web development with this beginner guide.</p>
    </div>
  );
}

// Export the component for SSR
export default Home;

// Import React and React Router components
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

// Define Home and About components
function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

// Define the main App component
function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

export default App;