[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 ...
随机推荐
- Ubuntu 下更新或下载输入法(搜狗)
ubuntu12.04的fcitx版本不支持,不满足依赖,需要更新fcitx 添加fcitx源添加fcitx源命令 : sudo add-apt-repository ppa:fcitx-team/n ...
- UI开发复杂度度量
1)要素的个数: 2)要素布局和渲染的复杂度: 3)交互的复杂度. 本质上分为两种:要素的复杂度和联系的复杂度. 联系包含要素间布局的联系与交互的联系,已经和外部上下文的联系.
- laravel socialite微信登录注意
在token没有过期之前,重新走登录流程时会跳过callback,即不再重新登录,除了删除了客户端的token
- 微擎we7模块和模板安装方法
2017年06月08日 09:26:55 源码学习分享 阅读数:15643 标签: we7 更多 个人分类: 微擎we7 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...
- 用npm来部署快速一个httpweb服务器
https://blog.csdn.net/u012182627/article/details/55060594 http-server的安装######注意事项 安装http-server的时候 ...
- 计算机中的CPU
今天写一下计算机中最核心的一部分,就是计算机的大脑---CPU.CPU也就是中央处理器(Central Processing Unit).中央处理器是一块超大规模的集成电路,是一台计算机的运算核心(C ...
- react-native Socket Event 在控制台的输出
在XCode中运行react-native 的时候,避免不了的要查看日志信息 ,但是react-native中的Socket的日志简直是太多了,往往是刚看到自己想要看到的信息的时候,瞬间就被最新的日志 ...
- PermGen space OOM 记录
前些天线上除出了个OOM问题,今天闲下来记录下: OOM的提示信息是-PermGen space,说明问题出在方法区,方法区存的是什么东西?:类的加载信息.常量.静态变量. 按照方法区的定义:类加载的 ...
- js 技巧 (九)按键JS
1. 禁止复制(copy),禁用鼠标右键! <SCRIPT> //加入页面保护 function rf() {return false; } document.oncontextmenu ...
- 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 ...