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. CentOS 6.4 linux下编译安装MySQL5.6.14

    CentOS 6.4下通过yum安装的MySQL是5.1版的,比较老,所以就想通过源代码安装高版本的5.6.14. 正文: 一:卸载旧版本 使用下面的命令检查是否安装有MySQL Server rpm ...

  2. chatops--rocketchat+hubot

    chatops--rocketchat+hubot 原文地址:http://www.cnblogs.com/caoguo/p/7221956.html 先放几张图 # rocket.chat # hu ...

  3. 怎样在nexus 中 搜索到远程maven仓库中的jar 文件

    怎样在nexus 中 搜索到远程maven仓库中的jar 文件 url: http://www.oschina.net/question/95712_21999 点击Administration菜单下 ...

  4. splice用法解析

    splice()方法算是最强大的数组方法了,它有很多种用法,主要用于删除指定位置的数组项,在指定的位置插入数组项,在指定位置替换数组项,slpice()方法始终都会返回一个数组,该数组包括从原始数组中 ...

  5. CAD参数绘制mcdbsolid对象(com接口)

    C#中实现代码说明: private void DrawSolid() { //绘McDbSolid对象 axMxDrawX1.AddLinetype("MLineType1", ...

  6. VS2017 ATL创建ActiveX编程要点

    VS2017 ATL创建ActiveX控件编程要点: 一.创建vs项目需要安装器visual studio installer中: 安装 visual studio扩展开发中的 用于x86和x64的V ...

  7. js进行的一些判断

    表达式 "^\\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\\d+)|(0+))$& ...

  8. SQL server 表操作语句(原创)

    CREATE TABLE [dbo].[test] ([id11] int NOT NULL ,[as] varchar(1) COLLATE Chinese_PRC_CI_AS NULL ,[asd ...

  9. Bullet:MySQL增强半同步参数rpl_semi_sync_master_wait_point值AFTER_SYNC和AFTER_COMMIT的对比实验

    MySQL 5.7.22启用增强半同步复制 MySQL对该参数值的描述 Semisync can wait for slave ACKs at one of two points, AFTER_SYN ...

  10. 笔试算法题(50):简介 - 广度优先 & 深度优先 & 最小生成树算法

    广度优先搜索&深度优先搜索(Breadth First Search & Depth First Search) BFS优缺点: 同一层的所有节点都会加入队列,所以耗用大量空间: 仅能 ...