App.js — react Source File

Architecture documentation for App.js, a javascript file in the react codebase. 7 imports, 1 dependents.

File javascript BabelCompiler Entrypoint 7 imports 1 dependents 2 functions

Entity Profile

BabelCompiler→ Entrypoint→ App.js — react Source File

Dependency Diagram

graph LR
  2ac07f38_7629_1826_9c17_b19c4725106e["App.js"]
  3b405302_4c58_97ae_9637_2c6ba3e025c2["HomePage.js"]
  2ac07f38_7629_1826_9c17_b19c4725106e --> 3b405302_4c58_97ae_9637_2c6ba3e025c2
  41cc6d5d_41f6_55b6_45fc_a1907683167e["HomePage"]
  2ac07f38_7629_1826_9c17_b19c4725106e --> 41cc6d5d_41f6_55b6_45fc_a1907683167e
  367386fb_0810_3989_407d_4f7672d39325["AboutPage.js"]
  2ac07f38_7629_1826_9c17_b19c4725106e --> 367386fb_0810_3989_407d_4f7672d39325
  86fc12ce_79d6_69d1_a3cd_e48c9b17256a["AboutPage"]
  2ac07f38_7629_1826_9c17_b19c4725106e --> 86fc12ce_79d6_69d1_a3cd_e48c9b17256a
  361ac9eb_af59_6b57_df64_dc69bf6f3c07["./shared/ThemeContext"]
  2ac07f38_7629_1826_9c17_b19c4725106e --> 361ac9eb_af59_6b57_df64_dc69bf6f3c07
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  2ac07f38_7629_1826_9c17_b19c4725106e --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  8cf8b705_304d_a1e9_84ae_9f2ae5e546b6["react-router-dom"]
  2ac07f38_7629_1826_9c17_b19c4725106e --> 8cf8b705_304d_a1e9_84ae_9f2ae5e546b6
  0c749210_ac4c_fcce_decc_9e31b446c5e6["index.js"]
  0c749210_ac4c_fcce_decc_9e31b446c5e6 --> 2ac07f38_7629_1826_9c17_b19c4725106e
  style 2ac07f38_7629_1826_9c17_b19c4725106e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import React from 'react';
import {useState, Suspense} from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';

import HomePage from './HomePage';
import AboutPage from './AboutPage';
import ThemeContext from './shared/ThemeContext';

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>
  );
}

function Spinner() {
  return null;
}