🥇 Ntuziaka ndụ - MDX na usoro ndị ọzọ

Ị nwere ike ịnweta ọrụ mmeghe kachasị mma, ma ọ bụrụ na ọ nweghị akwụkwọ dị mma, ọ ga-abụ na ọ gaghị ewepụ. N'ụlọ ọrụ, ezigbo akwụkwọ ga-egbochi gị ịza otu ajụjụ ahụ. Akwụkwọ na-ahụkwa na ndị mmadụ nwere ike ịghọta ọrụ ahụ ma ọ bụrụ na ndị isi ọrụ hapụrụ ụlọ ọrụ ma ọ bụ ọrụ gbanwere. Ntuziaka ndụ ga-enyere aka hụ na data ziri ezi.

Ọ bụrụ na ịchọrọ ide ogologo ederede, Markdown bụ ezigbo nhọrọ maka HTML. Mgbe ụfọdụ syntax Markdown ezughị. N'okwu a, anyị nwere ike iji HTML n'ime ya. Dị ka ihe atụ, omenala ihe. Ya mere, ọ bụrụ na ị na-ewu usoro nhazi nke nwere ngwa weebụ nke ala, enwere ike itinye ha ngwa ngwa na akwụkwọ ederede. Ọ bụrụ na ị na-eji React (ma ọ bụ usoro JSX ọ bụla dị ka Preact ma ọ bụ Vue), ị nwere ike ime otu ihe ahụ site na iji MDX.

Edemede a bụ nkọwa sara mbara nke ngwaọrụ maka ide akwụkwọ na imepụta ụkpụrụ nduzi. Ọ bụghị ngwaọrụ niile edepụtara ebe a na-eji MDX, mana a na-etinyewanye ya na ngwa akwụkwọ.

Kedu ihe bụ MDX?

file .mdx nwere otu syntax dị ka Markdown, mana na-enye gị ohere ibubata ngwa JSX mmekọrịta wee tinye ha n'ime ọdịnaya gị. Nkwado maka akụrụngwa Vue dị na alfa. Iji malite ịrụ ọrụ na MDX, wụnye naanị "Mepụta ngwa ngwa". Enwere plugins maka Next.js na Gatsby. Ụdị Docusaurus na-esote (ụdị 2) ga-enwekwa nkwado obodo.

Eji Docusaurus na-ede akwụkwọ

Docusaurus dere na Facebook. Ha na-eji ya na ọrụ ọ bụla mepere emepe ewezuga React. N'èzí ụlọ ọrụ a na-eji Redux, Prettier, Gulp na Babel eme ihe.

Ọrụ ndị na-eji Docusaurus.

Enwere ike iji Docusaurus dee ọ bụla akwụkwọ, ọ bụghị naanị na-akọwa frontend. Ọ nwere React n'okpuru mkpuchi, mana ịkwesighi ịmara ya iji jiri ya. Ọ na-ewe faịlụ Markdown gị, obere anwansi na ahaziri nke ọma, nhazi na akwụkwọ enwere ike ịgụ ya na nhazi mara mma dị njikere.

Na webụsaịtị Redux ị nwere ike ịhụ ụkpụrụ Docusaurus ọkọlọtọ

Weebụsaịtị ejiri Docusaurus wuo nwekwara ike ịgụnye blọgụ dabere na Markdown. Ejikọtara Prism.js ozugbo maka imepụta syntax. N'agbanyeghị na Docusaurus pụtara na nso nso a, a ghọtara ya dị ka ngwá ọrụ kacha mma nke 2018 na StackShare.

Nhọrọ imepụta ọdịnaya ndị ọzọ

Emebere Docusaurus maka imepụta akwụkwọ. N'ezie, enwere otu nde na otu ụzọ iji mepụta weebụsaịtị - ị nwere ike ibuga ngwọta nke gị n'asụsụ ọ bụla, CMS, ma ọ bụ jiri igwe na-emepụta saịtị static.

