render() — react Function Reference

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

Function javascript BabelCompiler Entrypoint calls 1

Entity Profile

BabelCompiler→ Entrypoint→ render() — react Function Reference

Dependency Diagram

graph TD
  633b4ecd_b74f_99cf_a61c_f58be345283a["render()"]
  17fec3ba_276a_1297_1e4a_0db6ba58a1a9["MediaEvents"]
  633b4ecd_b74f_99cf_a61c_f58be345283a -->|defined in| 17fec3ba_276a_1297_1e4a_0db6ba58a1a9
  0a7f3ff6_eb00_3efc_0b36_1b443da3b09e["render()"]
  633b4ecd_b74f_99cf_a61c_f58be345283a -->|calls| 0a7f3ff6_eb00_3efc_0b36_1b443da3b09e
  style 633b4ecd_b74f_99cf_a61c_f58be345283a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/media-events/index.js lines 56–108

  render() {
    const events = Object.keys(this.state.events);
    const handlers = events.reduce((events, event) => {
      events[event] = this.eventDidFire.bind(this, event);
      return events;
    }, {});

    return (
      <FixtureSet title="Media Events">
        <TestCase
          title="Event bubbling"
          description="Media events should synthetically bubble">
          <TestCase.Steps>
            <li>Play the loaded video</li>
            <li>Pause the loaded video</li>
            <li>Play the failing video</li>
            <li>Drag the track bar</li>
            <li>Toggle the volume button</li>
            <li>
              <button onClick={this.updatePlaybackRate}>
                Click this button to increase playback rate
              </button>
            </li>
          </TestCase.Steps>

          <p className="footnote">
            Note: This test does not confirm <code>onStalled</code>,{' '}
            <code>onAbort</code>, or <code>onEncrypted</code>
          </p>

          <TestCase.ExpectedResult>
            All events in the table below should be marked as "true".
          </TestCase.ExpectedResult>

          <section {...handlers}>
            <video src="/test.mp4" width="300" controls ref={this.setVideo} />
            <video src="/missing.mp4" width="300" controls />
            <p className="footnote">
              Note: The second video will not load. This is intentional.
            </p>
          </section>
          <hr />
          <section>
            <h3>Events</h3>
            <p>The following events should bubble:</p>
            <table>
              <tbody>{events.map(this.renderOutcome, this)}</tbody>
            </table>
          </section>
        </TestCase>
      </FixtureSet>
    );
  }