react Architecture Docs
Home / File/ App.js — react Source File

App.js — react Source File

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

File javascript BabelCompiler Entrypoint 8 imports 2 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  0728161c_056a_6e89_5b38_6275d0ed4d04["App.js"]
  5c8ed2a6_fcb7_5258_d158_8bd841e362ae["Chrome.js"]
  0728161c_056a_6e89_5b38_6275d0ed4d04 --> 5c8ed2a6_fcb7_5258_d158_8bd841e362ae
  6311044f_10eb_ee12_ee19_7d83e663ee83["Chrome"]
  0728161c_056a_6e89_5b38_6275d0ed4d04 --> 6311044f_10eb_ee12_ee19_7d83e663ee83
  44fb6700_638f_2f39_6d45_bed99b6007a5["Page.js"]
  0728161c_056a_6e89_5b38_6275d0ed4d04 --> 44fb6700_638f_2f39_6d45_bed99b6007a5
  81d3f71e_2ab2_41f2_770b_38ed71640c66["Page"]
  0728161c_056a_6e89_5b38_6275d0ed4d04 --> 81d3f71e_2ab2_41f2_770b_38ed71640c66
  13f7bfc1_77c5_77e8_b0d9_3713c3a81c00["Page2.js"]
  0728161c_056a_6e89_5b38_6275d0ed4d04 --> 13f7bfc1_77c5_77e8_b0d9_3713c3a81c00
  b5595a42_f5d6_5723_acc6_19bbc220edfe["Page2"]
  0728161c_056a_6e89_5b38_6275d0ed4d04 --> b5595a42_f5d6_5723_acc6_19bbc220edfe
  c549fdb2_d55e_4878_6475_8654256c52bf["Theme.js"]
  0728161c_056a_6e89_5b38_6275d0ed4d04 --> c549fdb2_d55e_4878_6475_8654256c52bf
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  0728161c_056a_6e89_5b38_6275d0ed4d04 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  da0e9089_1e9e_0728_86ae_6672c71000c6["render.js"]
  da0e9089_1e9e_0728_86ae_6672c71000c6 --> 0728161c_056a_6e89_5b38_6275d0ed4d04
  c9453681_1cff_d38b_1024_77f7574fb65d["index.js"]
  c9453681_1cff_d38b_1024_77f7574fb65d --> 0728161c_056a_6e89_5b38_6275d0ed4d04
  style 0728161c_056a_6e89_5b38_6275d0ed4d04 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import React, {useContext, useState, Suspense} from 'react';

import Chrome from './Chrome';
import Page from './Page';
import Page2 from './Page2';
import Theme from './Theme';

function LoadingIndicator() {
  let theme = useContext(Theme);
  return <div className={theme + '-loading'}>Loading...</div>;
}

function Content() {
  let [CurrentPage, switchPage] = useState(() => Page);
  return (
    <div>
      <h1>Hello World</h1>
      <a className="link" onClick={() => switchPage(() => Page)}>
        Page 1
      </a>
      {' | '}
      <a className="link" onClick={() => switchPage(() => Page2)}>
        Page 2
      </a>
      <Suspense fallback={<LoadingIndicator />}>
        <CurrentPage />
      </Suspense>
    </div>
  );
}

export default function App({assets}) {
  return (
    <Chrome title="Hello World" assets={assets}>
      <Content />
    </Chrome>
  );
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does App.js do?
App.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Entrypoint subdomain.
What functions are defined in App.js?
App.js defines 3 function(s): App, Content, LoadingIndicator.
What does App.js depend on?
App.js imports 8 module(s): Chrome, Chrome.js, Page, Page.js, Page2, Page2.js, Theme.js, react.
What files import App.js?
App.js is imported by 2 file(s): index.js, render.js.
Where is App.js in the architecture?
App.js is located at fixtures/ssr/src/components/App.js (domain: BabelCompiler, subdomain: Entrypoint, directory: fixtures/ssr/src/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free