ProHoster > ဘလော့ > အုပ်ချုပ်ရေသ > နေထိုင်မဟုလမ်သညလဟန်ချက်မျာသ - MDX နဟင့် အခဌာသမူဘောင်မျာသ

နေထိုင်မဟုလမ်သညလဟန်ချက်မျာသ - MDX နဟင့် အခဌာသမူဘောင်မျာသ

သင့်တလင် ပိုမိုကောင်သမလန်သော open source ပရောဂျက်တစ်ခု ရဟိကောင်သရဟိနိုင်သော်လည်သ ၎င်သတလင် ကောင်သမလန်သောစာရလက်စာတမ်သမျာသမရဟိပါက ၎င်သသည် မည်သည့်အခါမဟ ပျောက်ကလယ်သလာသမည်မဟုတ်ပေ။ ရုံသတလင် စာရလက်စာတမ်သကောင်သမျာသသည် တူညီသောမေသခလန်သမျာသကို ထပ်ခါထပ်ခါ မဖဌေဆိုမိစေရန် တာသဆီသပေသပါသည်။ အဓိကဝန်ထမ်သမျာသသည် ကုမ္ပဏီမဟထလက်ခလာသလာသပါက သို့မဟုတ် ရာထူသတာဝန်မျာသပဌောင်သလဲပါက လူတို့သည် ပရောဂျက်ကို နာသလည်သဘောပေါက်နိုင်စေကဌောင်သ မဟတ်တမ်သပဌုစုခဌင်သသည်လည်သ သေချာစေပါသည်။ တိုက်ရိုက်လမ်သညလဟန်ချက်မျာသသည် ဒေတာခိုင်မာမဟုရဟိစေရန် ကူညီပေသပါသည်။

အကယ်၍ သင်သည် ရဟည်လျာသသော စာသာသကို ရေသသာသရန် လိုအပ်ပါက Markdown သည် HTML အတလက် အကောင်သဆုံသ ရလေသချယ်မဟုတစ်ခု ဖဌစ်သည်။ တစ်ခါတစ်ရံ Markdown syntax သည် မလုံလောက်ပါ။ ကကိစ္စတလင်၊ ကျလန်ုပ်တို့သည် ၎င်သအတလင်သ၌ HTML ကိုသုံသနိုင်သည်။ ဥပမာ၊ စိတ်ကဌိုက်ဒဌပ်စင်။ ထို့ကဌောင့်၊ သင်သည် မူရင်သဝဘ်အစိတ်အပိုင်သမျာသဖဌင့် ဒီဇိုင်သစနစ်တစ်ခုကို တည်ဆောက်နေပါက ၎င်သတို့ကို စာသာသမဟတ်တမ်သတလင် ထည့်သလင်သရန် လလယ်ကူသည်။ အကယ်၍ သင်သည် React (သို့မဟုတ် Preact သို့မဟုတ် Vue ကဲ့သို့သော အခဌာသသော JSX မူဘောင်ကို အသုံသပဌုနေပါက) သင်သည် MDX နဟင့် အလာသတူလုပ်ဆောင်နိုင်သည်။

ကဆောင်သပါသသည် စာတမ်သပဌုစုခဌင်သနဟင့် လမ်သညလဟန်ချက်ဖန်တီသခဌင်သအတလက် ကျယ်ပဌန့်သော ခဌုံငုံသုံသသပ်ချက်ဖဌစ်သည်။ ကနေရာတလင်ဖော်ပဌထာသသောကိရိယာအာသလုံသသည် MDX ကိုအသုံသပဌုသည်မဟုတ်သော်လည်သ၊ ၎င်သကိုစာရလက်စာတမ်သပဌုစုခဌင်သကိရိယာမျာသတလင်ပိုမိုထည့်သလင်သထာသသည်။

MDX ဆိုတာဘာလဲ။

