Познакомьтесь с MDX и MDX-палубой

Автор оригинала: Catalin Tudorache.

Допустим, вам нужно создать презентацию

Какие варианты у вас есть? Keynote, Power Point или Google Slide могут быть очевидным вариантом. Допустим, вам нужно создать презентацию и Вы гик. Какие варианты у вас сейчас?

Познакомьтесь с MDX.

MDX это библиотека, которая позволяет вам писать Jsx код внутри Реклама файлы. Если вы не использовали Jsx Пока что подумайте об этом, как расширение XML в Ecmascript (AKA JavaScript) – найдите примеры в ссылке JSX. Если вы когда-либо написали React Component, вы написали JSX.

Реклама Один из инструментов, которые, как только вы его используете, вы не можете представить свою жизнь без него. Это создано двумя удивительными людьми: Джон Грубер – Хорошо известный технический писатель, а Аарон Сварц – соучредителем Reddit. Реклама Давайте напишите отформатированные документы с очень чистым синтаксисом. MDX Народный проект на Github с более чем 6 тысяч звезд.

Познакомьтесь с MDX-палубой

Один из проекта на основе MDX это MDX-палуба который приводит нас к основной теме этого поста: создание Geeky презентация.

Начать с MDX-палуба Вам нужно Узел и NPM , который вы уже можете установить. Начните 2 минуты:

1. Сделайте новый каталог и запустите NPM init -y.
2. Беги NPM I -S MDX-палуба
3. Создать новый файл с именем deek.mdx содержащий

# Hello World
---
## This is the second slide

1. Добавьте новый сценарий команды в Package.json.

"start": "mdx-deck deck.mdx"

1. Беги NPM начать И вы увидите новую презентацию в браузере.

Это может не казаться сильно, но у вас есть 2 слайда. Вы можете увидеть их в браузере и добавлять еще один Очень просто. Просто добавьте 3 тире --- на новой линии, и у вас будет новый слайд. И это не все, доступа к режиму докладчика, нажав ALT + P и обзор режима нажатием Alt + O Отказ Кстати, # означает H1 и ## означает H2 в Markdown. Указание не так страшно!

Тематическая тематика

Давайте добавим немного цвета. Одна первая линия deek.mdx Добавьте эту строку, за которой следует пустая линия.

export { yellow as theme } from 'mdx-deck/themes'

Вы только что изменили тему, проверяйте браузер. желтый является одним из Темы по умолчанию предоставляется MDX-палуба Отказ Конечно, вы можете определить свою собственную тему. Я забыл упомянуть, использовать клавиши со стрелками или нажать на левый/правый край, чтобы изменить слайд. Или вы можете использовать клавишу пространства для перемещения на следующую слайд.

Степенные компоненты реагирования

Достаточно круто? Лучшая часть еще впереди! Вы можете добавить объекты реагирования внутри презентации. Так что скажем, у вас есть этот компонент:

import React from 'react'

export default ({ name }) => {
  return (
    { 'Hi ' + name }
  );
}

Вы можете легко использовать этот компонент внутри вашей презентации, как это:

export { yellow as theme } from 'mdx-deck/themes'

# Hello World
---
## This is the second slide
---
## Embed React components
import Hi from './Hi'

Ваш компонент может быть более сложным, если вы хотите. Например, я добавил этот компонент диаграммы бар:

import React from 'react'
import ReactChartkick, { BarChart } from 'react-chartkick'
import Chart from 'chart.js'

ReactChartkick.addAdapter(Chart)

const data = [
  [ 'React', 8 ],
  [ 'React Native', 9 ],
  [ 'Node', 8 ],
  [ 'Linux', 7 ],
  [ 'MySQL', 7 ],
  [ 'Mongo', 7 ],
  [ 'Elasticsearch', 6 ],
  [ 'Docker', 5 ],
]

export default () => {
  return (
    

      
    
  );
}

Вот как это выглядит:

Этикетка «React Native 9» появилась, когда я парил в реактивный батончик. Таким образом, вы можете взаимодействовать с компонентами реагирования, которые вы встраиваете в вашу презентацию.

Кодовые фрагменты

Добавление фрагментов кода также легко:

---
## Code Snippet
.```jsx
export default () => {
  return (
    

    
    
  );
}
.```
---

Примечание : Я префиксировал три задних отзыва с точкой, чтобы избежать форматирования фрагмента кода, используемого этой платформой. Вам не нужно добавлять его в реальный сценарий.

И они тоже выглядят довольно хорошо!

Другие особенности

Другие классные особенности, которые стоит упомянуть: Split View (горизонтальный и вертикальный), поддержка таблиц, поддержка изображений, макетов и многое другое.

Создать свою презентацию в HTML + CSS + JS Беги MDX-палуба сборки DECK.MDX Таким образом, вы можете развернуть результат, если это необходимо.

Здесь Вы можете найти презентацию, которое я мало построен. Я надеюсь, что вам понравился этот и, возможно, в следующий раз, когда вы построите презентацию MDX-палуба будет один вариант!

Код на!