<repo_name>alexanderson1993/react-lazy-presentation<file_sep>/src/pages/page2.js
import React from "react";

export default () => {
  return (
    <>
      <h1>Dynamic `import()`</h1>
      <ul>
        <li>Webpack & Browserify keyword for code splitting</li>
      </ul>
    </>
  );
};
<file_sep>/src/pages/page6.js
import React from "react";

export default () => (
  <>
    <div
      style={{
        display: "flex",
        justifyContent: "space-around",
        alignItems: "center"
      }}
    >
      <img
        style={{ width: "50%" }}
        src={require("../images/before.png")}
        alt="before"
      />
      <img
        style={{ width: "50%" }}
        src={require("../images/after.png")}
        alt="after"
      />
    </div>
  </>
);
<file_sep>/src/pages/page7.js
import React from "react";

export default () => (
  <>
    <h1>Other Considerations</h1>
    <ul>
      <li>Route-based code splitting with React Router or Reach Router</li>
      <li>
        Dynamic Preload with <code>onMouseEnter</code>
      </li>
      <li>Include Error boundaries to catch 404s and request errors</li>
      <li>
        Imported modules <strong>must</strong> be default exports
      </li>
    </ul>
  </>
);
<file_sep>/src/pages/page4.js
import React from "react";
import Highlight from "react-highlight";

export default () => (
  <>
    <h1>{`<Suspense>`}</h1>
    <p>Loading fallback handler</p>
    <Highlight className="javascript">
      {`const SuspendedComp = () => (
  <Suspense fallback={<Loading />}>
    <MyComponent />
  </Suspense>
)`}
    </Highlight>
    <p>Put it somewhere in the component tree</p>
  </>
);
<file_sep>/src/pages/page8.js
import React from "react";

export default () => (
  <>
    <h1 style={{ fontSize: "100px" }}>
      <span role="img" aria-label="wave">
        👋
      </span>
    </h1>
    <ul>
      <li>
        <a href="https://reactjs.org/docs/code-splitting.html">
          https://reactjs.org/docs/code-splitting.html
        </a>
      </li>
      <li>
        <a href="https://twitter.com/ralex1993">
          https://twitter.com/ralex1993
        </a>
      </li>
      <li>
        <a href="https://github.com/alexanderson1993">
          https://github.com/alexanderson1993
        </a>
      </li>
    </ul>
  </>
);
<file_sep>/src/index.js
import React, { lazy, Suspense } from "react";
import ReactDOM from "react-dom";
import { Router, Link } from "@reach/router";
import Spinner from "react-spinkit";
import ErrorBoundary from "./ErrorBoundary";

import "./styles.css";
import "highlight.js/styles/monokai.css";

const pages = Array(8)
  .fill(0)
  .map((_, i) => lazy(() => import(`./pages/page${i + 1}.js`)));

const NavLink = props => (
  <Link
    {...props}
    getProps={({ isCurrent }) => ({ className: isCurrent ? "active" : "" })}
  />
);

function App() {
  const Page1 = pages[0];
  return (
    <div className="container">
      <div className="nav">
        <NavLink to="/">About Me</NavLink>
        <NavLink to="/page2">import()</NavLink>
        <NavLink to="/page3">React.lazy</NavLink>
        <NavLink to="/page4">{`<Suspense>`}</NavLink>
        <NavLink to="/page5" onMouseEnter={() => import(`./pages/page6.js`)}>
          All Together
        </NavLink>
        <NavLink to="/page6">Comparison</NavLink>
        <NavLink to="/page7">Considerations</NavLink>
        <NavLink to="/page8">Thanks</NavLink>
      </div>
      <div className="page">
        <ErrorBoundary>
          <Suspense
            fallback={
              <Spinner
                name="folding-cube"
                color="purple"
                fadeIn="none"
                className="big-spinner"
              />
            }
          >
            <Router>
              <Page1 path="/" />
              {pages.map((Page, i) => (
                <Page key={`page-${i}`} path={`/page${i + 1}`} />
              ))}
            </Router>
          </Suspense>
        </ErrorBoundary>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<file_sep>/src/pages/page3.js
import React from "react";
import Highlight from "react-highlight";

export default () => {
  return (
    <>
      <h1>React.lazy</h1>
      <p>Special Wrapper for `import()`</p>
      <Highlight className="javascript">
        {`const MyComponent = React.lazy(() => import('./myComponent.js'))`}
      </Highlight>
      <p />
    </>
  );
};
<file_sep>/src/pages/page5.js
import React from "react";
import Highlight from "react-highlight";

export default () => (
  <>
    <h1>All Together</h1>
    <Highlight className="javascript">
      {`const MyComponent = React.lazy(() => import('./myComponent.js'))

const SuspendedComponent = () => (
  <ErrorBoundary>
    <Suspense fallback={<Loading />}>
      <MyComponent /> {/* Only loaded when rendered.*/}
    </Suspense>
  </ErrorBoundary
)`}
    </Highlight>
  </>
);
