ืœื™ื™ื•ื• ื’ื™ื™ื“ืœื™ื™ื ื– - MDX ืื•ืŸ ืื ื“ืขืจืข ืคืจืึทืžืขื•ื•ืึธืจืงืก

ืื™ืจ ืงืขื ืขืŸ ื”ืึธื‘ืŸ ื“ืขืจ ื‘ืขืกื˜ืขืจ ืึธืคึฟืŸ ืžืงื•ืจ ืคึผืจื•ื™ืขืงื˜, ืึธื‘ืขืจ ืื•ื™ื‘ ืขืก ื˜ื•ื˜ ื ื™ืฉื˜ ื”ืึธื‘ืŸ ื’ื•ื˜ ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ, ื’ื™ื›ืขืจ ื–ืขื ืขืŸ ืึทื– ืขืก ื•ื•ืขื˜ ืงื™ื™ื ืžืึธืœ ื ืขืžืขืŸ ืึทื•ื•ืขืง. ืื™ืŸ ื“ื™ ืึธืคื™ืก, ื’ื•ื˜ ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ ื•ื•ืขื˜ ืคืึทืจืžื™ื™ึทื“ืŸ ืื™ืจ ืฆื• ืขื ื˜ืคึฟืขืจืŸ ื“ื™ ื–ืขืœื‘ืข ืคืจืื’ืขืก. ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ ืื•ื™ืš ื™ื ืฉื•ืจื– ืึทื– ืžืขื ื˜ืฉืŸ ืงืขื ืขืŸ ืคึฟืึทืจืฉื˜ื™ื™ืŸ ื“ื™ ืคึผืจื•ื™ืขืงื˜ ืื•ื™ื‘ ืฉืœื™ืกืœ ืขืžืคึผืœื•ื™ื™ื– ืคืึทืจืœืึธื–ืŸ ื“ื™ ืคื™ืจืžืข ืึธื“ืขืจ ืจืึธืœืขืก ื˜ื•ื™ืฉืŸ. ืœืขื‘ืขื“ื™ืง ื’ื™ื™ื“ืœื™ื™ื ื– ื•ื•ืขื˜ ื”ืขืœืคึฟืŸ ื™ื ืฉื•ืจ ื“ืึทื˜ืŸ ืึธืจื ื˜ืœืขื›ืงื™ื™ึทื˜.

ืื•ื™ื‘ ืื™ืจ ื“ืึทืจืคึฟืŸ ืฆื• ืฉืจื™ื™ึทื‘ืŸ ืœืึทื ื’ ื˜ืขืงืกื˜, ืžืึทืจืงื“ืึทื•ืŸ ืื™ื– ืึท ื’ืจื•ื™ืก ืึธืœื˜ืขืจื ืึทื˜ื™ื•ื• ืฆื• HTML. ืžืืœ ืžืึทืจืงื“ืึธื•ื•ืŸ ืกื™ื ื˜ืึทืงืก ืื™ื– ื ื™ืฉื˜ ื’ืขื ื•ื’. ืื™ืŸ ื“ืขื ืคืึทืœ, ืžื™ืจ ืงืขื ืขืŸ ื ื•ืฆืŸ HTML ืื™ืŸ ืขืก. ืคึฟืึทืจ ื‘ื™ื™ึทืฉืคึผื™ืœ, ืžื ื”ื’ ืขืœืขืžืขื ื˜ืŸ. ื“ืขืจื™ื‘ืขืจ, ืื•ื™ื‘ ืื™ืจ ื‘ื•ื™ืขืŸ ืึท ืคึผืœืึทืŸ ืกื™ืกื˜ืขื ืžื™ื˜ ื’ืขื‘ื•ื™ืจืŸ ื•ื•ืขื‘ ืงืึทืžืคึผืึธื•ื ืึทื ืฅ, ื–ื™ื™ ืงืขื ืขืŸ ื–ื™ื™ืŸ ืœื™ื™ื›ื˜ ื™ื ืงืœื•ื“ืขื“ ืื™ืŸ ื˜ืขืงืกื˜ ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ. ืื•ื™ื‘ ืื™ืจ ื ื•ืฆืŸ React (ืึธื“ืขืจ ืงื™ื™ืŸ ืื ื“ืขืจืข JSX ืคืจื™ื™ืžื•ื•ืขืจืง ื•ื•ื™ Preact ืึธื“ืขืจ Vue), ืื™ืจ ืงืขื ืขืŸ ื˜ืึธืŸ ื“ื™ ื–ืขืœื‘ืข ื–ืึทืš ืžื™ื˜ MDX.

ื“ืขืจ ืึทืจื˜ื™ืงืœ ืื™ื– ืึท ื‘ืจื™ื™ื˜ ืื™ื‘ืขืจื‘ืœื™ืง ืคื•ืŸ ืžื›ืฉื™ืจื™ื ืคึฟืึทืจ ืฉืจื™ื™ื‘ืŸ ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ ืื•ืŸ ืงืจื™ื™ื™ื˜ื™ื ื’ ื’ื™ื™ื“ืœื™ื™ื ื–. ื ื™ื˜ ืึทืœืข ืคื•ืŸ โ€‹โ€‹ื“ื™ ืžื›ืฉื™ืจื™ื ืœื™ืกื˜ืขื“ ื“ืึธ ื ื•ืฆืŸ MDX, ืึธื‘ืขืจ ืขืก ืื™ื– ื™ื ืงืจื™ืกื™ื ื’ืœื™ ื™ื ืงืœื•ื“ืขื“ ืื™ืŸ ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ ืžื›ืฉื™ืจื™ื.

