From 9cb7c3adf1c4c284cb8d6c23fd859ee4fbf02d05 Mon Sep 17 00:00:00 2001 From: John Otander Date: Fri, 14 Dec 2018 15:03:37 -0700 Subject: [PATCH] Update create-react-app docs to use official library (#359) * Use mdx.macro for create-react-app example Closes #358 * Update surrounding documentation * Fix linting * Nuke esling config in cra so it doesn't get picked up --- docs/getting-started/create-react-app.md | 70 +- examples/create-react-app/.gitignore | 4 +- examples/create-react-app/config-overrides.js | 23 - examples/create-react-app/package.json | 24 +- examples/create-react-app/public/index.html | 4 +- .../create-react-app/public/manifest.json | 2 +- examples/create-react-app/readme.md | 50 +- examples/create-react-app/src/App.css | 32 + examples/create-react-app/src/App.js | 18 +- examples/create-react-app/src/Content.mdx | 8 + examples/create-react-app/src/hello.md | 3 - examples/create-react-app/src/index.css | 14 + examples/create-react-app/src/index.js | 1 + examples/create-react-app/src/logo.svg | 7 + examples/create-react-app/yarn.lock | 6484 ++++++++++------- 15 files changed, 4185 insertions(+), 2559 deletions(-) delete mode 100644 examples/create-react-app/config-overrides.js create mode 100644 examples/create-react-app/src/App.css create mode 100644 examples/create-react-app/src/Content.mdx delete mode 100644 examples/create-react-app/src/hello.md create mode 100644 examples/create-react-app/src/index.css create mode 100644 examples/create-react-app/src/logo.svg diff --git a/docs/getting-started/create-react-app.md b/docs/getting-started/create-react-app.md index 122066e64..28c34c77a 100644 --- a/docs/getting-started/create-react-app.md +++ b/docs/getting-started/create-react-app.md @@ -1,44 +1,52 @@ -import { Message } from 'rebass' - # Create React App - - This docs page is a WIP - +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 -[`create-react-app-rewired`][cra-rewired] and add a `config-overrides.js`. +[`mdx.macro`][mdx-macro]. + +```sh +npx create-react-app my-app +yarn add mdx.macro +``` + +Then create the following `src/App.js`: ```js -const { getBabelLoader } = require('react-app-rewired') - -module.exports = (config, env) => { - const babelLoader = getBabelLoader(config.module.rules) - config.module.rules.map(rule => { - if (typeof rule.test !== 'undefined' || typeof rule.oneOf === 'undefined') { - return rule - } - - rule.oneOf.unshift({ - test: /\.mdx$/, - use: [ - { - loader: babelLoader.loader, - options: babelLoader.options - }, - '@mdx-js/loader' - ] - }) - - return rule - }) - - return config +// src/App.js + +import React, { lazy, Component, Suspense } from 'react'; +import { importMDX } from 'mdx.macro'; + +const Content = lazy(() => importMDX('./Content.mdx')); + +class App extends Component { + render() { + return ( +
+ Loading...
}> + + + + ); + } } + +export default App; +``` + +And then create the following `src/Content.mdx`: + +```md +# Hello, world! ``` [See the full example][cra-example] -[cra-rewired]: https://github.com/timarney/react-app-rewired +[mdx-macro]: https://www.npmjs.com/package/mdx.macro [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 diff --git a/examples/create-react-app/.gitignore b/examples/create-react-app/.gitignore index d30f40ef4..4d29575de 100644 --- a/examples/create-react-app/.gitignore +++ b/examples/create-react-app/.gitignore @@ -1,7 +1,9 @@ -# See https://help.github.com/ignore-files/ for more about ignoring files. +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules +/.pnp +.pnp.js # testing /coverage diff --git a/examples/create-react-app/config-overrides.js b/examples/create-react-app/config-overrides.js deleted file mode 100644 index 8eaece152..000000000 --- a/examples/create-react-app/config-overrides.js +++ /dev/null @@ -1,23 +0,0 @@ -const {getBabelLoader} = require('react-app-rewired') -module.exports = (config, _env) => { - const babelLoader = getBabelLoader(config.module.rules) - config.module.rules.map(rule => { - if (typeof rule.test !== 'undefined' || typeof rule.oneOf === 'undefined') { - return rule - } - - rule.oneOf.unshift({ - test: /\.mdx?$/, - use: [ - { - loader: babelLoader.loader, - options: babelLoader.options - }, - '@mdx-js/loader' - ] - }) - - return rule - }) - return config -} diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json index 681d8032d..a5352c87c 100644 --- a/examples/create-react-app/package.json +++ b/examples/create-react-app/package.json @@ -1,17 +1,23 @@ { + "name": "create-react-app", + "version": "0.1.0", "private": true, - "name": "mdx-create-react-app", "dependencies": { - "@mdx-js/loader": "^0.16.4", - "@mdx-js/mdx": "^0.16.4", + "mdx.macro": "^0.2.7", "react": "^16.6.3", - "react-app-rewired": "^1.6.2", "react-dom": "^16.6.3", - "react-scripts": "1.1.5" + "react-scripts": "2.1.1" }, "scripts": { - "start": "react-app-rewired start", - "build": "react-app-rewired build", - "test": "react-app-rewired test --env=jsdom" - } + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] } diff --git a/examples/create-react-app/public/index.html b/examples/create-react-app/public/index.html index ed0ebafa1..4bfce9568 100644 --- a/examples/create-react-app/public/index.html +++ b/examples/create-react-app/public/index.html @@ -2,14 +2,14 @@ + -