[React] 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
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的更多相关文章
- [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 ...
- react build 后打包发布总结
一,部署在apache web服务器上(wamp | xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决. 设置A ...
- react build本地相对目录 "homepage": ".", package.json
react build相对目录 "homepage": ".", package.json
- 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...
- 《React Native 精解与实战》书籍连载「React Native 底层原理」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- react build和server start
先到项目目录build项目 npm run build 项目会打包到dist文件夹下 index.html和index.js等 react的项目build后不能直接访问的问题 先执行 npm inst ...
- react build后直接从浏览器打开
存在两个问题 一,资源文件路径 config/paths.js 这里原来的.pathname:'/', 改成.pathname:'./' function getServedPath(appPacka ...
- react网页版聊天|仿微信、微博web版|react+pc端仿微信实例
一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室react ...
随机推荐
- matlab遗传算法工具箱
转自http://blog.sina.com.cn/s/blog_5ebcc0240101pnrj.html matlab遗传算法工具箱函数及实例讲解 (2014-01-10 13:03:57) ...
- MySQL for Mac 终端操作说明
mysql for mac 终端操作说明MySQL服务开启Mac版mysql可以从设置里启动服务: 如果想要在终端(Terminal)中操作mysql,需要先添加mysql路径,在此以zsh为例: # ...
- DEALLOCATE - 删除一个准备好的查询
SYNOPSIS DEALLOCATE [ PREPARE ] plan_name DESCRIPTION 描述 DEALLOCATE 用于删除前面准备好的查询. 如果你没有明确 DEALLOCATE ...
- Vue beaforeCreate时获取data中的数据
异步获取即:通过 $this.$nextTick或者settimeout,这连dom都可以拿出来 beforeCreate() { this.$nextTick(function() { con ...
- bzoj3994: [SDOI2015]约数个数和(反演+结论?!)
这题做的历程堪称惊心动魄 刚刚学了莫比乌斯反演的我高高兴兴的和cbx一起反演式子 期间有突破,有停滞,有否定 然后苟蒻的我背着cbx偷偷打开了题解 看到了 我...... 去你的有个性质啊(当然还是自 ...
- CAD参数绘mcdbsolid对象(网页版)
主要用到函数说明: _DMxDrawX::DrawSolid 绘McDbSolid对象.详细说明如下: 参数 说明 DOUBLE dX1 第一个点X DOUBLE dY1 第一个点Y DOUBLE d ...
- JavaSE-24 多线程
学习要点 线程概述 Java中的多线程 线程状态 线程调度 线程同步 线程间通信 线程概述 1 进程 进程就是应用程序的执行实例. 进程特征: 动态性:动态产生,动态消亡.进程启动,系统为其分配资源 ...
- linux中查看文件指定行的数据
http://jingyan.baidu.com/article/15622f24125872fdfdbea560.html
- React入门介绍(2)- React Component-React组件
React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...
- c++基础_杨辉三角形
#include <iostream> using namespace std; int main(){ int n; cin>>n; ][]; ;i<n;i++){ a ...