Dịka ọmụmaatụ, akwụkwọ maka React, sistemu imewe IBM, Apollo na Ghost CMS na-eji Gatsby - ihe nrụpụta saịtị kwụ ọtọ nke a na-ejikarị maka blọọgụ. Ọ bụrụ na ị na-arụ ọrụ na Vue, mgbe ahụ VuePress bụ ezigbo nhọrọ maka gị. Nhọrọ ọzọ bụ iji generator edere na Python - MkDocs. Ọ bụ ebe mepere emepe ma hazie ya site na iji otu faịlụ YAML. GitBook bụkwa nhọrọ dị mma, mana ọ bụ naanị n'efu maka ndị otu ọha na ndị na-abụghị nke azụmahịa. Ịnwekwara ike bulite faịlụ ndị mebiri emebi site na iji Git wee soro ha rụọ ọrụ na Github.

Ihe ndị na-edekọ ihe: Docz, Akwụkwọ akụkọ na Styleguidist

Ntuziaka, nhazi usoro, ọba akwụkwọ akụrụngwa - ihe ọ bụla ị na-akpọ ha, ọ na-ewu ewu n'oge na-adịbeghị anya. Ọbịbịa nke usoro akụrụngwa dị ka React na ngwaọrụ ndị a kpọtụrụ aha ebe a agbanweela ha site na ọrụ efu ka ọ bụrụ ngwaọrụ bara uru.

Akwụkwọ akụkọ, Docz na Styleguidist niile na-eme otu ihe: gosipụta ihe mmekọrịta wee detuo API ha. Ihe oru ngo nwere ike inwe otutu ma obu obuna otutu ihe - ha nile nwere steeti na udiri di iche iche. Ọ bụrụ na ịchọrọ ka ejigharịa akụrụngwa, ndị mmadụ kwesịrị ịma na ha dị. Iji mee nke a, naanị katalọgụ components. Ntuziaka na-enye nkọwa dị mfe ịchọta nke akụrụngwa gị niile. Nke a na-enyere aka ịnọgide na-ahụ anya ma zere ọrụ ugboro ugboro.

Ngwa ndị a na-enye ụzọ dị mma iji lelee steeti dị iche iche. Ọ nwere ike isiri ike imepụtagharị steeti ọ bụla nke akụrụngwa n'ọnọdụ nke ezigbo ngwa. Kama ịpị ngwa n'ezie, ọ bara uru ịmepụta akụkụ dị iche. Steeti siri ike iru (dị ka steeti loading) nwere ike ịme emume.

Tinyere ngosi ngosi nke steeti dị iche iche na ndepụta nke ihe onwunwe, ọ na-adị mkpa ka ị dee nkọwa zuru ezu nke ọdịnaya - usoro nhazi, iji okwu, ma ọ bụ nkọwa nke nsonaazụ nyocha onye ọrụ. Markdown dị mfe ịmụta - n'ezie, ụkpụrụ nduzi kwesịrị ịbụ ihe enyemaka maka ndị nrụpụta na ndị mmepe. Docz, Styleguidist, na Akwụkwọ akụkọ na-enye ụzọ iji jikọta Markdown na ngwa ngwa.

Docz

Ugbu a Docz na-arụ ọrụ naanị na React, mana arụ ọrụ na-aga n'ihu iji kwado Preact, Vue na ngwa webụ. Docz bụ nke kachasị ọhụrụ n'ime ngwaọrụ atọ ahụ, mana ọ jisiri ike nakọta ihe karịrị kpakpando 14 na Github. Docz na-ewebata ihe abụọ - <Playground> и < Props >. A na-ebubata ma jiri ha na faịlụ .mdx.

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

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

<Button>click</Button>

Ị nwere ike iji kechie ihe React nke gị <Playground>iji mepụta analog nke CodePen ma ọ bụ CodeSandbox arụnyere - ya bụ, ị na-ahụ akụrụngwa gị wee nwee ike dezie ya.

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