ื•ื•ืึธืก ืื™ื– MDX?

ื˜ืขืงืข .mdx ื”ืื˜ ื“ืขืจ ื–ืขืœื‘ื™ืงืขืจ ืกื™ื ื˜ืึทืงืก ื•ื•ื™ Markdown, ืึธื‘ืขืจ ืึทืœืึทื•ื– ืื™ืจ ืฆื• ืึทืจื™ื™ึทื ืคื™ืจ ื™ื ื˜ืขืจืึทืงื˜ื™ื•ื• JSX ืงืึทืžืคึผืึธื•ื ืึทื ืฅ ืื•ืŸ ื™ืžื‘ืขื“ ื–ื™ื™ ืื™ืŸ ื“ื™ื™ืŸ ืื™ื ื”ืึทืœื˜. ืฉื˜ื™ืฆืŸ ืคึฟืึทืจ Vue ืงืึทืžืคึผืึธื•ื ืึทื ืฅ ืื™ื– ืื™ืŸ ืึทืœืฃ. ืฆื• ืึธื ื”ื™ื™ื‘ืŸ ืืจื‘ืขื˜ืŸ ืžื™ื˜ MDX, ื ืึธืจ ื™ื ืกื˜ืึทืœื™ืจืŸ "Create React App". ืขืก ื–ืขื ืขืŸ ืคึผืœื•ื’ื™ื ืก ืคึฟืึทืจ Next.js ืื•ืŸ Gatsby. ื“ืขืจ ื•ื•ื™ื™ึทื˜ืขืจ ื•ื•ืขืจืกื™ืข ืคื•ืŸ โ€‹โ€‹ื“ืึธืงื•ืกืึทื•ืจื•ืก (ื•ื•ืขืจืกื™ืข 2) ื•ื•ืขื˜ ืื•ื™ืš ื”ืึธื‘ืŸ ื’ืขื‘ื•ื™ืจืŸ ืฉื˜ื™ืฆืŸ.

ืฉืจื™ื™ื‘ืŸ ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ ืžื™ื˜ ื“ืึธืงื•ืกืึทื•ืจื•ืก

ื“ืึธืงื•ืกืึทื•ืจื•ืก ื’ืขืฉืจื™ื‘ืŸ ืื•ื™ืฃ ืคืึทืกืขื‘ืึธืึธืง. ื–ื™ื™ ื ื•ืฆืŸ ืขืก ืื•ื™ืฃ ื™ืขื“ืขืจ ืึธืคึฟืŸ ืžืงื•ืจ ืคึผืจื•ื™ืขืงื˜ ืึทื—ื•ืฅ ืจืขืึทืงื˜. ืึทืจื•ื™ืก ื“ื™ ืคื™ืจืžืข ืขืก ืื™ื– ื’ืขื ื™ืฆื˜ ื“ื•ืจืš Redux, Prettier, Gulp ืื•ืŸ Babel.

ืœื™ื™ื•ื• ื’ื™ื™ื“ืœื™ื™ื ื– - MDX ืื•ืŸ ืื ื“ืขืจืข ืคืจืึทืžืขื•ื•ืึธืจืงืกืคึผืจืึทื“ื–ืฉืขืงืก ื•ื•ืึธืก ื ื•ืฆืŸ ื“ืึธืงื•ืกืึทื•ืจื•ืก.

ื“ืึธืงื•ืกืึทื•ืจื•ืก ืงืขื ืขืŸ ื–ื™ื™ืŸ ื’ืขื•ื•ื™ื™ื ื˜ ืฆื• ืฉืจื™ื™ึทื‘ืŸ ืงื™ื™ืŸ ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ, ื ื™ื˜ ื‘ืœื•ื™ื– ืฆื• ื‘ืึทืฉืจื™ื™ึทื‘ืŸ ื“ื™ ืคืจืึธื ื˜ืขื ื“. ืขืก ื”ืื˜ ืจืขืึทืงื˜ ืื•ื ื˜ืขืจ ื“ื™ ืงืึทืคึผื˜ืขืจ, ืึธื‘ืขืจ ืื™ืจ ื˜ืึธืŸ ื ื™ื˜ ื”ืึธื‘ืŸ ืฆื• ื–ื™ื™ืŸ ื‘ืึทืงืึทื ื˜ ืžื™ื˜ ืขืก ืฆื• ื ื•ืฆืŸ ืขืก. ืขืก ื ืขืžื˜ ื“ื™ื™ืŸ ืžืึทืจืงื“ืึทื•ืŸ ื˜ืขืงืขืก, ืึท ืงื ื™ืคึผ ืคื•ืŸ ืžืึทื’ื™ืฉ ืื•ืŸ ื’ืขื–ื•ื ื˜-ืกื˜ืจืึทืงื˜ืฉืขืจื“, ืคืึธืจืžืึทื˜ื˜ืขื“ ืื•ืŸ ืœื™ื™ื ืขื•ื•ื“ื™ืง ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ ืžื™ื˜ ืึท ืฉื™ื™ืŸ ืคึผืœืึทืŸ ืื™ื– ื’ืจื™ื™ื˜.

