Introduction to React

UI = f(state)

// Functional component (modern)
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// Using the component
export default function App() {
  return <Greeting name="Alice" />;
}

const element = <h1>Hello, World!</h1>;

const Component = () => {
  const name = "Alice";
  return (
    <div>
      <h1>Welcome, {name}!</h1>
      <p>This is JSX.</p>
    </div>
  );
};

// JSX
<div className="container">Hello</div>

// Compiles to
React.createElement("div", { className: "container" }, "Hello");

interface CardProps {
  title: string;
  description: string;
  onLearnMore: () => void;
}

const Card = ({ title, description, onLearnMore }: CardProps) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
      <button onClick={onLearnMore}>Learn More</button>
    </div>
  );
};

// Using it
export default function App() {
  return (
    <Card
      title="React Basics"
      description="Learn React fundamentals"
      onLearnMore={() => console.log("Clicked!")}
    />
  );
}

import { useState } from "react";

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

  const increment = () => setCount(count + 1);

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

import { useState, useEffect, useContext } from "react";

// useState: manage local state
const [value, setValue] = useState("");

// useEffect: run side effects after render
useEffect(() => {
  console.log("Component mounted!");
  
  return () => {
    console.log("Component unmounting");
  };
}, []); // Dependency array

// useContext: access context values
const theme = useContext(ThemeContext);

const Component = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <Dashboard />;
  }
  return <Login />;
};

// Or using ternary
return isLoggedIn ? <Dashboard /> : <Login />;

// Or using &&
return isLoggedIn && <Dashboard />;

const TodoList = ({ todos }) => {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

const Form = () => {
  const [input, setInput] = useState("");

  const handleChange = (e) => {
    setInput(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submitted:", input);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={input} 
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

// Bad: Complex parent component
const Page = () => {
  // 500 lines of code
};

// Good: Composed from smaller components
const Page = () => {
  return (
    <div>
      <Header />
      <MainContent />
      <Sidebar />
      <Footer />
    </div>
  );
};