render() — react Function Reference

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

Function javascript BabelCompiler Entrypoint calls 2

Entity Profile

BabelCompiler→ Entrypoint→ render() — react Function Reference

Dependency Diagram

graph TD
  fab813e3_12c8_f97c_4ba0_4d6f53b355b8["render()"]
  5da5f467_94f5_8e23_e6c0_4c29950d8542["Hydration"]
  fab813e3_12c8_f97c_4ba0_4d6f53b355b8 -->|defined in| 5da5f467_94f5_8e23_e6c0_4c29950d8542
  1e03480c_7f31_6e6a_5dc9_22841e2105d8["reactPaths()"]
  fab813e3_12c8_f97c_4ba0_4d6f53b355b8 -->|calls| 1e03480c_7f31_6e6a_5dc9_22841e2105d8
  5bbf2272_9d62_8ee8_e825_12839da5602d["render()"]
  fab813e3_12c8_f97c_4ba0_4d6f53b355b8 -->|calls| 5bbf2272_9d62_8ee8_e825_12839da5602d
  style fab813e3_12c8_f97c_4ba0_4d6f53b355b8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/hydration/index.js lines 85–127

  render() {
    const {code, error, hydrate, version} = this.state;
    const src =
      '/renderer.html?' + qs.stringify({hydrate, ...reactPaths(version)});

    return (
      <div className="hydration">
        <header className="hydration-options">
          <label htmlFor="hydrate">
            <input
              id="hydrate"
              name="hydrate"
              type="checkbox"
              checked={hydrate}
              onChange={this.setCheckbox}
            />
            Auto-Hydrate
          </label>

          <label htmlFor="hydration_version">
            Version:
            <VersionPicker
              id="hydration_version"
              name="hydration_version"
              version={version}
              onChange={this.setVersion}
            />
          </label>
        </header>

        <CodeEditor code={code} onChange={this.setCode} />

        <CodeError error={error} className="hydration-code-error" />

        <iframe
          ref={this.setFrame}
          className="hydration-sandbox"
          title="Hydration Preview"
          src={src}
        />
      </div>
    );
  }