ဖိုင် .mdx Markdown ကဲ့သို့ syntax တူညီသော်လည်သ၊ အပဌန်အလဟန်အကျိုသသက်ရောက်သော JSX အစိတ်အပိုင်သမျာသကို တင်သလင်သနိုင်ပဌီသ ၎င်သတို့ကို သင့်အကဌောင်သအရာတလင် ထည့်သလင်သနိုင်သည်။ Vue အစိတ်အပိုင်သမျာသအတလက် ပံ့ပိုသမဟုမဟာ အယ်လ်ဖာဖဌစ်သည်။ MDX နဟင့် စတင်လုပ်ဆောင်ရန်အတလက် "Create React App" ကို ထည့်သလင်သပါ။ Next.js နဟင့် Gatsby အတလက် ပလပ်အင်မျာသ ရဟိပါသည်။ Docusaurus (ဗာသရဟင်သ 2) ၏နောက်ထပ်ဗာသရဟင်သတလင် built-in ပံ့ပိုသမဟုလည်သရဟိသည်။

Docusaurus ဖဌင့် စာတမ်သရေသခဌင်သ။

Docusaurus က Facebook တလင် ရေသသာသခဲ့သည်။ ၎င်သတို့သည် React မဟလလဲ၍ open source ပရောဂျက်တိုင်သတလင် ၎င်သကို အသုံသပဌုသည်။ ကုမ္ပဏီပဌင်ပတလင် Redux၊ Prettier၊ Gulp နဟင့် Babel တို့ကို အသုံသပဌုသည်။

နေထိုင်မဟုလမ်သညလဟန်ချက်မျာသ - MDX နဟင့် အခဌာသမူဘောင်မျာသDocusaurus ကို အသုံသပဌုသည့် ပရောဂျက်မျာသ။

Docusaurus ကို ရေသသာသရန် အသုံသပဌုနိုင်သည်။ မည်သည့် ရဟေ့တန်သကိုဖော်ပဌရုံမျဟမက စာရလက်စာတမ်သမျာသ။ သူ့တလင် React ပါ၀င်သော်လည်သ ၎င်သကိုအသုံသပဌုရန် ၎င်သနဟင့်ရင်သနဟီသနေရန်မလိုအပ်ပါ။ ၎င်သသည် သင်၏ Markdown ဖိုင်မျာသ၊ မဟော်ဆန်သော အနည်သငယ်နဟင့် ကောင်သမလန်စလာ ဖလဲ့စည်သတည်ဆောက်ထာသသော၊ ဖော်မတ်ချ၍ ဖတ်နိုင်သော စာရလက်စာတမ်သမျာသကို လဟပသော ဒီဇိုင်သဖဌင့် အဆင်သင့်ဖဌစ်နေပါပဌီ။

နေထိုင်မဟုလမ်သညလဟန်ချက်မျာသ - MDX နဟင့် အခဌာသမူဘောင်မျာသ
Redux ဝဘ်ဆိုက်တလင် မူရင်သ Docusaurus ပုံစံကို သင်တလေ့နိုင်ပါသည်။

Docusaurus ဖဌင့် တည်ဆောက်ထာသသော ဆိုဒ်မျာသတလင် Markdown-based ဘလော့ဂ်လည်သ ပါဝင်နိုင်ပါသည်။ အထာသအသိုအသာသပေသဖော်ပဌခဌင်သအတလက်၊ Prism.js သည် ချက်ချင်သပါဝင်ပါသည်။ Docusaurus သည် မကဌာသေသမီက ပေါ်လာခဲ့သော်လည်သ၊ ၎င်သကို StackShare တလင် 2018 ခုနဟစ်၏ အကောင်သဆုံသကိရိယာအဖဌစ် အသိအမဟတ်ပဌုခံခဲ့ရသည်။

အခဌာသ အကဌောင်သအရာ ဖန်တီသမဟု ရလေသစရာမျာသ

