#component-composition code explainers

typescript

import {
  Component,
  ContentChildren,
  QueryList,

Building a content-projected wizard in Angular

content-projection templateref querylist

Advanced 9 steps

javascript

import { useState } from 'react';
 
function TreeNode({ node, depth = 0 }) {
  const [expanded, setExpanded] = useState(depth === 0);

How a recursive file tree renders in React

recursion component-composition local-state

Intermediate 8 steps

javascript

import { createContext, useContext, useState, useId } from "react";
 
const AccordionContext = createContext(null);
const ItemContext = createContext(null);

Building a compound Accordion in React

context compound-components state-management

Intermediate 8 steps