React Declarative Model

The React declarative model means you describe what the UI should look like for a given state, and React figures out how to make the UI match that description.

You don’t tell React how to update the DOM step by step — you tell it what the UI should be.

Imperative (what to do)

You manually describe every step:

Finding elements
Mutating them
Managing timing and order

const button =document.querySelector("button");
button.disabled =true;
button.textContent ="Loading...";

Aspect	Declarative (React Model)	Imperative (Vanilla JavaScript)
Focus	What the final UI should be (the desired result).	How to achieve the result (step-by-step instructions).
DOM	Abstracts away direct DOM manipulation. You use JSX to describe components.	Requires manual selection and modification of specific DOM elements (e.g., `document.createElement`, `element.appendChild`).
Updates	React uses a Virtual DOM to compare the new and old UI descriptions and apply only necessary changes.	The developer must explicitly write code to handle all possible updates, additions, and removals for every state change.
Analogy	Telling a butler, "I want dinner with chicken".	Giving a butler detailed instructions: "Go to the kitchen, open the fridge, remove the chicken...".

Declarative (what it should be)

React handles:

When to update
What changed
How to apply DOM updates

You describe the desired UI:

<button disabled={isLoading}>
  {isLoading ?"Loading..." :"Submit"}
</button>

JSX Components + Elements

UI is represented by Tree of Components
final webpages React produces are made up of HTML, CSS, JS

Screenshot 2026-01-13 at 8.34.53 AM.png

Screenshot 2026-01-13 at 8.42.01 AM.png

JSX
- syntax extension to JS used by React to describe UI appearance
- looks like HTML but combines markup + logic into a component
Elements
- intermediary representation of JSX tree starting from root
- represents final HTML as plain objects
- consists of type, and props
- elements can be nested via children
- generates tree → compares to prev → calculates difference → applies minimal changes

component composition

Screenshot 2026-01-13 at 8.53.38 AM.png

containment

component does not know what children it will render
- use children prop to pass children directly as content - any valid JSX
- ex. Dialogue(props) uses {props.children} directly as content

specialization

defines components as being special cases of other components
- uses generic component and adds specific content
- ex. ConfirmationDialogue() is a special case of Dialogue()

containment + specialization in action

Screenshot 2026-01-13 at 9.15.36 AM.png

Screenshot 2026-01-13 at 9.16.45 AM.png

generic components

Button → uses children prop to specify its text
Alert → generic box that renders an overlay in the background and a white modal in the center of the screen, the children prop determines content of the modal

specialization

DeleteButton → render Button component, configure properties to set color + text

containment

Alert → wrap around valid JSX to add as children

Screenshot 2026-01-13 at 9.27.00 AM.png

types of children

String Literals

**// children** prop in **MyComponent** will be simply the string “Little Lemon”
<MyComponent>Little Lemon</MyComponent>

// each div below also returns "Little Lemon"
// JSX removes white space and blank lines 
<div>    Little Lemon   </div>
 <div>
   Little Lemon
 </div>
<div>

  Little Lemon
</div>

// JSX turns new line in middle of string into space 
<div>
  Little
  Lemon
</div>

JSX Elements

// provide JSX elements as children to display nested components
<Alert>
  <Title />
  <Body />
</Alert>

// JSX enables mixing and matching diff types of children
<Alert>
  <div>Are you sure?</div>
  <Body />
</Alert>

React Fragments - group list of children without adding extra nodes to DOM

// explicit component imported from React
return (
  <React.Fragment>
    <li>Pizza margarita</li>
    <li>Pizza diavola</li>
  </React.Fragment>
);

// empty tags - shorter syntax for fragment
return (
  <>
    <li>Pizza margarita</li>
    <li>Pizza diavola</li>
  </>
);

JavaScript Expressions - pass as children by enclosing with {}

// these expressions are identical
<MyComponent>Little Lemon</MyComponent>
<MyComponent>{'Little Lemon'}</MyComponent>

// helpful when rendering list of JSX elements of arbitrary length
function Dessert(props) {
  return <li>{props.title}</li>;
}
function List() {
  const desserts = ['tiramisu', 'ice cream', 'cake'];
  return (
    <ul>
      {desserts.map((dessert) => <Item key={dessert} title={dessert} />)}
    </ul>
  );
}

// mix JavaScript expressions with other types of children
function Hello(props) {
  return <div>Hello {props.name}!</div>;
}

Functions
- if you insert a JavaScript expression inside JSX, React will evaluate it to a string, a React element, or a combination of the two
- children prop - can be used to pass any type of data, like functions
- Function as children is a React pattern used to abstract shared functionality