use mdx-loader instead of mdx.macro

docs/getting-started/create-react-app.md

@@ -1,34 +1,54 @@
 # Create React App
 
-Please note there’s a [known bug][] with
-the macro so live reloading doesn’t
-currently work.
-
 With Create React App you will need to use
-[`mdx.macro`][mdx-macro].
+[`mdx-loader`][mdx-loader].
 
 ```sh
 npx create-react-app my-app
-yarn add mdx.macro
+yarn add mdx-loader --dev
+```
+
+Then create a `.babelrc` file in the root level of your project with the following contents:
+
+```
+{
+    "presets": ["babel-preset-react-app"]
+}
+```
+
+Then, you can import a component from any Markdown file by prepending the filename with `!babel-loader!mdx-loader!`. For example:
+
+```
+/* eslint-disable import/no-webpack-loader-syntax */
+import MyDocument from '!babel-loader!mdx-loader!../pages/index.md'
+```
+
+Create a markdown document `src/document.mdx`
+
+```mdx
+---
+title: My Document
+---
+
+This is **markdown** with <span style={{ color: "red" }}>JSX</span>!
+
 ```
 
 Then create the following `src/App.js`:
 
 ```js
 // src/App.js
 
-import React, { lazy, Component, Suspense } from 'react';
-import { importMDX } from 'mdx.macro';
-
-const Content = lazy(() => importMDX('./Content.mdx'));
-
+import React, { Component } from 'react'
+/* eslint-disable import/no-webpack-loader-syntax */
+import Document, { frontMatter, tableOfContents } from '!babel-loader!mdx-loader!./document.mdx'
+
 class App extends Component {
   render() {
     return (
       <div>
-        <Suspense fallback={<div>Loading...</div>}>
-          <Content />
-        </Suspense>
+        <h1>{frontMatter.title}</h1>
+        <Document />
       </div>
     );
   }
@@ -37,16 +57,8 @@ class App extends Component {
 export default App;
 ```
 
-And then create the following `src/Content.mdx`:
-
-```md
-# Hello, world!
-```
-
 [See the full example][cra-example]
 
-[mdx-macro]: https://www.npmjs.com/package/mdx.macro
+[mdx-loader]: https://www.npmjs.com/package/mdx-loader
 
 [cra-example]: https://github.com/mdx-js/mdx/tree/master/examples/create-react-app
-
-[known bug]: https://github.com/facebook/create-react-app/issues/5580

examples/create-react-app/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "mdx.macro": "^0.2.8",
+    "mdx-loader": "^3.0.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-scripts": "2.1.8"

examples/create-react-app/src/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["babel-preset-react-app"]
+}

examples/create-react-app/src/App.js

@@ -1,18 +1,18 @@
-import React, {lazy, Component, Suspense} from 'react'
-import {importMDX} from 'mdx.macro'
-
-const Content = lazy(() => importMDX('./Content.mdx'))
-
+import React, { Component } from 'react'
+/* eslint-disable import/no-webpack-loader-syntax */
+import Content, { frontMatter } from '!babel-loader!mdx-loader!./Content.mdx'
+
 class App extends Component {
+
   render() {
     return (
       <div>
-        <Suspense fallback={<div>Loading...</div>}>
-          <Content />
-        </Suspense>
+        <h1>{frontMatter.title}</h1>
+        <Content />
+        <h3>Table of Contents</h3>
       </div>
-    )
+    );
   }
 }
 
-export default App
+export default App;

examples/create-react-app/src/Content.mdx

@@ -1,8 +1,11 @@
+---
+title: My Content
+---
+
 export const Demo = () => (
   <div style={{ padding: 20, backgroundColor: "tomato" }} />
 );
 
-# Hello, world!
-
-<Demo />
+This is **markdown** with <span style={{ color: "red" }}>JSX</span>!
 
+<Demo />