Π–ΠΈΠ²Ρ‹Π΅ Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½Ρ‹ β€” MDX ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ

Π£ вас ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, Π½ΠΎ Ссли Ρƒ Π½Π΅Π³ΠΎ Π½Π΅Ρ‚Ρƒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, Π΅ΡΡ‚ΡŒ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π²Π·Π»Π΅Ρ‚ΠΈΡ‚. Π’ офисС Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ докумСнтация ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ Π½Π΅ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ Π½Π° ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ вопросы. ДокумСнтация Ρ‚Π°ΠΊΠΆΠ΅ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ люди ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, Ссли компанию ΠΏΠΎΠΊΠΈΠ½ΡƒΡ‚ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ сотрудники ΠΈΠ»ΠΈ ΠΏΠΎΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Ρ€ΠΎΠ»ΠΈ. Π–ΠΈΠ²Ρ‹Π΅ Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½Ρ‹ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Ρ†Π΅Π»ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Ρ….

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ тСкст, Markdown β€” отличная Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° HTML. Иногда синтаксиса Markdown Π½Π΅ достаточно. Π’ этом случаС ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ HTML Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ. НапримСр, кастомныС элСмСнты. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Ссли Π²Ρ‹ строитС Π΄ΠΈΠ·Π°ΠΉΠ½-систСму с Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ Π²Π΅Π± ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ, ΠΈΡ… Π»Π΅Π³ΠΊΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ React (ΠΈΠ»ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ JSX Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Preact ΠΈΠ»ΠΈ Vue), Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎΠΆΠ΅ самоС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ MDX.

Π­Ρ‚ΠΎ ΡΡ‚Π°Ρ‚ΡŒΡ β€” ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ€ инструмСнтов для написания Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈ создания Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½Π°. НС всС инструмСнты, пСрСчислСнныС здСсь, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ MDX, Π½ΠΎ ΠΎΠ½ всС Ρ‡Π°Ρ‰Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² инструмСнты докумСнтирования.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ MDX?

Π€Π°ΠΉΠ» .mdx ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ синтаксис Ρ‡Ρ‚ΠΎ ΠΈ Markdown, Π½ΠΎ позволяСт ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ JSX ΠΈ Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Vue Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² Π°Π»ΡŒΡ„Π΅. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с MDX, достаточно ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ «Create React App». Π•ΡΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Next.js ΠΈ Gatsby. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ вСрсия Docusaurus (вСрсия 2) Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ.

НаписаниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ с Docusaurus

Docusaurus написали Π² Facebook. Они Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΡ€ΠΎΠΌΠ΅ React. Π—Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Redux, Prettier, Gulp ΠΈ Babel.

Π–ΠΈΠ²Ρ‹Π΅ Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½Ρ‹ — MDX ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Docusaurus.

Docusaurus ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для написания любой Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для описания Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π°. Π£ Π½Π΅Π³ΠΎ ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡ‚ΠΎΠΌ React, Π½ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π±Ρ‹ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ с Π½ΠΈΠΌ Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌ. Он Π±Π΅Ρ€Π΅Ρ‚ ваши Markdown Ρ„Π°ΠΉΠ»Ρ‹, Ρ‰Π΅ΠΏΠΎΡ‚ΠΊΠ° ΠΌΠ°Π³ΠΈΠΈ ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ структурированная, отформатированная ΠΈ читаСмая докумСнтация с красивым Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π³ΠΎΡ‚ΠΎΠ²Π°.

Π–ΠΈΠ²Ρ‹Π΅ Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½Ρ‹ — MDX ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ
На сайтС Redux ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ стандарный шаблон Docusaurus

