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, 0 dependents.

File javascript BabelCompiler Optimization 10 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f["App.js"]
  3c19db13_4295_a35d_8429_d706204acf47["Button.js"]
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f --> 3c19db13_4295_a35d_8429_d706204acf47
  0a76d3e2_5cf4_088d_5968_741bffc0731d["Button"]
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f --> 0a76d3e2_5cf4_088d_5968_741bffc0731d
  427ce39f_dbe6_0025_36a9_def9ad6283ce["Form.js"]
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f --> 427ce39f_dbe6_0025_36a9_def9ad6283ce
  a34c82fb_0377_6ebb_f68c_cfa44d4aa073["Form"]
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f --> a34c82fb_0377_6ebb_f68c_cfa44d4aa073
  6b95c06f_215b_1e97_d47c_b54ecfe66630["actions.js"]
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f --> 6b95c06f_215b_1e97_d47c_b54ecfe66630
  78dc8f17_43b6_3421_2685_b9f0cbefe92d["like"]
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f --> 78dc8f17_43b6_3421_2685_b9f0cbefe92d
  82a45ccc_bcac_3e6c_85bc_df2435d5cede["greet"]
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f --> 82a45ccc_bcac_3e6c_85bc_df2435d5cede
  3e0d412c_f90b_2377_85dc_6cf00321729c["ServerState.js"]
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f --> 3e0d412c_f90b_2377_85dc_6cf00321729c
  2766123c_1c21_1780_8b08_9d9d9ff74b1b["getServerState"]
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f --> 2766123c_1c21_1780_8b08_9d9d9ff74b1b
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  style eef5c2d6_5cd1_257d_9f3d_8561e1cce25f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import * as React from 'react';

import Button from './Button.js';
import Form from './Form.js';

import {like, greet} from './actions.js';

import {getServerState} from './ServerState.js';

const h = React.createElement;

export default async function App() {
  const res = await fetch('http://localhost:3001/todos');
  const todos = await res.json();
  return h(
    'html',
    {
      lang: 'en',
    },
    h(
      'head',
      null,
      h('meta', {
        charSet: 'utf-8',
      }),
      h('meta', {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      }),
      h('title', null, 'Flight'),
      h('link', {
        rel: 'stylesheet',
        href: '/src/style.css',
        precedence: 'default',
      })
    ),
    h(
      'body',
      null,
      h(
        'div',
        null,
        h('h1', null, getServerState()),
        h(
          'ul',
          null,
          todos.map(todo =>
            h(
              'li',
              {
                key: todo.id,
              },
              todo.text
            )
          )
        ),
        h(Form, {
          action: greet,
        }),
        h(
          'div',
          null,
          h(
            Button,
            {
              action: like,
            },
            'Like'
          )
        )
      )
    )
  );
}

Domain

Subdomains

Functions

Dependencies

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, Optimization subdomain.
What functions are defined in App.js?
App.js defines 1 function(s): App.
What does App.js depend on?
App.js imports 10 module(s): Button, Button.js, Form, Form.js, ServerState.js, actions.js, getServerState, greet, and 2 more.
Where is App.js in the architecture?
App.js is located at fixtures/flight-esm/src/App.js (domain: BabelCompiler, subdomain: Optimization, directory: fixtures/flight-esm/src).

Analyze Your Own Codebase

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

Try Supermodel Free