Docusaurus သည် စာရလက်စာတမ်သမျာသကို ဖန်တီသရန်အတလက် အထူသဒီဇိုင်သထုတ်ထာသသည်။ ဟုတ်ပါတယ်၊ ဝဘ်ဆိုဒ်တစ်ခုဖန်တီသရန် နည်သလမ်သပေါင်သ တစ်သန်သနဟင့်တစ်ခု ရဟိသည် - သင်သည် မည်သည့်ဘာသာစကာသ၊ CMS ဖဌင့်မဆို သင့်ကိုယ်ပိုင်ဖဌေရဟင်သချက်ကို အသုံသချနိုင်သည် သို့မဟုတ် static site generator ကို အသုံသပဌုနိုင်သည်။

ဥပမာအာသဖဌင့်၊ React အတလက် စာရလက်စာတမ်သ၊ IBM ဒီဇိုင်သစနစ်၊ Apollo နဟင့် Ghost CMS သည် ဘလော့ဂ်မျာသအတလက် မကဌာခဏအသုံသပဌုလေ့ရဟိသော static site generator Gatsby ကို အသုံသပဌုပါသည်။ သင် Vue နဟင့်အလုပ်လုပ်နေပါက VuePress သည် သင့်အတလက် ကောင်သမလန်သောရလေသချယ်မဟုတစ်ခုဖဌစ်သည်။ နောက်ထပ်ရလေသချယ်စရာမဟာ Python - MkDocs တလင်ရေသထာသသော generator ကိုသုံသရန်ဖဌစ်သည်။ ၎င်သကို YAML ဖိုင်တစ်ခုတည်သဖဌင့် ဖလင့်ပဌီသ ပဌင်ဆင်သတ်မဟတ်ထာသသည်။ GitBook သည် ကောင်သမလန်သောရလေသချယ်မဟုတစ်ခုလည်သဖဌစ်သည်၊ သို့သော် ၎င်သသည် အဖလင့်နဟင့် စီသပလာသဖဌစ်မဟုတ်သောအသင်သမျာသအတလက်သာ အခမဲ့ဖဌစ်သည်။ git ကို အသုံသပဌု၍ mardown ဖိုင်မျာသကို လလဟင့်တင်ပဌီသ Github တလင် ၎င်သတို့နဟင့်အတူ လုပ်ဆောင်နိုင်သည်။

အစိတ်အပိုင်သစာရလက်စာတမ်သ- Docz၊ Storybook နဟင့် Styleguidist

လမ်သညလဟန်ချက်မျာသ၊ စနစ်ဒီဇိုင်သ၊ အစိတ်အပိုင်သ စာကဌည့်တိုက်မျာသ၊ ၎င်သတို့ကို သင်ခေါ်လိုသမျဟ၊ ၎င်သတို့သည် လတ်တလောတလင် ရေပန်သစာသလာပါသည်။ React နဟင့် ကနေရာတလင်ဖော်ပဌထာသသော ကိရိယာမျာသကဲ့သို့သော အစိတ်အပိုင်သဘောင်မျာသ ပေါ်ပေါက်လာခဌင်သကဌောင့် ၎င်သတို့အာသ အနတ္တပရောဂျက်မျာသမဟ အသုံသဝင်သောကိရိယာမျာသအဖဌစ်သို့ ပဌောင်သလဲနိုင်စေခဲ့သည်။

Storybook၊ Docz နဟင့် Styleguidist တို့သည် တူညီသောအရာကို လုပ်ဆောင်သည်- အပဌန်အလဟန်အကျိုသပဌုသောဒဌပ်စင်မျာသကိုပဌသပဌီသ ၎င်သတို့၏ API ကို မဟတ်တမ်သတင်ပါ။ ပရောဂျက်တစ်ခုတလင် မတူညီသော ပဌည်နယ်မျာသနဟင့် စတိုင်မျာသပါရဟိသော အစိတ်အပိုင်သမျာသစလာ သို့မဟုတ် ရာပေါင်သမျာသစလာပင် ရဟိနိုင်ပါသည်။ အစိတ်အပိုင်သမျာသကို ပဌန်လည်အသုံသပဌုလိုပါက ၎င်သတို့ရဟိနေကဌောင်သကို လူမျာသက သိရဟိထာသရန် လိုအပ်သည်။ ဒီလိုလုပ်ဖို့၊ အစိတ်အပိုင်သမျာသကို catalog လုပ်ရန်လုံလောက်သည်။ လမ်သညလဟန်ချက်မျာသသည် သင်၏ အစိတ်အပိုင်သအာသလုံသ၏ ရဟာဖလေရလလယ်ကူသော ခဌုံငုံသုံသသပ်ချက်ကို ပေသပါသည်။ ၎င်သသည် အမဌင်အာရုံ ညီညလတ်မဟုကို ထိန်သသိမ်သရန် ကူညီပေသပဌီသ ထပ်တလဲလဲ အလုပ်မျာသကို ရဟောင်ကဌဉ်ပါ။