ืœื™ื™ื•ื• ื’ื™ื™ื“ืœื™ื™ื ื– - MDX ืื•ืŸ ืื ื“ืขืจืข ืคืจืึทืžืขื•ื•ืึธืจืงืก
ืื•ื™ืฃ ื“ื™ Redux ื•ื•ืขื‘ื–ื™ื™ื˜ืœ ืื™ืจ ืงืขื ืขืŸ ื–ืขืŸ ื“ื™ ื ืึธืจืžืึทืœ ื“ืึธืงื•ืกืึทื•ืจื•ืก ืžื•ืกื˜ืขืจ

ื•ื•ืขื‘ืกื™ื˜ืขืก ื’ืขื‘ื•ื™ื˜ ืžื™ื˜ ื“ืึธืงื•ืกืึทื•ืจื•ืก ืงืขื ืขืŸ ืื•ื™ืš ืึทืจื™ื™ึทื ื ืขืžืขืŸ ืึท ืžืึทืจืงื“ืึธื•ื•ืŸ-ื‘ืื–ื™ืจื˜ ื‘ืœืึธื’. Prism.js ืื™ื– ื’ืœื™ื™ืš ืงืึธื ื ืขืงื˜ืขื“ ืคึฟืึทืจ ืกื™ื ื˜ืึทืงืก ื›ื™ื™ืœื™ื™ื˜ื™ื ื’. ื˜ืจืึธืฅ ื“ืขื ืคืึทืงื˜ ืึทื– ื“ืึธืงื•ืกืึทื•ืจื•ืก ืืจื•ื™ืก ืœืขืคื™ืขืจืขืš ืœืขืฆื˜ื ืก, ืขืก ืื™ื– ื’ืขื•ื•ืขืŸ ืื ืขืจืงืขื ื˜ ื•ื•ื™ ื“ืขืจ ื‘ืขืกื˜ืขืจ ื’ืขืฆื™ื™ึทื’ ืคื•ืŸ 2018 ืื•ื™ืฃ StackShare.

ืื ื“ืขืจืข ืื™ื ื”ืึทืœื˜ ืฉืึทืคื•ื ื’ ืึธืคึผืฆื™ืขืก

ื“ืึธืงื•ืกืึทื•ืจื•ืก ืื™ื– ืกืคึผืึทืกื™ืคื™ืงืœื™ ื“ื™ื–ื™ื™ื ื“ ืคึฟืึทืจ ืงืจื™ื™ื™ื˜ื™ื ื’ ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ. ื“ืึธืš, ืขืก ื–ืขื ืขืŸ ืึท ืžื™ืœื™ืึธืŸ ืื•ืŸ ืื™ื™ืŸ ื•ื•ืขื’ืŸ ืฆื• ืžืึทื›ืŸ ืึท ื•ื•ืขื‘ื–ื™ื™ื˜ืœ - ืื™ืจ ืงืขื ืขืŸ ืฆืขื•ื•ื™ืงืœืขืŸ ื“ื™ื™ืŸ ืื™ื™ื’ืขื ืข ืœื™ื™ื–ื•ื ื’ ืื™ืŸ ืงื™ื™ืŸ ืฉืคึผืจืึทืš, CMS ืึธื“ืขืจ ื ื•ืฆืŸ ืึท ืกื˜ืึทื˜ื™ืง ืคึผืœืึทืฅ ื’ืขื ืขืจืึทื˜ืึธืจ.

ืคึฟืึทืจ ื‘ื™ื™ึทืฉืคึผื™ืœ, ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ ืคึฟืึทืจ React, IBM ืคึผืœืึทืŸ ืกื™ืกื˜ืขื, Apollo ืื•ืŸ Ghost CMS ื ื•ืฆืŸ Gatsby - ืึท ืกื˜ืึทื˜ื™ืง ืคึผืœืึทืฅ ื’ืขื ืขืจืึทื˜ืึธืจ ื•ื•ืึธืก ืื™ื– ืึธืคื˜ ื’ืขื ื™ืฆื˜ ืคึฟืึทืจ ื‘ืœืึธื’ืก. ืื•ื™ื‘ ืื™ืจ ืึทืจื‘ืขื˜ ืžื™ื˜ Vue, VuePress ืื™ื– ืึท ื’ื•ื˜ ืึธืคึผืฆื™ืข ืคึฟืึทืจ ืื™ืจ. ืืŸ ืื ื“ืขืจ ืึธืคึผืฆื™ืข ืื™ื– ืฆื• ื ื•ืฆืŸ ืึท ื’ืขื ืขืจืึทื˜ืึธืจ ื’ืขืฉืจื™ื‘ืŸ ืื™ืŸ Python - MkDocs. ืขืก ืื™ื– ืึธืคึฟืŸ ืžืงื•ืจ ืื•ืŸ ืงืึทื ืคื™ื’ื™ืขืจื“ ืžื™ื˜ ืึท ืื™ื™ืŸ YAML ื˜ืขืงืข. GitBook ืื™ื– ืื•ื™ืš ืึท ื’ื•ื˜ ืึธืคึผืฆื™ืข, ืึธื‘ืขืจ ืขืก ืื™ื– ื‘ืœื•ื™ื– ืคืจื™ื™ ืคึฟืึทืจ ืฆื™ื‘ื•ืจ ืื•ืŸ ื ื™ื˜-ื’ืขืฉืขืคื˜ ื˜ื™ืžื–. ืื™ืจ ืงืขื ื˜ ืื•ื™ืš ืคืฉื•ื˜ ื•ืคึผืœืึธืึทื“ ืžืึทืจื“ืึธื•ื•ืŸ ื˜ืขืงืขืก ื ื™ืฆืŸ Git ืื•ืŸ ืึทืจื‘ืขื˜ ืžื™ื˜ ื–ื™ื™ ืื™ืŸ Github.

