[React] Build a slide deck with mdx-deck using Markdown + React

In this lesson we'll use mdx-deck to create a slide deck using Markdown and React. We'll look at adding multiple slides, code snippets, and importing React components. We'll also leverage the mdx-deck CLI for our development environment and building for production.

Additional Resources:

https://egghead.io/lessons/react-create-and-import-react-components-with-markdown-using-mdxc

https://github.com/jxnblk/mdx-deck

https://twitter.com/jxnblk/status/1023667155324346373

 

Install:

yarn add mdx-deck

 

deck.mdx:

export {book as theme} from 'mdx-deck/themes'

# Hello! this is my first slide!

---

# We will see how mdx-deck works

```notes
These are only visible in presenter mode
```

---

```jsx
<Button />
```

---

import Counter from 'components/Counter'

<Counter />

 

package.json:

  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx"
  },