Malangizo amoyo - MDX ndi zina

Mutha kukhala ndi pulojekiti yabwino kwambiri yotsegulira, koma ngati ilibe zolembedwa zabwino, mwayi ndilakuti sichidzachoka. Muofesi, zolemba zabwino zidzakulepheretsani kuyankha mafunso omwewo. Zolemba zimatsimikiziranso kuti anthu atha kumvetsetsa pulojekitiyo ngati ogwira ntchito ofunikira asiya kampani kapena maudindo asintha. Malangizo amoyo adzathandiza kuonetsetsa kuti deta ikugwirizana.

Ngati mukufuna kulemba zolemba zazitali, Markdown ndi njira ina yabwino yosinthira HTML. Nthawi zina mawu a Markdown siwokwanira. Pankhaniyi titha kugwiritsa ntchito HTML mkati mwake. Mwachitsanzo, zinthu zachilengedwe. Chifukwa chake, ngati mukupanga dongosolo lokonzekera ndi zigawo zapaintaneti, zitha kuphatikizidwa mosavuta m'malemba. Ngati mukugwiritsa ntchito React (kapena chimango chilichonse cha JSX ngati Preact kapena Vue), mutha kuchita zomwezo pogwiritsa ntchito MDX.

Nkhaniyi ikufotokoza mwachidule zida zolembera zolemba ndikupanga malangizo. Sizida zonse zomwe zalembedwa pano zomwe zimagwiritsa ntchito MDX, koma ikuphatikizidwa kwambiri muzolemba.

Kodi MDX ndi chiyani?

file .mdx ili ndi mawu ofanana ndi Markdown, koma imakulolani kuti mulowetse zigawo za JSX ndi kuziyika muzolemba zanu. Thandizo la zigawo za Vue lili mu alpha. Kuti muyambe kugwira ntchito ndi MDX, ingoikani "Pangani React App". Pali mapulagini a Next.js ndi Gatsby. Mtundu wotsatira wa Docusaurus (mtundu 2) udzakhalanso ndi chithandizo chakwawo.

Kulemba zolembedwa ndi Docusaurus

Docusaurus adalemba pa Facebook. Amachigwiritsa ntchito pamapulojekiti aliwonse otseguka kupatula React. Kunja kwa kampaniyo imagwiritsidwa ntchito ndi Redux, Prettier, Gulp ndi Babel.

Ma projekiti omwe amagwiritsa ntchito Docusaurus.

Docusaurus angagwiritsidwe ntchito kulemba zilizonse zolemba, osati kufotokoza frontend. Ili ndi React pansi pa hood, koma simuyenera kuidziwa bwino kuti muigwiritse ntchito. Zimatengera mafayilo anu a Markdown, zamatsenga pang'ono komanso zolembedwa bwino, zojambulidwa komanso zowerengeka zokhala ndi mapangidwe okongola zakonzeka.

Patsamba la Redux mutha kuwona template yokhazikika ya Docusaurus

Mawebusayiti omangidwa ndi Docusaurus amathanso kuphatikiza blog yochokera ku Markdown. Prism.js imalumikizidwa nthawi yomweyo kuti iwunikire mawu. Ngakhale Docusaurus idawoneka posachedwa, idadziwika ngati chida chabwino kwambiri cha 2018 pa StackShare.

Zosankha Zina Zopanga Zinthu

Docusaurus idapangidwa makamaka kuti ipange zolemba. Zachidziwikire, pali miliyoni imodzi ndi njira imodzi yopangira tsamba - mutha kuyika yankho lanu m'chilankhulo chilichonse, CMS, kapena kugwiritsa ntchito jenereta yamasamba osasunthika.

Mwachitsanzo, zolemba za React, IBM design system, Apollo ndi Ghost CMS zimagwiritsa ntchito Gatsby - jenereta wamasamba osasunthika omwe amagwiritsidwa ntchito nthawi zambiri pamabulogu. Ngati mumagwira ntchito ndi Vue, ndiye kuti VuePress ndi njira yabwino kwa inu. Njira ina ndikugwiritsa ntchito jenereta yolembedwa mu Python - MkDocs. Ndi gwero lotseguka ndipo limakonzedwa pogwiritsa ntchito fayilo imodzi ya YAML. GitBook ndi njira yabwino, koma ndi yaulere kwa magulu agulu komanso osachita malonda. Muthanso kungoyika mafayilo a mardown pogwiritsa ntchito Git ndikugwira nawo ntchito ku Github.

Zolemba: Docz, Storybook ndi Styleguidist

Malangizo, kamangidwe kadongosolo, malaibulale amagulu - zilizonse zomwe mumawatcha, zakhala zotchuka kwambiri posachedwapa. Kubwera kwa zigawo ngati React ndi zida zomwe zatchulidwa apa zawasintha kuchoka kuzinthu zopanda pake kukhala zida zothandiza.

Buku la nkhani, Docz ndi Styleguidist onse amachita zomwezo: wonetsani zinthu zolumikizana ndikulemba API yawo. Pulojekiti imatha kukhala ndi magawo ambiri kapena mazana - onse okhala ndi zigawo ndi masitayilo osiyanasiyana. Ngati mukufuna kuti zigawo zigwiritsidwenso ntchito, anthu ayenera kudziwa kuti zilipo. Kuti muchite izi, ingoyang'anani zigawozo. Malangizo amakupatsirani chithunzithunzi chosavuta cha zigawo zanu zonse. Izi zimathandiza kusunga mawonekedwe owoneka bwino ndikupewa ntchito yobwerezabwereza.

