View loadable-components-app-complete.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route } from 'react-router-dom'
import loadable, { loadComponents } from 'loadable-components'
const Home = loadable(() => import('./Home'))
const About = loadable(() => import('./About'))
const Topics = loadable(() => import('./Topics'))
const App = () =>
View loadable-components-server-complete.js
import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router'
import { getLoadableState } from 'loadable-components/server'
import App from './App'
const app = (
<StaticRouter>
<App />
</StaticRouter>
View loadable-components-server-tree.js
import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router'
import { getLoadableState } from 'loadable-components/server'
import App from './App'
const app = (
<StaticRouter>
<App />
</StaticRouter>
View loadable-components-app.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route } from 'react-router-dom'
import loadable from 'loadable-components'
const Home = loadable(() => import('./Home'))
const About = loadable(() => import('./About'))
const Topics = loadable(() => import('./Topics'))
const App = () =>
View basic-async-component.js
import React from 'react'
class Home extends React.Component {
state = { Component: null }
componentWillMount() {
import('./Home').then(Component => {
this.setState({ Component })
})
}
View loadable-components-basic-app.js
import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
import Topics from './Topics'
const App = () =>
<BrowserRouter>
<div>
<ul>
View basic-code-splitting.js
// 'a' will be part of my main chunk
import a from 'a'
// 'b' will be loaded from another chunk
import('b').then(b => {
console.log(`hello ${a} ${b}`)
})
View Routes.js
import { asyncComponent } from 'loadable-components'
export const Home = asyncComponent(() => import('client/Home'))
View withHandlers.js
import { Component } from 'react'
import createEagerFactory from './createEagerFactory'
import createHelper from './createHelper'
const mapValues = (obj, func) => {
const result = []
let i = 0
/* eslint-disable no-restricted-syntax */
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
View wrapInto.js
import React from 'react';
import identity from './identity';
import createHelper from 'recompose/createHelper';
import createEagerElement from 'recompose/createEagerElement';
export default createHelper((Wrapper, mapProps) => Component => props => {
mapProps = mapProps || identity;
return (
<Wrapper {...mapProps(props)}>
{createEagerElement(Component, props)}