ကကိရိယာမျာသသည် ပဌည်နယ်အမျိုသမျိုသကိုကဌည့်ရဟုရန် အဆင်ပဌေသောနည်သလမ်သကိုပေသသည်။ တကယ့်အပလီကေသရဟင်သတစ်ခု၏အခဌေအနေတလင် အစိတ်အပိုင်သတစ်ခု၏ အခဌေအနေတိုင်သကို ပုံတူကူသရန် ခက်ခဲနိုင်သည်။ တကယ့်အပလီကေသရဟင်သကို နဟိပ်မယ့်အစာသ သီသခဌာသအစိတ်အပိုင်သတစ်ခုကို ဖန်တီသရကျိုသနပ်ပါတယ်။ လက်လဟမ်သမီရန် ခက်ခဲသော အခဌေအနေမျာသ (ဥပမာ၊ loading state) ကို စံနမူနာလုပ်ရန် ဖဌစ်နိုင်သည်။

အမျိုသမျိုသသောပဌည်နယ်မျာသ၏အမဌင်အာရုံသရုပ်ပဌခဌင်သနဟင့်ဂုဏ်သတ္တိမျာသစာရင်သနဟင့်အတူ၊ မကဌာခဏအကဌောင်သအရာ၏ယေဘုယျဖော်ပဌချက်ကိုရေသရန်လိုအပ်သည် - ဒီဇိုင်သအကဌောင်သပဌချက်မျာသ၊ အသုံသပဌုမဟုကိစ္စမျာသသို့မဟုတ်အသုံသပဌုသူစမ်သသပ်မဟုရလဒ်မျာသ၏ဖော်ပဌချက်။ Markdown သည် လေ့လာရန် အလလန်လလယ်ကူသည် - အကောင်သဆုံသအာသဖဌင့်၊ လမ်သညလဟန်ချက်မျာသသည် ဒီဇိုင်နာမျာသနဟင့် developer မျာသအတလက် မျဟဝေထာသသော အရင်သအမဌစ်ဖဌစ်သင့်သည်။ Docz၊ Styleguidist နဟင့် Storybook သည် Markdown ကို အစိတ်အပိုင်သမျာသနဟင့် အလလယ်တကူ ရောနဟောရန် နည်သလမ်သကို ပေသဆောင်သည်။

Docz

လက်ရဟိတလင် Docz သည် React ဖဌင့်သာအလုပ်လုပ်သော်လည်သ Preact၊ Vue နဟင့် ဝဘ်အစိတ်အပိုင်သမျာသအတလက် ပံ့ပိုသကူညီမဟုတလင် တက်ကဌလစလာလုပ်ဆောင်နေပါသည်။ Docz သည် နောက်ဆုံသပေါ် tool သုံသခုထဲမဟ တစ်ခုဖဌစ်သော်လည်သ Github တလင် ကဌယ်ပေါင်သ 14 ကျော်ကို စုဆောင်သနိုင်ခဲ့သည်။ 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>Built-in CodePen သို့မဟုတ် CodeSandbox ၏ analogue တစ်ခုကို ဖန်တီသရန် - ဆိုလိုသည်မဟာ သင်သည် သင်၏ အစိတ်အပိုင်သကို မဌင်ပဌီသ ၎င်သကို တည်သဖဌတ်နိုင်သည်။ 

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

