App() — react Function Reference

Architecture documentation for the App() function in App.js from the react codebase.

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ App() — react Function Reference

Dependency Diagram

graph TD
  78174372_d1fe_3697_ca8b_29e573fcaa61["App()"]
  2ac07f38_7629_1826_9c17_b19c4725106e["App.js"]
  78174372_d1fe_3697_ca8b_29e573fcaa61 -->|defined in| 2ac07f38_7629_1826_9c17_b19c4725106e
  style 78174372_d1fe_3697_ca8b_29e573fcaa61 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/nesting/src/modern/App.js lines 9–48

export default function App() {
  const [theme, setTheme] = useState('slategrey');

  function handleToggleClick() {
    if (theme === 'slategrey') {
      setTheme('hotpink');
    } else {
      setTheme('slategrey');
    }
  }

  return (
    <BrowserRouter>
      <ThemeContext.Provider value={theme}>
        <div style={{fontFamily: 'sans-serif'}}>
          <div
            style={{
              margin: 20,
              padding: 20,
              border: '1px solid black',
              minHeight: 300,
            }}>
            <button onClick={handleToggleClick}>Toggle Theme Context</button>
            <br />
            <Suspense fallback={<Spinner />}>
              <Switch>
                <Route path="/about">
                  <AboutPage />
                </Route>
                <Route path="/">
                  <HomePage />
                </Route>
              </Switch>
            </Suspense>
          </div>
        </div>
      </ThemeContext.Provider>
    </BrowserRouter>
  );
}