Π‘Π°ΠΉΡ‚Ρ‹, созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Docusaurus, Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² сСбя Π±Π»ΠΎΠ³ Π½Π° основС Markdown. Для подсвСтки синтаксиса сразу ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ Prism.js. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‡Ρ‚ΠΎ Docusaurus появился ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅Π΄Π°Π²Π½ΠΎ, Π΅Π³ΠΎ ΠΏΡ€ΠΈΠ·Π½Π°Π»ΠΈ Π»ΡƒΡ‡ΡˆΠΈΠΌ инструмСнтом 2018 Π³ΠΎΠ΄Π° Π½Π° StackShare.

Π”Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ создания ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°

Docusaurus ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ для создания Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π΅ΡΡ‚ΡŒ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ ΠΈ ΠΎΠ΄ΠΈΠ½ способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сайт β€” Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ своС собствСнноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π½Π° любом языкС, CMS ΠΈΠ»ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠΌ статичСского сайта.

НапримСр, докумСнтация для React, Π΄ΠΈΠ·Π°ΠΉΠ½ систСма IBM, Apollo ΠΈ Ghost CMS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Gatsby β€” это Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ статичСских сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ для Π±Π»ΠΎΠ³ΠΎΠ². Если Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ с Vue, Ρ‚ΠΎ VuePress для вас станСт Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ. Π”Ρ€ΡƒΠ³ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€, написанный Π½Π° Python β€” MkDocs. Он ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ ΠΈ конфигурируСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° YAML. GitBook Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, Π½ΠΎ ΠΎΠ½ бСсплатный Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… ΠΈ нСкоммСрчСских ΠΊΠΎΠΌΠ°Π½Π΄. А Π΅Ρ‰Π΅ ΠΌΠΎΠΆΠ½ΠΎ просто Π·Π°Π»ΠΈΠ²Π°Ρ‚ΡŒ mardown Ρ„Π°ΠΉΠ»Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π³ΠΈΡ‚, ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π½ΠΈΠΌΠΈ Π² Github.

Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²: Docz, Storybook ΠΈ Styleguidist

Π“Π°ΠΉΠ΄Π»Π°ΠΉΠ½Ρ‹, Π΄ΠΈΠ·Π°ΠΉΠ½ систСмы, Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² β€” ΠΊΠ°ΠΊ Π±Ρ‹ Π²Ρ‹ ΠΈΡ… Π½ΠΈ Π½Π°Π·Ρ‹Π²Π°Π»ΠΈ, Π½ΠΎ это стало ΠΎΡ‡Π΅Π½ΡŒ популярным Π² послСднСС врСмя. ПоявлСниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½Ρ‹Ρ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², Ρ‚Π°ΠΊΠΈΡ…, ΠΊΠ°ΠΊ React ΠΈ инструмСнтов, упомянутых здСсь β€” ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΎ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΈΡ… ΠΈΠ· тщСславных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π² ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ инструмСнты.

Storybook, Docz ΠΈ Styleguidist β€” Π΄Π΅Π»Π°ΡŽΡ‚ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎΠΆΠ΅: ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ ΠΈΡ… API. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ дСсятки ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ сотни ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² β€” всС с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ состояниями ΠΈ стилями. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ использовались ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ, люди Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚. Для этого достаточно ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π“Π°ΠΉΠ΄Π»Π°ΠΉΠ½Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ для поиска ΠΎΠ±Π·ΠΎΡ€ всСх Π²Π°ΡˆΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ ΠΈ ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹.

Π­Ρ‚ΠΈ инструмСнты ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ способ просмотра Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… состояний. ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ воспроизвСсти ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π² контСкстС Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ прилоТСния. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‰Π΅Π»ΠΊΠ°Ρ‚ΡŒ ΠΏΠΎ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ, стоит Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚. МоТно ΡΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ труднодоступныС состояния (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, состояниС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ).