ื“ืึธืงื•ืžืขื ื˜ื™ื ื’ ืงืึทืžืคึผืึธื•ื ืึทื ืฅ: ื“ืึธืงื–, ืกื˜ืึธืจื™ื‘ืึธืึธืง ืื•ืŸ ืกื˜ื™ืœื’ื•ื™ื“ื™ืกื˜

ื’ื™ื™ื“ืœื™ื™ื ื–, ืกื™ืกื˜ืขื ืคึผืœืึทืŸ, ืงืึธืžืคึผืึธื ืขื ื˜ ืœื™ื™ื‘ืจืขืจื™ื– - ื•ื•ืขืœื›ืขืจ ืื™ืจ ืจื•ืคืŸ ื–ื™ื™, ืขืก ืื™ื– ื’ืขื•ื•ืืจืŸ ื–ื™ื™ืขืจ ืคืึธืœืงืก ืœืขืฆื˜ื ืก. ื“ื™ ืึทื“ื•ื•ืขื ื˜ ืคื•ืŸ ืงืึธืžืคึผืึธื ืขื ื˜ ืคืจืึทืžืขื•ื•ืึธืจืงืก ื•ื•ื™ React ืื•ืŸ ื“ื™ ืžื›ืฉื™ืจื™ื ื“ืขืจืžืื ื˜ ื“ืึธ ื”ืึธื‘ืŸ ืคืืจื•ื•ืื ื“ืœืขืŸ ื–ื™ื™ ืคื•ืŸ ื’ืึทื“ืœืขืก ืคึผืจืึทื“ื–ืฉืขืงืก ืื™ืŸ ื ื•ืฆื™ืง ืžื›ืฉื™ืจื™ื.

ืกื˜ืึธืจื™ื‘ืึธืึธืง, ื“ืึธืงื– ืื•ืŸ ืกื˜ื™ืœื’ื•ื™ื“ื™ืกื˜ ืึทืœืข ื˜ืึธืŸ ื“ื™ ื–ืขืœื‘ืข ื–ืึทืš: ื•ื•ื™ื™ึทื–ืŸ ื™ื ื˜ืขืจืึทืงื˜ื™ื•ื• ืขืœืขืžืขื ื˜ืŸ ืื•ืŸ ื“ืึธืงื•ืžืขื ื˜ ื–ื™ื™ืขืจ ืึทืคึผื™. ื ืคึผืจื•ื™ืขืงื˜ ืงืขื ืขืŸ ื”ืึธื‘ืŸ ื“ืึทื–ืึทื ื– ืึธื“ืขืจ ืืคื™ืœื• ื”ื•ื ื“ืขืจื˜ืขืจ ืคื•ืŸ ืงืึทืžืคึผืึธื•ื ืึทื ืฅ - ืึทืœืข ืžื™ื˜ ืคืึทืจืฉื™ื“ืขื ืข ืฉื˜ืึทื˜ืŸ ืื•ืŸ ืกื˜ื™ื™ืœื–. ืื•ื™ื‘ ืื™ืจ ื•ื•ื™ืœื˜ ืึทื– ืงืึทืžืคึผืึธื•ื ืึทื ืฅ ื–ืึธืœ ื–ื™ื™ืŸ ืจื™ื•ื–ื“, ืžืขื ื˜ืฉืŸ ื“ืึทืจืคึฟืŸ ืฆื• ื•ื•ื™ืกืŸ ืึทื– ื–ื™ื™ ืขืงืกื™ืกื˜ื™ืจืŸ. ืฆื• ื˜ืึธืŸ ื“ืึธืก, ื ืึธืจ ืงืึทื˜ืึทืœืึธื’ ื“ื™ ืงืึทืžืคึผืึธื•ื ืึทื ืฅ. ื’ื™ื™ื“ืœื™ื™ื ื– ืฆื•ืฉื˜ืขืœืŸ ืึทืŸ ื’ืจื™ื ื’ ืฆื• ื’ืขืคึฟื™ื ืขืŸ ืื™ื‘ืขืจื‘ืœื™ืง ืคื•ืŸ ืึทืœืข ื“ื™ื™ืŸ ืงืึทืžืคึผืึธื•ื ืึทื ืฅ. ื“ืึธืก ื”ืขืœืคึผืก ืฆื• ื”ืึทืœื˜ืŸ ื•ื•ื™ื–ืฉืึทื•ื•ืึทืœ ืงืึธื ืกื™ืกื˜ืขื ืกื™ ืื•ืŸ ื•ื™ืกืžื™ื™ื“ืŸ ืจื™ืคึผืขื˜ื™ื˜ื™ื•ื• ืึทืจื‘ืขื˜.

