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 下更新或下载输入法(搜狗)

    ubuntu12.04的fcitx版本不支持,不满足依赖,需要更新fcitx 添加fcitx源添加fcitx源命令 : sudo add-apt-repository ppa:fcitx-team/n ...

  2. UI开发复杂度度量

    1)要素的个数: 2)要素布局和渲染的复杂度: 3)交互的复杂度. 本质上分为两种:要素的复杂度和联系的复杂度. 联系包含要素间布局的联系与交互的联系,已经和外部上下文的联系.

  3. laravel socialite微信登录注意

    在token没有过期之前,重新走登录流程时会跳过callback,即不再重新登录,除了删除了客户端的token

  4. 微擎we7模块和模板安装方法

    2017年06月08日 09:26:55 源码学习分享 阅读数:15643 标签: we7 更多 个人分类: 微擎we7   版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...

  5. 用npm来部署快速一个httpweb服务器

    https://blog.csdn.net/u012182627/article/details/55060594 http-server的安装######注意事项 安装http-server的时候 ...

  6. 计算机中的CPU

    今天写一下计算机中最核心的一部分,就是计算机的大脑---CPU.CPU也就是中央处理器(Central Processing Unit).中央处理器是一块超大规模的集成电路,是一台计算机的运算核心(C ...

  7. react-native Socket Event 在控制台的输出

    在XCode中运行react-native 的时候,避免不了的要查看日志信息 ,但是react-native中的Socket的日志简直是太多了,往往是刚看到自己想要看到的信息的时候,瞬间就被最新的日志 ...

  8. PermGen space OOM 记录

    前些天线上除出了个OOM问题,今天闲下来记录下: OOM的提示信息是-PermGen space,说明问题出在方法区,方法区存的是什么东西?:类的加载信息.常量.静态变量. 按照方法区的定义:类加载的 ...

  9. js 技巧 (九)按键JS

    1. 禁止复制(copy),禁用鼠标右键! <SCRIPT> //加入页面保护 function rf() {return false; } document.oncontextmenu ...

  10. Kvm:启动报错:error: internal error: process exited while connecting to monitor: 2018-11-12T01:47:14.993371Z qemu-system-x86_64: cannot set up guest memory 'pc.ram': Cannot allocate memory

    今天有台kvm挂了,物理机启动时报错 很明显看报错显示内存不足,无法分配内存,查看物理机内存使用正常,.xml修改虚机内存后启动依然报错 报错: 这时候需要看一下主机确保可以分配多少内存 sysctl ...