render() — react Function Reference

Architecture documentation for the render() function in index.js from the react codebase.

Function javascript BabelCompiler Optimization calls 1

Entity Profile

BabelCompiler→ Optimization→ render() — react Function Reference

Dependency Diagram

graph TD
  3319db3d_ac04_b4ee_8ff2_45e1cbaadaaf["render()"]
  13e2b327_1950_c225_7e12_eed30b1f5ac7["ProgressFixture"]
  3319db3d_ac04_b4ee_8ff2_45e1cbaadaaf -->|defined in| 13e2b327_1950_c225_7e12_eed30b1f5ac7
  0a7f3ff6_eb00_3efc_0b36_1b443da3b09e["render()"]
  3319db3d_ac04_b4ee_8ff2_45e1cbaadaaf -->|calls| 0a7f3ff6_eb00_3efc_0b36_1b443da3b09e
  style 3319db3d_ac04_b4ee_8ff2_45e1cbaadaaf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/progress/index.js lines 39–84

  render() {
    return (
      <FixtureSet title="Progress">
        <TestCase title="Fill and reset progress bar">
          <TestCase.Steps>
            <li>Press enable button</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            When enabled, bar value should increase from 0% to 100% and
            backwards during three step loop: 0-1, 0-100, 0-10000. Reset button
            stops loop, sets value to 0 and max to 1.
          </TestCase.ExpectedResult>

          <Fixture>
            <div className="control-box">
              <fieldset>
                <legend>Controlled</legend>
                <progress
                  value={this.state.value}
                  max={this.state.max}></progress>
                <button
                  onClick={
                    this.state.enabled ? this.resetTest : this.startTest
                  }>
                  {this.state.enabled ? 'Reset' : 'Enable'}
                </button>
                <br />
                <span className="hint">
                  {' '}
                  max: {JSON.stringify(this.state.max)}
                </span>
                <span className="hint">
                  {' '}
                  value:{' '}
                  {JSON.stringify(
                    Math.round((this.state.value + Number.EPSILON) * 100) / 100
                  )}
                </span>
              </fieldset>
            </div>
          </Fixture>
        </TestCase>
      </FixtureSet>
    );
  }