ื“ื™ ืžื›ืฉื™ืจื™ื ืฆื•ืฉื˜ืขืœืŸ ืึท ื‘ืึทืงื•ื•ืขื ื•ื•ืขื’ ืฆื• ื–ืขืŸ ืคืึทืจืฉื™ื“ืขื ืข ืฉื˜ืึทื˜ืŸ. ืขืก ืงืขืŸ ื–ื™ื™ืŸ ืฉื•ื•ืขืจ ืฆื• ืจืขืคึผืจืึธื“ื•ืฆื™ืจืŸ ื™ืขื“ืขืจ ืฉื˜ืึทื˜ ืคื•ืŸ ืึท ืงืึธืžืคึผืึธื ืขื ื˜ ืื™ืŸ ื“ืขื ืงืึธื ื˜ืขืงืกื˜ ืคื•ืŸ ืึท ืคืึทืงื˜ื™ืฉ ืึทืคึผืœืึทืงื™ื™ืฉืึทืŸ. ืึทื ืฉื˜ืึธื˜ ืฆื• ื’ืขื‘ืŸ ืึท ืงืœื™ืง ืื•ื™ืฃ ื“ื™ ืคืึทืงื˜ื™ืฉ ืึทืคึผืœืึทืงื™ื™ืฉืึทืŸ, ืขืก ืื™ื– ื•ื•ืขืจื˜ ืฆื• ืึทื ื˜ื•ื•ื™ืงืœืขืŸ ืึท ื‘ืึทื–ื•ื ื“ืขืจ ืงืึธืžืคึผืึธื ืขื ื˜. ืฉื•ื•ืขืจ-ืฆื•-ื“ืขืจื’ืจื™ื™ื›ืŸ ืฉื˜ืึทื˜ืŸ (ืึทื–ืึท ื•ื•ื™ ืœืึธื•ื“ื™ื ื’ ืฉื˜ืึทื˜ืŸ) ืงืขื ืขืŸ ื–ื™ื™ืŸ ืกื™ืžื™ืึทืœื™ื™ื˜ื™ื“.

ืฆื•ื–ืืžืขืŸ ืžื™ื˜ ืึท ื•ื•ื™ื–ืฉืึทื•ื•ืึทืœ ื“ืขืžืึทื ืกื˜ืจื™ื™ืฉืึทืŸ ืคื•ืŸ ืคืึทืจืฉื™ื“ืŸ ืฉื˜ืึทื˜ืŸ ืื•ืŸ ืึท ืจืฉื™ืžื” ืคื•ืŸ ืคึผืจืึธืคึผืขืจื˜ื™ืขืก, ืขืก ืื™ื– ืึธืคื˜ ื ื™ื™ื˜ื™ืง ืฆื• ืฉืจื™ื™ึทื‘ืŸ ืึท ื’ืขื ืขืจืึทืœ ื‘ืึทืฉืจื™ื™ึทื‘ื•ื ื’ ืคื•ืŸ ื“ื™ ืื™ื ื”ืึทืœื˜ - ืคึผืœืึทืŸ ืกื™ื™ื›ืœ, ื ื•ืฆืŸ ืงืึทืกืขืก ืึธื“ืขืจ ื“ื™ืกืงืจื™ืคึผืฉืึทื ื– ืคื•ืŸ ื‘ืึทื ื™ืฆืขืจ ื˜ืขืกื˜ื™ื ื’ ืจืขื–ื•ืœื˜ืึทื˜ืŸ. ืžืึทืจืงื“ืึทื•ืŸ ืื™ื– ื–ื™ื™ืขืจ ื’ืจื™ื ื’ ืฆื• ืœืขืจื ืขืŸ - ื™ื™ื“ื™ืœื™, ื’ื™ื™ื“ืœื™ื™ื ื– ื–ืึธืœ ื–ื™ื™ืŸ ืึท ืฉืขืจื“ ืžื™ื˜ืœ ืคึฟืึทืจ ื“ื™ื–ื™ื™ื ืขืจื– ืื•ืŸ ื“ืขื•ื•ืขืœืึธืคึผืขืจืก. Docz, Styleguidist ืื•ืŸ Storybook ืคืึธืจืฉืœืึธื’ืŸ ืึท ื•ื•ืขื’ ืฆื• ืœื™ื™ื›ื˜ ืžื™ืฉืŸ ืžืึทืจืงื“ืึทื•ืŸ ืžื™ื˜ ืงืึทืžืคึผืึธื•ื ืึทื ืฅ.

ื“ืึธืงื–

