နေထိုင်မှုလမ်းညွှန်ချက်များ - 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 တို့ကို အသုံးပြုသည်။

Docusaurus ကို အသုံးပြုသည့် ပရောဂျက်များ။

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

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 ချဉ်းကပ်မှုကို နားလည်ရန် အလွယ်ကူဆုံးနှင့် လုပ်ဆောင်ရန် အလွယ်ကူဆုံးဖြစ်ကြောင်း ကျွန်ုပ်တွေ့ရှိပါသည်။

အကယ်၍ သင်သည် 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 ကဲ့သို့ပင်၊ ကုဒ်ကို ပြင်နိုင်သည် - သင်သည် ဂုဏ်သတ္တိများကို ပြောင်းလဲနိုင်ပြီး ရလဒ်ကို ချက်ချင်းမြင်နိုင်သည်။

Styleguidist သည် PropTypes၊ Flow သို့မဟုတ် Typescript ကြေငြာချက်များမှ ပိုင်ဆိုင်မှုစာရွက်တစ်ခုကို အလိုအလျောက်ဖန်တီးပေးလိမ့်မည်။

ယခု 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