Наряду с Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ дСмонстрациСй Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… состояний ΠΈ списком свойств часто Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎΠ±Ρ‰Π΅Π΅ описаниС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° β€” обоснования Π΄ΠΈΠ·Π°ΠΉΠ½Π°, кСйсы использования ΠΈΠ»ΠΈ описаниС Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ тСстирования. Markdown ΠΎΡ‡Π΅Π½ΡŒ прост для изучСния β€” Π² ΠΈΠ΄Π΅Π°Π»Π΅ Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½Ρ‹ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ совмСстным рСсурсом для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Docz, Styleguidist ΠΈ Storybook ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ способ Π»Π΅Π³ΠΊΠΎΠ³ΠΎ смСшивания Markdown с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ.

Docz

БСйчас Docz Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с React, Π½ΠΎ ΠΈΠ΄Π΅Ρ‚ активная Ρ€Π°Π±ΠΎΡ‚Π° Π½Π°Π΄ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Preact, Vue ΠΈ Π²Π΅Π± ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Docz самый свСТий ΠΈΠ· Ρ‚Ρ€Π΅Ρ… инструмСнтов, Π½ΠΎ Π½Π° Github ΠΎΠ½ смог ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ 14 000 Π·Π²Π΅Π·Π΄. Docz прСдставляСт Π΄Π²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° β€” <Playground> ΠΈ < Props >. Они ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² Ρ„Π°ΠΉΠ»Π°Ρ… .mdx.

import { Playground, Props } from "docz";
import Button from "../src/Button";

## You can _write_ **markdown**
### You can import and use components

<Button>click</Button>

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚ΡŒ свои собствСнныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <Playground>, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π½Π°Π»ΠΎΠ³ встроСнного CodePen ΠΈΠ»ΠΈ CodeSandbox β€” Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ ваш ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΅Π³ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

<Playground>
  <Button>click</Button>
</Playground>

<Props> ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ‚ всС доступныС свойства для Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° React, значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈ Ρ‚ΠΎ, трСбуСтся Π»ΠΈ свойство.

<Props of={Button} />

Π›ΠΈΡ‡Π½ΠΎ я ΡΡ‡ΠΈΡ‚Π°ΡŽ этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π½Π° основС MDX самым простым для понимания ΠΈ самым простым для Ρ€Π°Π±ΠΎΡ‚Ρ‹.

Π–ΠΈΠ²Ρ‹Π΅ Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½Ρ‹ — MDX ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ

Если Π²Ρ‹ Ρ„Π°Π½Π°Ρ‚ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π° статичСских сайтов Gatsby, Docz ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡŽ.

Styleguidist

Как ΠΈ Π² Docz, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΏΠΈΡˆΡƒΡ‚ΡΡ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ синтаксис Markdown. Styleguidist ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π±Π»ΠΎΠΊΠΈ ΠΊΠΎΠ΄Π° Markdown (Ρ‚Ρ€ΠΎΠΉΠ½Ρ‹Π΅ ΠΊΠ°Π²Ρ‹Ρ‡ΠΊΠΈ) Π² ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»Π°Ρ… .md Ρ„Π°ΠΉΠ»Π°Ρ…, Π° Π½Π΅ Π² MDX.