ื“ืขืจื•ื•ื™ื™ึทืœ Docz ืึทืจื‘ืขื˜ ื‘ืœื•ื™ื– ืžื™ื˜ React, ืึธื‘ืขืจ ืึทืงื˜ื™ื•ื• ืึทืจื‘ืขื˜ ืื™ื– ืึทื ื“ืขืจื•ื•ื™ื™ ืฆื• ืฉื˜ื™ืฆืŸ Preact, Vue ืื•ืŸ ื•ื•ืขื‘ ืงืึทืžืคึผืึธื•ื ืึทื ืฅ. ื“ืึธืงื– ืื™ื– ื“ื™ ืœืขืฆื˜ืข ืคื•ืŸ โ€‹โ€‹ื“ื™ ื“ืจื™ื™ ืžื›ืฉื™ืจื™ื, ืึธื‘ืขืจ ืขืก ืื™ื– ื’ืขืจืื˜ืŸ ืฆื• ื–ืึทืžืœืขืŸ ืื™ื‘ืขืจ 14 ืฉื˜ืขืจืŸ ืื•ื™ืฃ ื’ื™ื˜ื”ื•ื‘. ื“ืึธืงื– ื™ื ื˜ืจืึธื•ื“ื•ืกื˜ ืฆื•ื•ื™ื™ ืงืึทืžืคึผืึธื•ื ืึทื ืฅ - <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>

ืื™ืจ ืงืขื ืขืŸ ื™ื™ึทื ื•ื•ื™ืงืœืขืŸ ื“ื™ื™ืŸ ืื™ื™ื’ืขื ืข ืจืขืึทืงื˜ ืงืึทืžืคึผืึธื•ื ืึทื ืฅ ืžื™ื˜ <Playground>ืฆื• ืฉืึทืคึฟืŸ ืึทืŸ ืึทื ืึทืœืึธื’ ืคื•ืŸ ื“ื™ ื’ืขื‘ื•ื™ื˜-ืื™ืŸ ืงืึธื“ืขืคึผืขืŸ ืึธื“ืขืจ ืงืึธื“ืขืกืึทื ื“ื‘ืึธืงืก - ื“ืึธืก ืื™ื–, ืื™ืจ ื–ืขืŸ ื“ื™ื™ืŸ ืงืึธืžืคึผืึธื ืขื ื˜ ืื•ืŸ ืงืขื ืขืŸ ืจืขื“ืึทื’ื™ืจืŸ ืขืก.

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

<Props> ื•ื•ืขื˜ ื•ื•ื™ื™ึทื–ืŸ ืึทืœืข ื‘ื ื™ืžืฆื ืคึผืจืึธืคึผืขืจื˜ื™ืขืก ืคึฟืึทืจ ืึท ื’ืขื’ืขื‘ืŸ ืจืขืึทืงื˜ ืงืึธืžืคึผืึธื ืขื ื˜, ืคืขืœื™ืงื™ื™ึทื˜ ื•ื•ืึทืœื•ืขืก ืื•ืŸ ืฆื™ ื“ื™ ืคืึทืจืžืึธื’ ืื™ื– ืคืืจืœืื ื’ื˜.

<Props of={Button} />

ืคึผืขืจืกื ืึทืœื™, ืื™ืš ื’ืขืคึฟื™ื ืขืŸ ื“ืขื MDX ื‘ืื–ื™ืจื˜ ืฆื•ื’ืึทื ื’ ืฆื• ื–ื™ื™ืŸ ื“ื™ ื™ื–ื™ืึทืกื˜ ืฆื• ืคึฟืึทืจืฉื˜ื™ื™ืŸ ืื•ืŸ ื“ื™ ื™ื–ื™ืึทืกื˜ ืฆื• ืึทืจื‘ืขื˜ืŸ ืžื™ื˜.

ืœื™ื™ื•ื• ื’ื™ื™ื“ืœื™ื™ื ื– - MDX ืื•ืŸ ืื ื“ืขืจืข ืคืจืึทืžืขื•ื•ืึธืจืงืก

ืื•ื™ื‘ ืื™ืจ ื–ืขื ื˜ ืึท ืคืึธื›ืขืจ ืคื•ืŸ ื“ื™ Gatsby ืกื˜ืึทื˜ื™ืง ืคึผืœืึทืฅ ื’ืขื ืขืจืึทื˜ืึธืจ, Docz ืึธืคืคืขืจืก ืึท ื’ืจื•ื™ืก ื™ื ืึทื’ืจื™ื™ืฉืึทืŸ.

ื ื•ืกื— ืคื™ืจืขืจ

ื•ื•ื™ Docz, ื‘ื™ื™ืฉืคื™ืœืŸ ื–ืขื ืขืŸ ื’ืขืฉืจื™ื‘ืŸ ืžื™ื˜ Markdown ืกื™ื ื˜ืึทืงืก. Styleguidist ื ื™ืฆื˜ ืžืึทืจืงื“ืึธื•ื•ืŸ ืงืึธื“ ื‘ืœืึทืงืก (ื“ืจื™ื™ึทื™ืง ืงื•ื•ืึธื˜ืขืก) ืื™ืŸ ืจืขื’ื•ืœืขืจ ื˜ืขืงืขืก .md ื˜ืขืงืขืก, ื ื™ืฉื˜ MDX.

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

