Code Splitting in React

Blog.jsx

import React from 'react';

export function Blog(props) {
  // const [posts] = useState(props.posts);
  return (
    props.posts.map(({ id, title, body }) => {
      return (
        <article key={id}>
          <h3>{title}</h3>
          <div>{body}</div>
        </article>
      )
    })
  );
}

export default Blog;

Gallery.jsx

import React from 'react';

export function Gallery() {
  return (
    <>
      <h2>Gallery Page</h2>
      <section>
        <img src="//picsum.photos/id/1/500/500" alt="picsum" />
        <img src="//picsum.photos/id/2/500/500" alt="picsum" />
        <img src="//picsum.photos/id/3/500/500" alt="picsum" />
        <img src="//picsum.photos/id/4/500/500" alt="picsum" />
        <img src="//picsum.photos/id/5/500/500" alt="picsum" />
        <img src="//picsum.photos/id/6/500/500" alt="picsum" />
        <img src="//picsum.photos/id/7/500/500" alt="picsum" />
        <img src="//picsum.photos/id/8/500/500" alt="picsum" />
        <img src="//picsum.photos/id/9/500/500" alt="picsum" />
      </section>
    </>
  );
}

export default Gallery;

Home.jsx

import React from 'react';

export function Home() {
  return (
    <>
      <h2>Welcome, mortals.</h2>
    </>
  );
}

export default Home;

index.jsx

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Loadable from 'react-loadable';

const Home = Loadable({
  loader: () => import('./pages/Home'),
  loading: () => <h2>Loading...</h2>
});

const Gallery = Loadable({
  loader: () => import('./pages/Gallery'),
  loading: () => <h2>Loading...</h2>
});

const Blog = Loadable.Map({
  loader: {
    Blog: () => import('./pages/Blog'),
    posts: () => fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json()),
  },
  loading: () => <h2>Loading...</h2>,
  render(loaded, props) {
    let Blog = loaded.Blog.default;
    let posts = loaded.posts;
    return <Blog {...props} posts={posts} />;
  },
});

function App() {
  return (
    <BrowserRouter>
      <h1>Let's Learn Code Splitting!</h1>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/gallery">Gallery</Link></li>
        <li><Link to="/blog">Blog</Link></li>
      </ul>
      <hr />
      <main>
        <Route exact path="/" component={Home} />
        <Route exact path="/gallery" component={Gallery} />
        <Route exact path="/blog" component={Blog} />
      </main>
    </BrowserRouter>
  )
}

render(<App />, document.getElementById('root'));

zzzzzz.jsx

/**
 *  DON'T DO THIS
 *  This is only here for history's sake
 *  React Class Components should forever be forgotten
 */

class MyComponent extends React.Component {
  state = {
    Bar: null
  };

  componentWillMount() {
    import('./components/Bar').then(Bar => {
      this.setState({ Bar: Bar.default });
    });
  }

  render() {
    let {Bar} = this.state;
    if (!Bar) {
      return <div>Loading...</div>;
    } else {
      return <Bar/>;
    };
  }
}