[React] Build a slide deck with mdx-deck using Markdown + React
React with Using build markdown
2023-09-14 08:59:17 时间
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组件更新原理
- 在单html页面中使用react并配置jsx
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- React-Navigation Integration with Redux
- 从React源码来学hooks是不是更香呢
- react 路由 react-router/react-router-dom
- 校招前端高频react面试题合集_2023-02-27
- 滴滴前端二面常考react面试题(持续更新中)_2023-03-01
- react源码分析--深度理解React.Context
- React--5: 类的相关复习
- React 消息订阅与发布机制
- Oracle 中的 WITH 语句使用技巧(oracle with用法)
- MySQL查询优化使用WITH子句的限制与替代方案(mysql不能用with)
- 语句使用Oracle两个WITH语句实现数据查询(oracle两个with)
- 从Oracle中挖掘洞见坚实的With表(oracle with表)