ืงืึธื“ ื‘ืœืึทืงืก ืื™ืŸ ืžืึทืจืงื“ืึทื•ืŸ ื™ื•ื–ืฉืึทื•ื•ืึทืœื™ ื ืึธืจ ื•ื•ื™ื™ึทื–ืŸ ืงืึธื“. ื•ื•ืขืŸ ืื™ืจ ื ื•ืฆืŸ Styleguidist, ืงื™ื™ืŸ ื‘ืœืึธืง ืคื•ืŸ ืงืึธื“ ืžื™ื˜ ืึท ืฉืคึผืจืึทืš ืงื•ื•ื™ื˜ืœ js, jsx ืึธื“ืขืจ javascript ื•ื•ืขื˜ ืจืขืคื™ืจืŸ ื•ื•ื™ ืึท ืจืขืึทืงื˜ ืงืึธืžืคึผืึธื ืขื ื˜. ื•ื•ื™ Docz, ื“ื™ ืงืึธื“ ืื™ื– ืขื“ื™ื˜ืึทื‘ืœืข - ืื™ืจ ืงืขื ืขืŸ ื˜ื•ื™ืฉืŸ ืคึผืจืึธืคึผืขืจื˜ื™ืขืก ืื•ืŸ ื’ืœื™ื™ืš ื–ืขืŸ ื“ื™ ืจืขื–ื•ืœื˜ืึทื˜.

ืœื™ื™ื•ื• ื’ื™ื™ื“ืœื™ื™ื ื– - MDX ืื•ืŸ ืื ื“ืขืจืข ืคืจืึทืžืขื•ื•ืึธืจืงืก

Styleguidist ื•ื•ืขื˜ ืื•ื™ื˜ืึธืžืึทื˜ื™ืฉ ืžืึทื›ืŸ ืึท ืคืึทืจืžืึธื’ ื˜ื™ืฉ ืคึฟื•ืŸ ืคึผืจืึธืคึผื˜ื™ืคึผืขืก, ืคืœืึธื• ืึธื“ืขืจ ื˜ื™ืคึผืกืงืจื™ืคึผื˜ ื“ืขืงืœืขืจื™ื™ืฉืึทื ื–.

ืœื™ื™ื•ื• ื’ื™ื™ื“ืœื™ื™ื ื– - MDX ืื•ืŸ ืื ื“ืขืจืข ืคืจืึทืžืขื•ื•ืึธืจืงืก

Styleguidist ื“ืขืจื•ื•ื™ื™ึทืœ ืฉื˜ื™ืฆื˜ React ืื•ืŸ Vue.

ืกื˜ืึธืจื™ื‘ืึธืึธืง

ืกื˜ืึธืจื™ื‘ืึธืึธืง ืคึผืึทื–ื™ืฉืึทื ื“ ื–ื™ืš ื•ื•ื™ ืึท "ื•ื™ ืงืึธืžืคึผืึธื ืขื ื˜ ืึทื ื˜ื•ื•ื™ืงืœื•ื ื’ ืกื•ื•ื™ื•ื•ืข." ืึทื ืฉื˜ืึธื˜ ืคื•ืŸ ืฉืจื™ื™ื‘ืŸ ื‘ื™ื™ืฉืคึผื™ืœ ืงืึทืžืคึผืึธื•ื ืึทื ืฅ ืื™ืŸ Markdown ืึธื“ืขืจ MDX ื˜ืขืงืขืก, ืื™ืจ ืฉืจื™ื™ึทื‘ืŸ ื’ืขืฉื™ื›ื˜ืข ื™ืŸ ื“ื–ืฉืึทื•ื•ืึทืกืงืจื™ืคึผื˜ ื˜ืขืงืขืก. ื’ืขืฉื™ื›ื˜ืข ื“ืึธืงื•ืžืขื ื˜ ื“ื™ ืกืคึผืขืฆื™ืคื™ืฉ ืฉื˜ืึทื˜ ืคื•ืŸ ืึท ืงืึธืžืคึผืึธื ืขื ื˜. ืคึฟืึทืจ ื‘ื™ื™ึทืฉืคึผื™ืœ, ืึท ืงืึธืžืคึผืึธื ืขื ื˜ ืงืขืŸ ื”ืึธื‘ืŸ ื”ื™ืกื˜ืึธืจื™ืขืก ืคึฟืึทืจ ืึท ืœืึธื•ื“ื™ื“ ืฉื˜ืึทื˜ ืื•ืŸ ืึท ืคืึทืจืงืจื™ืคึผืœื˜ ืฉื˜ืึทื˜ (ืคืึทืจืงืจื™ืคึผืœื˜).

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

ืกื˜ืึธืจื™ื‘ืึธืึธืง ืื™ื– ืคื™ืœ ืžืขืจ ืงืึธืžืคึผืœื™ืฆื™ืจื˜ ื•ื•ื™ Styleguidist ืื•ืŸ Docz. ืึธื‘ืขืจ ืื™ืŸ ื“ืขืจ ื–ืขืœื‘ื™ืงืขืจ ืฆื™ื™ื˜, ื“ืึธืก ืื™ื– ื“ื™ ืžืขืจืกื˜ ืคืึธืœืงืก ืึธืคึผืฆื™ืข; ื“ื™ ืคึผืจื•ื™ืขืงื˜ ื”ืื˜ ืžืขืจ ื•ื•ื™ 36 ืฉื˜ืขืจืŸ ืื•ื™ืฃ ื’ื™ื˜ื”ื•ื‘. ืขืก ืื™ื– ืึทืŸ ืึธืคึฟืŸ ืžืงื•ืจ ืคึผืจื•ื™ืขืงื˜ ืžื™ื˜ 000 ืžื™ื˜ืืจื‘ืขื˜ืขืจืก ืื•ืŸ ืคื•ืœ-ืฆื™ื™ื˜ ืฉื˜ืขืงืŸ. ืขืก ืื™ื– ื’ืขื ื™ืฆื˜ ื“ื•ืจืš Airbnb, Algolia, Atlassian, Lyft ืื•ืŸ Salesforce. ืกื˜ืึธืจื™ื‘ืึธืึธืง ืฉื˜ื™ืฆื˜ ืžืขืจ ืคืจืึทืžืขื•ื•ืึธืจืงืก ื•ื•ื™ ืงืึธืžืคึผืขื˜ื™ื˜ืึธืจืก - 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>

