render() — react Function Reference

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

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ render() — react Function Reference

Dependency Diagram

graph TD
  00545f0e_011a_f157_275e_a806f7497451["render()"]
  6311044f_10eb_ee12_ee19_7d83e663ee83["Chrome"]
  00545f0e_011a_f157_275e_a806f7497451 -->|defined in| 6311044f_10eb_ee12_ee19_7d83e663ee83
  style 00545f0e_011a_f157_275e_a806f7497451 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/ssr/src/components/Chrome.js lines 11–51

  render() {
    const assets = this.props.assets;
    return (
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="shortcut icon" href="favicon.ico" />
          <link rel="stylesheet" href={assets['main.css']} />
          <title>{this.props.title}</title>
        </head>
        <body className={this.state.theme}>
          <noscript
            dangerouslySetInnerHTML={{
              __html: `<b>Enable JavaScript to run this app.</b>`,
            }}
          />
          <Suspense fallback="Loading...">
            <Theme.Provider value={this.state.theme}>
              <div>
                <ThemeToggleButton
                  onChange={theme => {
                    startTransition(() => {
                      this.setState({theme});
                    });
                  }}
                />
              </div>
              {this.props.children}
            </Theme.Provider>
          </Suspense>
          <LargeContent />
          <script
            dangerouslySetInnerHTML={{
              __html: `assetManifest = ${JSON.stringify(assets)};`,
            }}
          />
        </body>
      </html>
    );
  }