Anatomy of the app

app-anatomy.tsx

function App() {
  // initialState = { background: "#ccc", content: "Hello World!"}
  const [state, dispatch] = useReducer(reducer, initialState); 

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      <div className="rect" style={{ backgroundColor: state.background }}>
        <span>{state.content}</span>
      </div>
      <BackgroundControl />
      <ContentControl />
    </AppContext.Provider>
  );
}