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. WebSocket 的一些简单页面推送使用

    因为做通信项目的时候,需要实时获取每个分机的当前状态,发现websocket还不错,只是对浏览器的要求比较高, 针对特定用户推送消息,网上有一些 public class GetHttpSession ...

  2. 【转】Google Chrome浏览器调试

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  3. 使用Caliburn.Micro系列2:Convention

    CM中实现一个比较有意思的特性,就是智能匹配. 通常使用MVVM的写法:在匹配 View和ViewModel时会使用DataContext,在匹配数据属性时使用Binding,在匹配事件命令时使用Co ...

  4. asp 读取 另外一个带参数的asp文件(服务器不支持!放弃吧!骚年!)

    (服务器不支持!放弃吧!骚年!) 主要作用是为了分离数据库,灵感是这样的:收到json影响,把asp里的数据,用一个页面输出,然后用另外一个页面读取,这样就不用有数据库位置的烦恼了 代码 网上有很多, ...

  5. android实战简易教程-链接

    http://blog.csdn.net/yayun0516/article/category/2799943

  6. Libjingle 库

    Libjingle 是google talk voice(语音聊天) 和 p2p interoperability(点对点操作)库,是提供了google talk,p2p文件共享和语音呼叫能力的组件集 ...

  7. cc.Label

    cc.Label 1:cc.Label是显示文字的组件;2:cc.Label属性面板:  String: 文本显示的内容;  Horiznotal: 水平对齐的方式: 左 右 居中;  Vertial ...

  8. Git 教程 -- 第一天

    什么是Git? Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. 为什么使用Git? 众所周知,版本控制系统分为集中式版本控制系统(SVN.CVS等)与分布式版 ...

  9. docker配置国内加速器

    一.登录到daocloud网站后选择如下地址的加速器 二.根据配置提示在linux上执行对应的配置命令: curl -sSL https://get.daocloud.io/daotools/set_ ...

  10. LeetCode(55)Jump Game

    题目 Given an array of non-negative integers, you are initially positioned at the first index of the a ...