react Architecture Docs
Home / Class/ App Class — react Architecture

App Class — react Architecture

Architecture documentation for the App class in App.js from the react codebase.

Class javascript BabelCompiler

Entity Profile

Dependency Diagram

graph TD
  72f84b20_1f9e_8954_9445_3d634de54f95["App"]
  5bd02a98_f81e_d049_4b30_df0a827f81d8["App.js"]
  72f84b20_1f9e_8954_9445_3d634de54f95 -->|defined in| 5bd02a98_f81e_d049_4b30_df0a827f81d8
  1e8ec903_b8cc_d01c_f01f_7ab46c5d8ede["constructor()"]
  72f84b20_1f9e_8954_9445_3d634de54f95 -->|method| 1e8ec903_b8cc_d01c_f01f_7ab46c5d8ede
  59ae9226_be8b_b84a_06bc_5d17f0ec0d4d["componentDidMount()"]
  72f84b20_1f9e_8954_9445_3d634de54f95 -->|method| 59ae9226_be8b_b84a_06bc_5d17f0ec0d4d
  717f296c_5c0e_d70a_b7a0_36f42d94b93a["runCode()"]
  72f84b20_1f9e_8954_9445_3d634de54f95 -->|method| 717f296c_5c0e_d70a_b7a0_36f42d94b93a
  6e024402_fbab_bcad_3b7f_7b23d116a5f0["render()"]
  72f84b20_1f9e_8954_9445_3d634de54f95 -->|method| 6e024402_fbab_bcad_3b7f_7b23d116a5f0

Relationship Graph

Source Code

fixtures/fiber-debugger/src/App.js lines 30–258

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      code: localStorage.getItem('fiber-debugger-code') || defaultCode,
      isEditing: false,
      history: [],
      currentStep: 0,
      show: {
        alt: false,
        child: true,
        sibling: true,
        return: false,
        fx: false,
      },
      graphSettings: {
        rankdir: 'TB',
        trackActive: true,
      },
    };
  }

  componentDidMount() {
    this.runCode(this.state.code);
  }

  runCode(code) {
    let currentStage;
    let currentRoot;

    ReactFiberInstrumentation.debugTool = null;
    ReactNoop.render(null);
    ReactNoop.flush();
    ReactFiberInstrumentation.debugTool = {
      onMountContainer: root => {
        currentRoot = root;
      },
      onUpdateContainer: root => {
        currentRoot = root;
      },
      onBeginWork: fiber => {
        const fibers = getFiberState(currentRoot, fiber);
        const stage = currentStage;
        this.setState(({history}) => ({
          history: [
            ...history,
            {
              action: 'BEGIN',
              fibers,
              stage,
            },
          ],
        }));
      },
      onCompleteWork: fiber => {
        const fibers = getFiberState(currentRoot, fiber);
        const stage = currentStage;
        this.setState(({history}) => ({
          history: [
            ...history,
            {
              action: 'COMPLETE',
              fibers,
              stage,
            },
          ],
        }));
      },
      onCommitWork: fiber => {
        const fibers = getFiberState(currentRoot, fiber);
        const stage = currentStage;
        this.setState(({history}) => ({
          history: [
            ...history,
            {
              action: 'COMMIT',
              fibers,
              stage,
            },
          ],
        }));

Domain

Defined In

Source

Frequently Asked Questions

What is the App class?
App is a class in the react codebase, defined in fixtures/fiber-debugger/src/App.js.
Where is App defined?
App is defined in fixtures/fiber-debugger/src/App.js at line 30.

Analyze Your Own Codebase

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

Try Supermodel Free