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

App Class — react Architecture

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

Class javascript BabelCompiler

Entity Profile

Dependency Diagram

graph TD
  65a63c30_9cf8_cbd3_f517_fdb60be9c536["App"]
  b6b3cf8a_4317_6da2_264c_e7cff7c932c6["index.js"]
  65a63c30_9cf8_cbd3_f517_fdb60be9c536 -->|defined in| b6b3cf8a_4317_6da2_264c_e7cff7c932c6
  99f27261_403d_91e3_bb74_8dd116964871["getStreamData()"]
  65a63c30_9cf8_cbd3_f517_fdb60be9c536 -->|method| 99f27261_403d_91e3_bb74_8dd116964871
  889983eb_1e7d_de35_22d2_2681d55d0420["componentDidMount()"]
  65a63c30_9cf8_cbd3_f517_fdb60be9c536 -->|method| 889983eb_1e7d_de35_22d2_2681d55d0420
  0fcf5527_a274_5125_2165_bce0f6beb16e["renderOption()"]
  65a63c30_9cf8_cbd3_f517_fdb60be9c536 -->|method| 0fcf5527_a274_5125_2165_bce0f6beb16e
  180ba2a5_ca78_9a74_efcc_7a8883de46ec["render()"]
  65a63c30_9cf8_cbd3_f517_fdb60be9c536 -->|method| 180ba2a5_ca78_9a74_efcc_7a8883de46ec

Relationship Graph

Source Code

fixtures/concurrent/time-slicing/src/index.js lines 10–142

class App extends PureComponent {
  state = {
    value: '',
    strategy: 'sync',
    showDemo: true,
    showClock: false,
  };

  // Random data for the chart
  getStreamData(input) {
    if (cachedData.has(input)) {
      return cachedData.get(input);
    }
    const multiplier = input.length !== 0 ? input.length : 1;
    const complexity =
      (parseInt(window.location.search.slice(1), 10) / 100) * 25 || 25;
    const data = _.range(5).map(t =>
      _.range(complexity * multiplier).map((j, i) => {
        return {
          x: j,
          y: (t + 1) * _.random(0, 255),
        };
      })
    );
    cachedData.set(input, data);
    return data;
  }

  componentDidMount() {
    window.addEventListener('keydown', e => {
      if (e.key.toLowerCase() === '?') {
        e.preventDefault();
        this.setState(state => ({
          showClock: !state.showClock,
        }));
      }
    });
  }

  handleChartClick = e => {
    if (this.state.showDemo) {
      if (e.shiftKey) {
        this.setState({showDemo: false});
      }
      return;
    }
    if (this.state.strategy !== 'async') {
      this.setState(state => ({
        showDemo: !state.showDemo,
      }));
      return;
    }
    if (this._ignoreClick) {
      return;
    }
    this._ignoreClick = true;

    startTransition(() => {
      this.setState({showDemo: true}, () => {
        this._ignoreClick = false;
      });
    });
  };

  debouncedHandleChange = _.debounce(value => {
    if (this.state.strategy === 'debounced') {
      this.setState({value: value});
    }
  }, 1000);

  renderOption(strategy, label) {
    const {strategy: currentStrategy} = this.state;
    return (
      <label className={strategy === currentStrategy ? 'selected' : null}>
        <input
          type="radio"
          checked={strategy === currentStrategy}
          onChange={() => this.setState({strategy})}
        />
        {label}
      </label>

Domain

Defined In

Source

Frequently Asked Questions

What is the App class?
App is a class in the react codebase, defined in fixtures/concurrent/time-slicing/src/index.js.
Where is App defined?
App is defined in fixtures/concurrent/time-slicing/src/index.js at line 10.

Analyze Your Own Codebase

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

Try Supermodel Free