View App.js
import React from 'react'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'
const QUERY = gql`
query character {
character(id: 1) {
name
films {
id
View Node.js
class Node {
leftNodes = []
rightNodes = []
area = null
level = 0
constructor({ data = {}, context = {}, computeData = node => node.data }) {
this.data = data
this.context = context
this.computeData = computeData
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'))