ื“ื™ ื ื™ื™ึทืข ืคึฟืขื™ึดืงื™ื™ื˜ืŸ ืคื•ืŸ ืกื˜ืึธืจื™ื‘ืึธืึธืง ื•ื•ืขืœืŸ ื‘ื™ืกืœืขื›ื•ื•ื™ื™ึทื– ืจืึธื•ืœื“ ืื•ื™ืก ืื™ืŸ ื“ื™ ืงื•ืžืขื ื“ื™ืง ื‘ื™ืกืœ ื—ื“ืฉื™ื ืื•ืŸ ืขืก ืงื•ืงื˜ ื•ื•ื™ ืขืก ื•ื•ืขื˜ ื–ื™ื™ืŸ ืึท ื’ืจื•ื™ืก ืฉืจื™ื˜ ืคืึธืจื•ื™ืก.

ืจืขื–ื•ืœื˜ืึทื˜ืŸ ืคื•ืŸ

ื“ื™ ื‘ืขื ืขืคื™ืฅ ืคื•ืŸ ืึท ืžื•ืกื˜ืขืจ ื‘ื™ื‘ืœื™ืึธื˜ืขืง ื–ืขื ืขืŸ ื“ืขืจื”ื•ื™ื‘ืŸ ืื™ืŸ ืžื™ืœื™ืึทื ื– ืคื•ืŸ ืึทืจื˜ื™ืงืœืขืŸ ืื•ื™ืฃ ืžืขื“ื™ื•ื. ื•ื•ืขืŸ ืขืก ืื™ื– ื’ื•ื˜, ื–ื™ื™ ืžืึทื›ืŸ ืขืก ื’ืจื™ื ื’ืขืจ ืฆื• ืฉืึทืคึฟืŸ ืคึฟืึทืจื‘ื•ื ื“ืขื ืข ืคึผืจืึธื“ื•ืงื˜ืŸ ืื•ืŸ ื”ืึทืœื˜ืŸ ืื™ื“ืขื ื˜ื™ื˜ืขื˜. ืคื•ืŸ ืงื•ืจืก, ืงื™ื™ืŸ ืคื•ืŸ ื“ื™ ืžื›ืฉื™ืจื™ื ื•ื•ืขื˜ ืžืึทื“ื–ืฉื™ืงืึทืœื™ ืžืึทื›ืŸ ืึท ืคึผืœืึทืŸ ืกื™ืกื˜ืขื. ื“ืขื ืจื™ืงื•ื•ื™ื™ืขืจื– ืึธืคึผื’ืขื”ื™ื˜ ืคึผืœืึทืŸ ืื•ืŸ CSS. ืึธื‘ืขืจ ื•ื•ืขืŸ ืขืก ืงื•ืžื˜ ืฆื™ื™ื˜ ืฆื• ืžืึทื›ืŸ ืึท ืคึผืœืึทืŸ ืกื™ืกื˜ืขื ืฆื•ื˜ืจื™ื˜ืœืขืš ืคึฟืึทืจ ื“ื™ ื’ืื ืฆืข ืคื™ืจืžืข, ื“ืึธืงื–, ืกื˜ืึธืจื™ื‘ืึธืึธืง ืื•ืŸ ืกื˜ื™ืœื’ื•ื™ื“ื™ืกื˜ ื–ืขื ืขืŸ ื’ืจื•ื™ืก ืึธืคึผืฆื™ืขืก.

ืคื•ืŸ ื“ืขืจ ืื™ื‘ืขืจื–ืขืฆืขืจ. ื“ืึธืก ืื™ื– ืžื™ื™ืŸ ืขืจืฉื˜ืขืจ ื“ืขืจืคืึทืจื•ื ื’ ืื•ื™ืฃ Habrรฉ. ืื•ื™ื‘ ืื™ืจ ื’ืขืคึฟื™ื ืขืŸ ืงื™ื™ืŸ ื™ื ืึทืงื™ืขืจืึทื˜ื™ื–, ืึธื“ืขืจ ื”ืึธื‘ืŸ ืคึฟื™ืจืœื™ื™ื’ืŸ ืฆื• ืคึฟืึทืจื‘ืขืกืขืจืŸ ื“ืขื ืึทืจื˜ื™ืงืœ, ืฉืจื™ื™ึทื‘ืŸ ืฆื• ืžื™ืจ ืื™ืŸ ืึท ืคึผืขืจื–ืขื ืœืขืš ืึธื ื–ืึธื’.

ืžืงื•ืจ: www.habr.com

ืœื™ื™ื’ืŸ ืึท ื‘ืึทืžืขืจืงื•ื ื’