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. 10 imports, 2 dependents.

File javascript BabelCompiler Entrypoint 10 imports 2 dependents 6 functions

Entity Profile

Dependency Diagram

graph LR
  c8c1265b_3279_a736_f329_80931359bbb5["App.js"]
  f24e0cb3_9507_961c_1da2_210cf8cc168e["Html.js"]
  c8c1265b_3279_a736_f329_80931359bbb5 --> f24e0cb3_9507_961c_1da2_210cf8cc168e
  321a8777_8d3e_4ae5_7c36_938212148eba["Html"]
  c8c1265b_3279_a736_f329_80931359bbb5 --> 321a8777_8d3e_4ae5_7c36_938212148eba
  73f18f56_cd4f_4d08_4192_67df7ee2733c["Spinner.js"]
  c8c1265b_3279_a736_f329_80931359bbb5 --> 73f18f56_cd4f_4d08_4192_67df7ee2733c
  50458375_6ce6_5d6c_f439_a04c2bcd4837["Spinner"]
  c8c1265b_3279_a736_f329_80931359bbb5 --> 50458375_6ce6_5d6c_f439_a04c2bcd4837
  5e3a2d74_f0d5_594f_4430_c73f4cb04035["Layout.js"]
  c8c1265b_3279_a736_f329_80931359bbb5 --> 5e3a2d74_f0d5_594f_4430_c73f4cb04035
  a46ba6f6_94ba_4406_2b7d_f6edf523d4a1["Layout"]
  c8c1265b_3279_a736_f329_80931359bbb5 --> a46ba6f6_94ba_4406_2b7d_f6edf523d4a1
  9d0a20b6_5314_b988_550e_c29704a9ea2e["NavBar.js"]
  c8c1265b_3279_a736_f329_80931359bbb5 --> 9d0a20b6_5314_b988_550e_c29704a9ea2e
  c075d3f4_023c_813a_250a_680aa3e8117b["NavBar"]
  c8c1265b_3279_a736_f329_80931359bbb5 --> c075d3f4_023c_813a_250a_680aa3e8117b
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  c8c1265b_3279_a736_f329_80931359bbb5 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  d5945526_2835_924b_5d12_b5d8591b1659["react-error-boundary"]
  c8c1265b_3279_a736_f329_80931359bbb5 --> d5945526_2835_924b_5d12_b5d8591b1659
  0107ee96_891d_0242_d19d_5ee01a72a676["render.js"]
  0107ee96_891d_0242_d19d_5ee01a72a676 --> c8c1265b_3279_a736_f329_80931359bbb5
  9a34d34b_7233_c798_17fb_7a161e9a324d["index.js"]
  9a34d34b_7233_c798_17fb_7a161e9a324d --> c8c1265b_3279_a736_f329_80931359bbb5
  style c8c1265b_3279_a736_f329_80931359bbb5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import {Suspense, lazy} from 'react';
import {ErrorBoundary} from 'react-error-boundary';
import Html from './Html';
import Spinner from './Spinner';
import Layout from './Layout';
import NavBar from './NavBar';

const Comments = lazy(() => import('./Comments' /* webpackPrefetch: true */));
const Sidebar = lazy(() => import('./Sidebar' /* webpackPrefetch: true */));
const Post = lazy(() => import('./Post' /* webpackPrefetch: true */));

export default function App({assets}) {
  return (
    <Html assets={assets} title="Hello">
      <Suspense fallback={<Spinner />}>
        <ErrorBoundary FallbackComponent={Error}>
          <Content />
        </ErrorBoundary>
      </Suspense>
    </Html>
  );
}

function Content() {
  return (
    <Layout>
      <NavBar />
      <aside className="sidebar">
        <Suspense fallback={<Spinner />}>
          <Sidebar />
        </Suspense>
      </aside>
      <article className="post">
        <Suspense fallback={<Spinner />}>
          <Post />
        </Suspense>
        <section className="comments">
          <h2>Comments</h2>
          <Suspense fallback={<Spinner />}>
            <Comments />
          </Suspense>
        </section>
        <h2>Thanks for reading!</h2>
      </article>
    </Layout>
  );
}

function Error({error}) {
  return (
    <div>
      <h1>Application Error</h1>
      <pre style={{whiteSpace: 'pre-wrap'}}>{error.stack}</pre>
    </div>
  );
}

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 6 function(s): App, Comments, Content, Error, Post, Sidebar.
What does App.js depend on?
App.js imports 10 module(s): Html, Html.js, Layout, Layout.js, NavBar, NavBar.js, Spinner, Spinner.js, and 2 more.
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/ssr2/src/App.js (domain: BabelCompiler, subdomain: Entrypoint, directory: fixtures/ssr2/src).

Analyze Your Own Codebase

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

Try Supermodel Free