Components, Props and State

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

import { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

const element = <div />;

const element = <Welcome name="Sara" />;

function Welcome(props) {
  console.log(props); // { name: "Sara" }
  return <h1>Hello, {props.name}</h1>;
}

<Welcome name="Sara" />; // renders <h1>Hello, Sara</h1>

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

// Function component
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

// Class component
import { Component } from 'react';

class Counter extends Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>Count: {this.state.count}</button>;
  }
}

function Avatar({ person, size = 100 }) {       // destructuring + default value
  return <img src={person.imageUrl} alt={person.name} width={size} height={size} />;
}

function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageUrl: '/lin.jpg' }}   // object
      size={80}                                                // number
    />
  );
}

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

<Card title="Profile">
  <p>Name: Asha</p>
  <button>Edit</button>
</Card>

function SearchBox({ onSearch }) {
  return <input onChange={e => onSearch(e.target.value)} placeholder="Search" />;
}

function App() {
  const [query, setQuery] = useState('');
  return (
    <>
      <SearchBox onSearch={setQuery} />
      <p>Searching for: {query}</p>
    </>
  );
}

function Button(props) {
  return <button className="btn" {...props} />; // forwards onClick, disabled, type…
}

<Button onClick={save} disabled={saving}>Save</Button>

function Welcome(props) {
  props.name = 'Changed'; // ❌ never do this
  return <h1>{props.name}</h1>;
}
// In development, React freezes the props object, so this throws:
// TypeError: Cannot assign to read only property 'name' of object '#<Object>'

function sum(a, b) {
  return a + b;
}

function withdraw(account, amount) {
  account.total -= amount;
}

import { useState, useEffect } from 'react';

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => setDate(new Date()), 1000);
    return () => clearInterval(id); // clean up when the component is removed
  }, []);

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

import { Component } from 'react';

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.setState({ date: new Date() }), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) in TypeScript
root.render(<Clock />);

function Counter() {
  let count = 0;                         // reset to 0 on every render
  return <button onClick={() => { count++; console.log(count); }}>{count}</button>;
}
// Clicking logs 1, 2, 3… but the button always shows 0:
// changing a local variable doesn't trigger a re-render, and the value is lost on the next render.

<Counter />  {/* clicking this one doesn't change the other */}
<Counter />

function TemperatureInput({ label, value, onChange }) {
  return (
    <label>
      {label}: <input value={value} onChange={e => onChange(e.target.value)} />
    </label>
  );
}

function Calculator() {
  const [celsius, setCelsius] = useState('');           // single source of truth
  const fahrenheit = celsius === '' ? '' : (celsius * 9) / 5 + 32;

  return (
    <>
      <TemperatureInput label="Celsius" value={celsius} onChange={setCelsius} />
      <p>Fahrenheit: {fahrenheit}</p>
    </>
  );
}

function Profile({ user: { name, age }, role = 'guest', ...rest }) {
  return <p {...rest}>{name} ({age}) — {role}</p>;
}

class FullName extends Component {
  render() {
    const { fname, lname } = this.props;
    const { isEditing } = this.state;
    return <p>{fname} {lname}{isEditing && ' (editing)'}</p>;
  }
}

function Cart({ items }) {                  // items: prop
  const [coupon, setCoupon] = useState(''); // coupon: state
  const total = items.reduce((sum, i) => sum + i.price, 0); // derived — not state
  return <p>Total: {total} {coupon && `(coupon: ${coupon})`}</p>;
}

// Q1: What does this render after clicking the button 3 times?
function Counter() {
  let count = 0;
  return <button onClick={() => count++}>{count}</button>;
}
// Answer: always "0". count is a local variable — changing it doesn't re-render,
// and it's reset to 0 on every render. Use useState.

// Q2: Is this allowed?
function Child(props) {
  props.items.push('new');
  return <ul>{props.items.map(i => <li key={i}>{i}</li>)}</ul>;
}
// Answer: No. It mutates the parent's array (props must be treated as read-only).
// It won't throw (only the props object is frozen, not nested arrays), but it causes bugs:
// the parent's data changes without a re-render. Ask the parent to update its state instead.

// Q3: What is logged?
function Parent() {
  return <Child>Hello</Child>;
}
function Child(props) {
  console.log(props.children);
  return null;
}
// Answer: "Hello" — content between the tags is passed as props.children.

// Q4: Two <Counter /> components are rendered side by side. You click the first one twice.
// What do they show?
// Answer: "2" and "0" — each component instance has its own independent state.