Fix some code splitting docs inconsistencies.

Author: timdorr

packages/react-router-dom/docs/guides/code-splitting.md

@@ -1,16 +1,8 @@
 # Code Splitting
 
-One great feature of the web is that we don't have to make our visitors
-download the entire app before they can use it. You can think of code splitting
-as incrementally downloading the app. To accomplish this we'll use [webpack],
-[`babel-plugin-syntax-dynamic-import`], and [`react-loadable`].
+One great feature of the web is that we don't have to make our visitors download the entire app before they can use it. You can think of code splitting as incrementally downloading the app. To accomplish this we'll use [webpack], [`babel-plugin-syntax-dynamic-import`], and [`react-loadable`].
 
-[webpack] has built-in support for [dynamic imports][import]; however, if you
-are using [Babel] (e.g., to compile JSX to JavaScript) then you will need to
-use the [`babel-plugin-syntax-dynamic-import`] plugin. This is a syntax-only
-plugin, meaning Babel won't do any additional transformations. The plugin
-simply allows Babel to parse dynamic imports so webpack can bundle them as a
-code split. Your `.babelrc` should look something like this:
+[webpack] has built-in support for [dynamic imports][import]; however, if you are using [Babel] (e.g., to compile JSX to JavaScript) then you will need to use the [`babel-plugin-syntax-dynamic-import`] plugin. This is a syntax-only plugin, meaning Babel won't do any additional transformations. The plugin simply allows Babel to parse dynamic imports so webpack can bundle them as a code split. Your `.babelrc` should look something like this:
 
 ```json
 {
@@ -23,53 +15,29 @@ code split. Your `.babelrc` should look something like this:
 }
 ```
 
-[`react-loadable`] is a higher-order component for loading components with
-dynamic imports. It handles all sorts of edge cases automatically and makes
-code splitting simple! Here's an example of how to use [`react-loadable`]:
+[`react-loadable`] is a higher-order component for loading components with dynamic imports. It handles all sorts of edge cases automatically and makes code splitting simple! Here's an example of how to use [`react-loadable`]:
 
 ```js
-import loadable from 'react-loadable';
-import Loading from './my-loading-component';
+import Loadable from 'react-loadable';
+import Loading from './Loading';
 
-// components load their module for initial visit
-const About = (props) => (
-  <Bundle load={loadAbout}>
-    {(About) => <About {...props}/>}
-  </Bundle>
-)
+const LoadableComponent = Loadable({
+  loader: () => import('./Dashboard'),
+  loading: Loading,
+})
 
-const Dashboard = (props) => (
-  <Bundle load={loadDashboard}>
-    {(Dashboard) => <Dashboard {...props}/>}
-  </Bundle>
-)
-
-class App extends React.Component {
-  componentDidMount() {
-    // preloads the rest
-    loadAbout(() => {})
-    loadDashboard(() => {})
-  }
-
-export default class App extends React.Component {
+export default class LoadableDashboard extends React.Component {
   render() {
-    return <LoadableComponent/>;
+    return <LoadableComponent />;
   }
 }
 ```
 
-That's all there is to it! Simply use `LoadableComponent` (or whatever you
-named your component) and it will automatically be loaded and rendered when you
-use it in your application. The `loader` option is a function which actually
-loads the component, and `loading` is a placeholder component to show while the
-real component is loading.
+That's all there is to it! Simply use `LoadableDashboard` (or whatever you named your component) and it will automatically be loaded and rendered when you use it in your application. The `loader` option is a function which actually loads the component, and `loading` is a placeholder component to show while the real component is loading.
 
 ## Code Splitting and Server-Side Rendering
 
-[`react-loadable`] includes [a guide for server-side rendering][ssr]. All you
-should need to do is include [`babel-plugin-import-inspector`] in your
-`.babelrc` and server-side rendering should just work™. Here is an example
-`.babelrc` file:
+[`react-loadable`] includes [a guide for server-side rendering][ssr]. All you should need to do is include [`babel-plugin-import-inspector`] in your `.babelrc` and server-side rendering should just work™. Here is an example `.babelrc` file:
 
 ```json
 {