```js
<Button onClick={() => console.log('clicked')>Push Me</Button>

Π‘Π»ΠΎΠΊΠΈ ΠΊΠΎΠ΄Π° Π² Markdown ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ просто ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΊΠΎΠ΄. ΠŸΡ€ΠΈ использовании Styleguidist любой Π±Π»ΠΎΠΊ ΠΊΠΎΠ΄Π° с Ρ‚Π΅Π³ΠΎΠΌ языка js, jsx ΠΈΠ»ΠΈ javascript Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React. Как ΠΈ Π² Docz, ΠΊΠΎΠ΄ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ β€” Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΌΠ΅Π½ΡΡ‚ΡŒ свойства ΠΈ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚.

Π–ΠΈΠ²Ρ‹Π΅ Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½Ρ‹ — MDX ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ

Styleguidist автоматичСски создаст Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ свойств ΠΈΠ· PropTypes, Flow ΠΈΠ»ΠΈ Typescript объявлСний.

Π–ΠΈΠ²Ρ‹Π΅ Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½Ρ‹ — MDX ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ

Styleguidist сСйчас ΠΏΠΎΠ΄Π΄Π΅Ρ€Π΄ΠΆΠΈΠ²Π°Π΅Ρ‚ React ΠΈ Vue.

Storybook

Storybook ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ сСбя ΠΊΠ°ΠΊ «срСда Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²Β». ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ² Markdown ΠΈΠ»ΠΈ MDX, Π²Ρ‹ ΠΏΠΈΡˆΠ΅Ρ‚Π΅ истории Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ² Javascript. Π˜ΡΡ‚ΠΎΡ€ΠΈΡ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅ состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. НапримСр, Ρƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ истории для состояния Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠ³ΠΎ состояния (disabled).

storiesOf('Button', module)
  .add('disabled', () => (
    <Button disabled>lorem ipsum</Button>
  ))

Storybook Π³ΠΎΡ€Π°Π·Π΄ΠΎ слоТнСС Ρ‡Π΅ΠΌ Styleguidist ΠΈ Docz. Но ΠΏΡ€ΠΈ этом это самый популярный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, Π½Π° Github Ρƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π±ΠΎΠ»Π΅Π΅ 36 000 Π·Π²Π΅Π·Π΄. Π­Ρ‚ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, Π² Π½Π΅ΠΌ участвуСт 657 участников ΠΈ ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‚ ΡˆΡ‚Π°Ρ‚Π½Ρ‹Π΅ сотрудники. Π•Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Airbnb, Algolia, Atlassian, Lyft ΠΈ Salesforce. Storybook ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ большС Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², Ρ‡Π΅ΠΌ ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚Ρ‹ β€” React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ HTML.

Π’ Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ Ρ€Π΅Π»ΠΈΠ·Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ„ΠΈΡˆΠΊΠΈ ΠΈΠ· Docz ΠΈ внСдряСтся MDX.

# Button

Some _notes_ about your button written with **markdown syntax**.

<Story name="disabled">
  <Button disabled>lorem ipsum</Button>
</Story>

Новый Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Storybook’а появятся постСпСнно Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… мСсяцСв ΠΈ, ΠΏΠΎ-Π²ΠΈΠ΄ΠΈΠΌΠΎΠΌΡƒ, это станСт большим шагом Π²ΠΏΠ΅Ρ€Π΅Π΄.

Π˜Ρ‚ΠΎΠ³ΠΈ

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ΠΎΠ² прСвозносятся Π² ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Π°Ρ… статСй Π½Π° Medium. Когда всС сдСлано Ρ…ΠΎΡ€ΠΎΡˆΠΎ, ΠΎΠ½ΠΈ ΠΎΠ±Π»Π΅Π³Ρ‡Π°ΡŽΡ‚ созданиС смСТных ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ идСнтичности. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· этих инструмСнтов Π½Π΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΎΠ»ΡˆΠ΅Π±Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ систСму. Π­Ρ‚ΠΎ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ проСктирования Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ CSS. Но ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ врСмя ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ доступным Π΄ΠΈΠ·Π°ΠΉΠ½ систСму для всСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Docz, Storybook ΠΈ Styleguidist β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹.

ΠžΡ‚ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Ρ‡ΠΈΠΊΠ°. Π­Ρ‚ΠΎ ΠΌΠΎΠΉ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ Π½Π° Π₯Π°Π±Ρ€Π΅. Если Π²Ρ‹ нашли ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ Π½Π΅ точности, ΠΈΠ»ΠΈ Π΅ΡΡ‚ΡŒ прСдлоТСния ΠΏΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡŽ ΡΡ‚Π°Ρ‚ΡŒΠΈ β€” ΠΏΠΈΡˆΠΈΡ‚Π΅ Π² Π»ΠΈΡ‡ΠΊΡƒ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: habr.com