Page.js — react Source File

Architecture documentation for Page.js, a javascript file in the react codebase. 5 imports, 1 dependents.

File javascript BabelCompiler Optimization 5 imports 1 dependents 1 classes

Entity Profile

BabelCompiler→ Optimization→ Page.js — react Source File

Dependency Diagram

graph LR
  44fb6700_638f_2f39_6d45_bed99b6007a5["Page.js"]
  c549fdb2_d55e_4878_6475_8654256c52bf["Theme.js"]
  44fb6700_638f_2f39_6d45_bed99b6007a5 --> c549fdb2_d55e_4878_6475_8654256c52bf
  2006907a_93ec_a00c_a175_687728579478["Suspend.js"]
  44fb6700_638f_2f39_6d45_bed99b6007a5 --> 2006907a_93ec_a00c_a175_687728579478
  e2fb6076_98e4_d34f_8973_c74a044bd6e6["Suspend"]
  44fb6700_638f_2f39_6d45_bed99b6007a5 --> e2fb6076_98e4_d34f_8973_c74a044bd6e6
  68ded4a8_e6f1_b5a1_68c7_627caf75f208["Page.css"]
  44fb6700_638f_2f39_6d45_bed99b6007a5 --> 68ded4a8_e6f1_b5a1_68c7_627caf75f208
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  44fb6700_638f_2f39_6d45_bed99b6007a5 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  0728161c_056a_6e89_5b38_6275d0ed4d04["App.js"]
  0728161c_056a_6e89_5b38_6275d0ed4d04 --> 44fb6700_638f_2f39_6d45_bed99b6007a5
  style 44fb6700_638f_2f39_6d45_bed99b6007a5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import React, {Component} from 'react';

import Theme from './Theme';
import Suspend from './Suspend';

import './Page.css';

const autofocusedInputs = [
  <input key="0" autoFocus placeholder="Has auto focus" />,
  <input key="1" autoFocus placeholder="Has auto focus" />,
];

export default class Page extends Component {
  state = {active: false, value: ''};
  handleClick = e => {
    this.setState({active: true});
  };
  handleChange = e => {
    this.setState({value: e.target.value});
  };
  componentDidMount() {
    // Rerender on mount
    this.setState({mounted: true});
  }
  render() {
    const link = (
      <a className="link" onClick={this.handleClick}>
        Click Here
      </a>
    );
    return (
      <div className={this.context + '-box'}>
        <Suspend>
          <p suppressHydrationWarning={true}>
            A random number: {Math.random()}
          </p>
          <p>Autofocus on page load: {autofocusedInputs}</p>
          <p>{!this.state.active ? link : 'Thanks!'}</p>
          {this.state.active && <p>Autofocus on update: {autofocusedInputs}</p>}
          <p>
            Controlled input:{' '}
            <input value={this.state.value} onChange={this.handleChange} />
          </p>
        </Suspend>
      </div>
    );
  }
}
Page.contextType = Theme;