React · Theory

React Basics

Theory

86/94

React Basics

React basics are a triangle: a component, props in, state inside. Item shows Price (prop amount) and a qty state. Click + → qty 2 → amount 98. If you can draw that on paper, you are past ‘hello world’.

Add lists+keys and one useEffect fetch later. Skip Redux until this triangle is boring.

On screen — ₹49 then + → ₹98. Price is props. qty is state. That triangle is ‘React basics’.

Diagram

index.html  #root
      │ createRoot
      ▼
     App
      │
      ▼
    children

Exam tip

Draw the triangle with a qty example.

Example

// Basics
import { useState } from "react";

function Price({ amount }) {
  return <span>₹{amount}</span>;
}

export default function Item() {
  const [qty, setQty] = useState(1);
  return (
    <p>
      <Price amount={49 * qty} />
      <button onClick={() => setQty(qty + 1)}>+</button>
    </p>
  );
}

On screen: ₹49 then + → ₹98. Price is props. qty is state. That triangle is ‘React basics’.

Short notes

DefTriangle : component + props + state.
RuleNext : lists, effect, forms.
RememberLater : router / store.

// Basics import { useState } from "react"; function Price({ amount }) { return <span>₹{amount}</span>; } export default function Item() { const [qty, setQty] = useState(1); return ( <p> <Price amount={49 * qty} /> <button onClick={() => setQty(qty + 1)}>+</button> </p> ); }

React Basics

Example

Short notes

Questions

React Basics

Example

Short notes

Questions