Zida izi zimapereka njira yabwino yowonera mayiko osiyanasiyana. Zitha kukhala zovuta kutulutsanso gawo lililonse la gawo mogwirizana ndi ntchito yeniyeni. M'malo kuwonekera pa ntchito yeniyeni, m'pofunika kupanga chigawo china. Madera ovuta kufika (monga malo otsegulira) amatha kuyerekezedwa.

Pamodzi ndi chiwonetsero chazithunzi zamayiko osiyanasiyana komanso mndandanda wazinthu, nthawi zambiri pamafunika kulemba tsatanetsatane wazomwe zili - zomveka zopangira, zochitika zogwiritsa ntchito, kapena kufotokozera zotsatira zoyeserera za ogwiritsa ntchito. Markdown ndiyosavuta kuphunzira - moyenera, malangizo akuyenera kukhala gawo logawana nawo opanga ndi opanga. Docz, Styleguidist, ndi Storybook imapereka njira yosakanikirana mosavuta Markdown ndi zigawo.

Docz

Pakadali pano Docz imangogwira ntchito ndi React, koma ntchito yogwira ikuchitika kuti ithandizire Preact, Vue ndi zida zapaintaneti. Docz ndiye zida zaposachedwa kwambiri pazida zitatuzi, koma zakwanitsa kusonkhanitsa nyenyezi zopitilira 14 pa Github. Docz imayambitsa zigawo ziwiri - <Playground> и < Props >. Amatumizidwa kunja ndikugwiritsidwa ntchito m'mafayilo .mdx.

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

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

<Button>click</Button>

Mutha kukulunga zida zanu za React ndi <Playground>kuti mupange analogi ya CodePen kapena CodeSandbox yomangidwa - ndiye kuti, mukuwona gawo lanu ndipo mutha kusintha.

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

<Props> iwonetsa zinthu zonse zomwe zilipo pagawo lopatsidwa la React, makonda osakhazikika, komanso ngati katunduyo akufunika.

<Props of={Button} />

Inemwini, ndimapeza njira yochokera ku MDX iyi kukhala yosavuta kumvetsetsa komanso yosavuta kugwiritsa ntchito.

Ngati ndinu okonda jenereta ya tsamba la Gatsby, Docz imapereka kuphatikiza kwakukulu.

Kalozera wamalembedwe

Monga Docz, zitsanzo zimalembedwa pogwiritsa ntchito mawu a Markdown. Stylegudist amagwiritsa ntchito zilembo za Markdown (mawu atatu) m'mafayilo okhazikika .md mafayilo, osati MDX.

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

Ma code block mu Markdown nthawi zambiri amangowonetsa ma code. Mukamagwiritsa ntchito Stylegudist, code iliyonse yokhala ndi chilankhulo js, jsx kapena javascript adzapereka ngati gawo la React. Monga Docz, code ndi yosinthika - mutha kusintha katundu ndikuwona zotsatira zake nthawi yomweyo.

Styleguidist imangopanga tebulo lazinthu kuchokera ku PropTypes, Flow kapena Typescript declaration.

Stylegudist pakadali pano imathandizira React ndi Vue.

Buku la Nkhani

Buku la Nkhani limadziyika ngati "malo opangira chigawo cha UI." M'malo molemba zigawo zachitsanzo mkati mwa mafayilo a Markdown kapena MDX, mumalemba nkhani mkati mwa mafayilo a Javascript. История lembani mkhalidwe weniweni wa chigawocho. Mwachitsanzo, gawo likhoza kukhala ndi mbiri yakale yodzaza ndi anthu olumala (olumala).

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

Nkhani yamabuku ndizovuta kwambiri kuposa Styleguidist ndi Docz. Koma nthawi yomweyo, iyi ndiye njira yotchuka kwambiri; polojekitiyi ili ndi nyenyezi zopitilira 36 pa Github. Ndi ntchito yotseguka yokhala ndi othandizira 000 ndi ogwira ntchito nthawi zonse. Amagwiritsidwa ntchito ndi Airbnb, Algolia, Atlassian, Lyft ndi Salesforce. Buku la Nkhani limathandizira machitidwe ambiri kuposa omwe akupikisana nawo - React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte ndi HTML wamba.

Pakutulutsidwa kwamtsogolo padzakhala zinthu zochokera ku Docz ndi MDX zidzayambitsidwa.

# Button

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

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

Zatsopano za Buku la Nkhani zidzayamba pang'onopang'ono m'miyezi ingapo ikubwerayi ndipo zikuwoneka ngati zikupita patsogolo.

Zotsatira

Ubwino wa laibulale yamapangidwe amayamikiridwa m'mamiliyoni a zolemba pa Medium. Akachita bwino, amapangitsa kuti zikhale zosavuta kupanga zinthu zogwirizana komanso kusunga chinsinsi. Zoonadi, palibe zida izi zomwe zidzapange mwamatsenga dongosolo lokonzekera. Izi zimafuna kupangidwa mosamala ndi CSS. Koma ikafika nthawi yoti apange dongosolo lokonzekera kuti lipezeke ku kampani yonse, Docz, Storybook ndi Styleguidist ndizosankha zabwino.

Kuchokera kwa womasulira. Ichi ndi chochitika changa choyamba pa Habré. Ngati mupeza zolakwika, kapena muli ndi malingaliro owongolera nkhaniyo, ndilembeni muuthenga waumwini.

Source: www.habr.com