react Architecture Docs
Home / File/ index.js — react Source File

index.js — react Source File

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

File javascript BabelCompiler Validation 2 imports 1 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  17456f08_e914_e516_fd93_bcba59546deb["index.js"]
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  17456f08_e914_e516_fd93_bcba59546deb --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  4d0c4ccc_5970_e7f9_458f_15f0290099b1["react-dom"]
  17456f08_e914_e516_fd93_bcba59546deb --> 4d0c4ccc_5970_e7f9_458f_15f0290099b1
  30d76895_4832_9ca3_9e81_e0cdf028c09c["index.js"]
  30d76895_4832_9ca3_9e81_e0cdf028c09c --> 17456f08_e914_e516_fd93_bcba59546deb
  style 17456f08_e914_e516_fd93_bcba59546deb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/** @flow */

import * as React from 'react';
import {Fragment} from 'react';
import {createPortal} from 'react-dom';

export default function Iframe(): React.Node {
  return (
    <Fragment>
      <h2>Iframe</h2>
      <div>
        <Frame>
          <Greeting />
        </Frame>
      </div>
    </Fragment>
  );
}

const iframeStyle = {border: '2px solid #eee', height: 80};

// $FlowFixMe[missing-local-annot]
function Frame(props) {
  const [element, setElement] = React.useState(null);

  const ref = React.useRef();

  React.useLayoutEffect(function () {
    const iframe = ref.current;

    if (iframe) {
      const html = `
    <!DOCTYPE html>
    <html>
    <body>
      <div id="root"></div>
    </body>
    </html>
    `;

      const document = iframe.contentDocument;

      document.open();
      document.write(html);
      document.close();

      setElement(document.getElementById('root'));
    }
  }, []);

  return (
    <Fragment>
      <iframe title="Test Iframe" ref={ref} style={iframeStyle} />
      <iframe
        title="Secured Iframe"
        src="https://example.com"
        style={iframeStyle}
      />

      {element ? createPortal(props.children, element) : null}
    </Fragment>
  );
}

function Greeting() {
  return (
    <p>
      Hello from within an <code>&lt;iframe&gt;</code>!
    </p>
  );
}

Domain

Subdomains

Functions

Dependencies

  • react
  • react-dom

Imported By

Source

Frequently Asked Questions

What does index.js do?
index.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in index.js?
index.js defines 3 function(s): Frame, Greeting, Iframe.
What does index.js depend on?
index.js imports 2 module(s): react, react-dom.
What files import index.js?
index.js is imported by 1 file(s): index.js.
Where is index.js in the architecture?
index.js is located at packages/react-devtools-shell/src/app/Iframe/index.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shell/src/app/Iframe).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free