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
Instructor: [00:00] In this lesson, we're going to look at the mdx-deck library to make a slide deck using Markdown and React.
[00:05] I have an empty directory with no project in it. In order to install mdx-deck, I'll need to make sure I have a package.json file. I can create one by running npm in it or yarn in it. Next, install the library. Do that by saying yarn add mdx-deck.
[00:22] The next thing I'll need to do is add a script that leverages the mdx-deck CLI to start the deck. The CLI comes baked with hot module replacement for fast updates, React and style components for styling.
[00:37] Now that we're set up, I'm going to create a deck.mdx file to contain the core of my slide deck. If you haven't heard of an MDX file, it's a magical format that allows you to write Markdown and turn it into a React component. You can check out one of my previous lessons for more info.
[00:50] The deck.mdx file will contain all of our slides. Let's add the first one. Let's test it out. I'm going to go ahead and start the mdx-deck server and give it a shot. We'll say yarn start.
[01:09] It looks like it's working. You can see our first slide. Let's go ahead and add another slide. We can do this by adding a horizontal rule or three dashes and adding other slides just by adding more Markup.
[01:20] I'll add, "This is our second slide." We'll go back to our browser to check it out. There's our first slide and our second slide. That's pretty cool. We can even add code snippets.
[01:31] I'll add another slide and I'll say jsx, can we say something like button and close it up. Save it, to our browser. There's our third slide. We have a code snippet with button in it.
[01:45] One of the best things about building your slides with something that leverages React is that we can use React components directly in our slides. I'm going to add a counter component in a new slide to embed it.
[02:04] One of the coolest features that MDX offers is that you can use ES6 imports directly in your Markdown. I can import my counter as a slide and use it below. Let's test it out. Let's go to the browser, go to my fourth slide. As you can see here, my component is being imported. If I click the button, it works just like a normal React component.
[02:24] Mdx-deck is very extensible as you can add stuff like new themes. It does come with a couple of themes baked in, and you can enable them by exporting one at the top of your deck file. Dark is looking pretty good. Check out the mdx-deck docs to see how else you can adjust a theme.
[02:49] The last thing I want to show for this lesson is how to build for production. We'll first need to add another script. Now I can simply run yarn build, and mdx-deck will output two files for us to use in production.