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"
},

[React] Build a slide deck with mdx-deck using Markdown + React的更多相关文章

  1. [MDX] Build a Custom Provider Component for MDX Deck

    MDX Deck is a great library for building slides using Markdown and JSX. Creating a custom Providerco ...

  2. react build 后打包发布总结

    一,部署在apache  web服务器上(wamp   |   xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决.  设置A ...

  3. react build本地相对目录 "homepage": ".", package.json

    react build相对目录 "homepage": ".", package.json

  4. 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...

  5. 《React Native 精解与实战》书籍连载「React Native 底层原理」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  6. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  7. react build和server start

    先到项目目录build项目 npm run build 项目会打包到dist文件夹下 index.html和index.js等 react的项目build后不能直接访问的问题 先执行 npm inst ...

  8. react build后直接从浏览器打开

    存在两个问题 一,资源文件路径 config/paths.js 这里原来的.pathname:'/', 改成.pathname:'./' function getServedPath(appPacka ...

  9. react网页版聊天|仿微信、微博web版|react+pc端仿微信实例

    一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室react ...

随机推荐

  1. Ubuntu 几个常用的更新命令

    apt-cache search package 搜索包 apt-cache show package 获取包的相关信息,如说明.大小.版本等 sudo apt-get install package ...

  2. 迅为I.MX6Q开发板配不同分辨率不同尺寸液晶屏幕

    I.MX6Q开发板: 核心板参数 尺寸:51mm*61mm iMX6Q四核CPU:Freescale Cortex-A9 四核 i.MX6Q,主频 1.2 GHz iMX6DL双核CPU:Freesc ...

  3. C# 设置系统环境变量

    using Microsoft.Win32; using System; using System.Collections.Generic; using System.ComponentModel; ...

  4. cron - 定期执行指定命令的守护程序 (Vixie Cron)

    总览 cron 描述 Cron 应该由 /etc/rc 或者 /etc/rc.local 启动(译注:有很多发行版与此不同的,如 RedHat6.x 使用 /etc/rc.d/init.d/crond ...

  5. CREATE TYPE - 定义一个新的数据类型

    SYNOPSIS CREATE TYPE name AS ( attribute_name data_type [, ... ] ) CREATE TYPE name ( INPUT = input_ ...

  6. Goldengate完成Mysql到Mysql的数据同步

    文档参考地址:http://blog.csdn.net/u010587433/article/details/49305019 需求: 使用Goldengate完成Mysql到Mysql的数据同步,源 ...

  7. 下载GitHub指定目录的文件

    使用网站 https://minhaskamal.github.io/DownGit/#/home

  8. 使用 reduce 实现数组 map 方法

    //使用 reduce 实现数组 map 方法 const selfMap2 = function (fn, context){ let arr = Array.prototype.slice.cal ...

  9. hdu 2377 Bus Pass

    Bus Pass Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  10. 【BZOJ 1202】 [HNOI2005]狡猾的商人(枚举区间也可行)

    题链:http://www.lydsy.com/JudgeOnline/problem.php?id=1202 其实也可以不使用加权并查集,通过画图可以发现,一个长区间和其包含的区间能够算出一个新区间 ...