Web Development with React: Building Modern Interfaces

React is a popular JavaScript library for building user interfaces. Learn how to create modern web applications with React.

Why React?

• Component-based: Build encapsulated components
• Declarative: Describe UI state efficiently
• Virtual DOM: Fast rendering performance
• Rich ecosystem: Tools and libraries available

Setting Up React

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

Components

Functional Components

jsx
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

State with Hooks

jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Props

Props pass data from parent to child:

jsx
function UserCard({ user }) {
  return (
    <div className="card">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Usage
<UserCard user={{ name: 'John', email: 'john@example.com' }} />

Lifecycle with useEffect

jsx
import { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

Best Practices

• Keep components small and focused
• Use meaningful component names
• Avoid props drilling with Context
• Write tests for critical components