<Props> ga-egosi akụrụngwa niile dị maka mpaghara React enyere, ụkpụrụ ndabara, yana ma achọrọ akụrụngwa ahụ.

<Props of={Button} />

Onwe m, achọpụtara m usoro a dabere na MDX ka ọ kachasị mfe nghọta yana kachasị mfe iji rụọ ọrụ.

Ọ bụrụ na ị bụ onye ofufe nke Gatsby static site generator, Docz na-enye nnukwu njikọta.

Ntuziaka ụdị

Dịka Docz, a na-eji syntax Markdown dee ihe atụ. Styleguidist na-eji ngọngọ koodu Markdown (ntụtuokwu atọ) na faịlụ oge niile .md faịlụ, ọ bụghị MDX.

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

Koodu ngọngọ na Markdown na-egosikarị koodu. Mgbe ị na-eji Styleguidist, ngọngọ koodu ọ bụla nwere mkpado asụsụ js, jsx ma ọ bụ javascript ga-eme dị ka akụrụngwa React. Dị ka Docz, koodu a na-edezi - ị nwere ike ịgbanwe akụrụngwa wee hụ nsonaazụ ya ozugbo.

Styleguidist ga-emepụta tebụl akụrụngwa na-akpaghị aka site na nkwupụta PropTypes, Flow ma ọ bụ ụdị edemede.

Styleguidist na-akwado React na Vue ugbu a.

Akwụkwọ akụkọ

Akwụkwọ akụkọ na-edobe onwe ya dị ka "gburugburu mmepe akụrụngwa UI." Kama ide ihe ihe atụ n'ime faịlụ Markdown ma ọ bụ MDX, ị na-ede akụkọ n'ime faịlụ Javascript. История detuo ọnọdụ nke akụrụngwa. Dịka ọmụmaatụ, otu akụrụngwa nwere ike ịnwe akụkọ maka steeti ebugoro na steeti nwere nkwarụ (enwe nkwarụ).

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

Akwụkwọ akụkọ dị mgbagwoju anya karịa Styleguidist na Docz. Mana n'otu oge ahụ, nke a bụ nhọrọ kachasị ewu ewu; oru ngo a nwere ihe karịrị kpakpando 36 na Github. Ọ bụ ọrụ mepere emepe nwere ndị enyemaka 000 na ndị ọrụ oge niile. Airbnb, Algolia, Atlassian, Lyft na Salesforce na-eji ya. Akwụkwọ akụkọ na-akwado ọtụtụ usoro karịa ndị asọmpi - React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte na HTML mgbe niile.

Na ntọhapụ n'ọdịnihu a ga-enwe atụmatụ sitere na Docz na MDX ga-ewebata.

# Button

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

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

Atụmatụ ọhụrụ nke akwụkwọ akụkọ ga-eji nwayọọ nwayọọ malite n'ime ọnwa ole na ole na-abịa ma ọ dị ka ọ ga-abụ nnukwu nzọụkwụ n'ihu.

Nsonaazụ

A na-ebuli uru nke ọbá akwụkwọ ụkpụrụ n'ọtụtụ nde akụkọ na Ọkara. Mgbe emechara nke ọma, ha na-eme ka ọ dịkwuo mfe ịmepụta ngwaahịa ndị metụtara ya na idobe njirimara. N'ezie, ọ dịghị nke ọ bụla n'ime ngwá ọrụ ndị a ga-emepụta usoro nhazi. Nke a chọrọ nhazi nke ọma na CSS. Ma mgbe oge ruru iji mee ka usoro nhazi ahụ nweta ụlọ ọrụ dum, Docz, Storybook na Styleguidist bụ nhọrọ dị mma.

Site na onye ntụgharị. Nke a bụ ahụmịhe mbụ m nwere na Habré. Ọ bụrụ na ịchọtaghị ezighi ezi, ma ọ bụ nwee aro maka imeziwanye akụkọ ahụ, degara m ozi na ozi nkeonwe.

isi: www.habr.com

Ntuziaka ndụ - MDX na usoro ndị ọzọ