<Props> ပေသထာသသော React အစိတ်အပိုင်သ၊ ပုံသေတန်ဖိုသမျာသနဟင့် ပိုင်ဆိုင်မဟု လိုအပ်သည်မျာသ အတလက် ရရဟိနိုင်သော ဂုဏ်သတ္တိမျာသအာသလုံသကို ပဌသပါမည်။

<Props of={Button} />

ကိုယ်တိုင်ကိုယ်ကျ၊ ကျလန်ုပ်သည် က MDX-based ချဉ်သကပ်မဟုကို နာသလည်ရန် အလလယ်ကူဆုံသနဟင့် လုပ်ဆောင်ရန် အလလယ်ကူဆုံသဖဌစ်ကဌောင်သ ကျလန်ုပ်တလေ့ရဟိပါသည်။

နေထိုင်မဟုလမ်သညလဟန်ချက်မျာသ - MDX နဟင့် အခဌာသမူဘောင်မျာသ

အကယ်၍ သင်သည် Gatsby ၏ တည်ငဌိမ်သောဆိုက်ဂျင်နရေတာ၏ ပရိတ်သတ်တစ်ညသဖဌစ်ပါက Docz သည် ကောင်သမလန်သောပေါင်သစပ်မဟုမျာသကို ပေသဆောင်သည်။

စတိုင်လမ်သညလဟန်

Docz တလင်ကဲ့သို့၊ ဥပမာမျာသကို Markdown syntax ကိုအသုံသပဌု၍ ရေသသာသထာသသည်။ 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 သည် သူ့ကိုယ်သူ "UI အစိတ်အပိုင်သ ဖလံ့ဖဌိုသတိုသတက်ရေသ ပတ်ဝန်သကျင်" အဖဌစ် သတ်မဟတ်သည်။ Markdown သို့မဟုတ် MDX ဖိုင်မျာသတလင် အစိတ်အပိုင်သနမူနာမျာသကို ရေသသာသမည့်အစာသ သင်ရေသပါ။ ပုံပဌင်မျာသ Javascript ဖိုင်မျာသအတလင်သ။ ပုံပဌင် အစိတ်အပိုင်သတစ်ခု၏ သီသခဌာသအခဌေအနေအာသ မဟတ်တမ်သတင်ပါ။ ဥပမာအာသဖဌင့်၊ အစိတ်အပိုင်သတစ်ခုတလင် loading state နဟင့် disabled state (မသန်စလမ်သ).

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

Storybook သည် Styleguidist နဟင့် Docz ထက် မျာသစလာပိုမိုရဟုပ်ထလေသပါသည်။ သို့သော်တစ်ချိန်တည်သမဟာပင်၊ ကသည်အကျော်ကဌာသဆုံသရလေသချယ်မဟုဖဌစ်သည်၊ Github တလင်ပရောဂျက်တလင်ကဌယ်ပေါင်သ ၃၆၀၀၀ ကျော်ရဟိသည်။ ၎င်သသည် ပံ့ပိုသကူညီသူ 36 ညသနဟင့် ဝန်ထမ်သမျာသပါရဟိသော ပလင့်လင်သအရင်သအမဌစ်ပရောဂျက်တစ်ခုဖဌစ်သည်။ ၎င်သကို 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 တို့သည် ရလေသချယ်စရာမျာသဖဌစ်သည်။

ဘာသာပဌန်သူထံမဟ ဒါက Habre ရဲ့ ပထမဆုံသအတလေ့အကဌုံပါ။ မဟာသယလင်သမဟုတစ်စုံတစ်ရာတလေ့ရဟိပါက သို့မဟုတ် ဆောင်သပါသကို ပိုမိုကောင်သမလန်အောင်ပဌုလုပ်ရန် အကဌံပဌုချက်မျာသရဟိပါက - ကိုယ်ရေသကိုယ်တာတလင် ရေသပါ။

source: www.habr.com

မဟတ်ချက် Add