🥇 Cov lus qhia nyob - MDX thiab lwm yam haujlwm

Koj tuaj yeem muaj qhov zoo tshaj plaws qhib qhov project, tab sis yog tias nws tsis muaj cov ntaub ntawv zoo, nws yuav tsis tawm mus. Hauv chaw ua haujlwm, cov ntaub ntawv zoo yuav tiv thaiv koj los ntawm kev teb cov lus nug tib yam. Cov ntaub ntawv tseem ua kom cov neeg tuaj yeem nkag siab txog qhov project yog tias cov neeg ua haujlwm tseem ceeb tawm hauv lub tuam txhab lossis hloov pauv. Cov txheej txheem ua neej nyob yuav pab ua kom cov ntaub ntawv muaj tseeb.

Yog tias koj xav sau cov ntawv ntev, Markdown yog lwm txoj hauv kev zoo rau HTML. Qee zaum Markdown syntax tsis txaus. Hauv qhov no peb tuaj yeem siv HTML hauv nws. Piv txwv li, kev cai ntsiab. Yog li ntawd, yog tias koj tab tom tsim cov txheej txheem tsim nrog cov khoom siv hauv lub vev xaib, lawv tuaj yeem yooj yim muab tso rau hauv cov ntaub ntawv. Yog tias koj siv React (los yog lwm yam JSX lub moj khaum zoo li Preact lossis Vue), koj tuaj yeem ua tib yam nrog MDX.

Nplooj ntawv no yog ib qho kev nthuav dav ntawm cov cuab yeej rau kev sau cov ntaub ntawv thiab tsim cov txheej txheem. Tsis yog tag nrho cov cuab yeej teev tseg ntawm no siv MDX, tab sis nws tau nce ntxiv rau hauv cov ntaub ntawv cov cuab yeej.

MDX yog dab tsi?

cov ntaub ntawv .mdx muaj tib lub syntax li Markdown, tab sis tso cai rau koj los import cov khoom sib tham sib JSX thiab kos rau hauv koj cov ntsiab lus. Kev them nyiaj yug rau Vue Cheebtsam yog nyob rau hauv alpha. Txhawm rau pib ua haujlwm nrog MDX, tsuas yog nruab "Tsim React App". Muaj cov plugins rau Next.js thiab Gatsby. Lwm version ntawm Docusaurus (version 2) kuj yuav muaj kev txhawb nqa ib txwm muaj.

Sau cov ntaub ntawv nrog Docusaurus

Docusaurus sau rau hauv Facebook. Lawv siv nws ntawm txhua qhov qhib qhov project tshwj tsis yog React. Sab nraum lub tuam txhab nws yog siv los ntawm Redux, Prettier, Gulp thiab Babel.

Cov haujlwm uas siv Docusaurus.

Docusaurus tuaj yeem siv los sau yam cov ntaub ntawv, tsis tsuas yog piav qhia txog lub hauv ntej. Nws muaj React hauv qab lub hood, tab sis koj tsis tas yuav tsum paub siv nws. Nws yuav siv koj cov ntaub ntawv Markdown, pinch ntawm khawv koob thiab zoo-structured, formatted thiab nyeem tau cov ntaub ntawv nrog ib tug zoo nkauj tsim yog npaj txhij.

Ntawm Redux lub vev xaib koj tuaj yeem pom tus qauv Docusaurus qauv

Cov vev xaib tsim nrog Docusaurus tuaj yeem suav nrog Markdown-raws li blog. Prism.js tam sim ntawd txuas rau syntax highlighting. Txawm tias muaj tseeb tias Docusaurus tshwm sim tsis ntev los no, nws tau lees paub tias yog qhov cuab yeej zoo tshaj plaws ntawm 2018 ntawm StackShare.

Lwm Cov Ntsiab Lus Tsim Kev Xaiv

Docusaurus tshwj xeeb yog tsim los tsim cov ntaub ntawv. Tau kawg, muaj ib lab thiab ib txoj hauv kev los ua ib lub vev xaib - koj tuaj yeem xa koj tus kheej cov tshuaj hauv txhua hom lus, CMS, lossis siv lub tshuab hluav taws xob zoo li qub.

Piv txwv li, cov ntaub ntawv rau React, IBM tsim system, Apollo thiab Dab CMS siv Gatsby - lub tshuab hluav taws xob zoo li qub uas feem ntau siv rau blogs. Yog tias koj ua haujlwm nrog Vue, ces VuePress yog qhov kev xaiv zoo rau koj. Lwm qhov kev xaiv yog siv lub tshuab hluav taws xob sau hauv Python - MkDocs. Nws yog qhib qhov chaw thiab teeb tsa siv ib qho YAML cov ntaub ntawv. GitBook kuj yog ib qho kev xaiv zoo, tab sis nws tsuas yog pub dawb rau pej xeem thiab pawg tsis yog lag luam. Koj tuaj yeem yooj yim upload cov ntaub ntawv mardown siv Git thiab ua haujlwm nrog lawv hauv Github.

Cov ntaub ntawv pov thawj: Docz, Storybook thiab Styleguidist

Cov lus qhia, kev tsim qauv, cov tsev qiv ntawv tiv thaiv - txawm koj hu lawv, nws tau dhau los ua neeg nyiam heev. Kev tshwm sim ntawm cov txheej txheem tivthaiv zoo li React thiab cov cuab yeej hais txog ntawm no tau hloov pauv lawv los ntawm kev ua haujlwm tsis zoo rau hauv cov cuab yeej muaj txiaj ntsig.

Storybook, Docz thiab Styleguidist txhua tus ua tib yam: tso saib cov ntsiab lus sib tham thiab sau lawv API. Ib qhov project tuaj yeem muaj kaum lossis ntau pua ntawm cov khoom - tag nrho nrog cov xeev thiab cov qauv sib txawv. Yog tias koj xav kom cov khoom siv rov qab siv dua, tib neeg yuav tsum paub tias lawv muaj. Txhawm rau ua qhov no, tsuas yog teev cov khoom. Cov lus qhia muab ib qho yooj yim-rau-nrhiav cov ntsiab lus ntawm tag nrho koj cov khoom. Qhov no pab tswj kev pom kev sib xws thiab zam kev ua haujlwm rov ua dua.

Cov cuab yeej no muab txoj hauv kev yooj yim los saib ntau lub xeev. Nws tuaj yeem nyuaj rau rov tsim dua txhua lub xeev ntawm cov khoom siv hauv cov ntsiab lus ntawm daim ntawv thov tiag. Tsis txhob nyem rau ntawm daim ntawv thov tiag tiag, nws tsim nyog tsim cov khoom sib cais. Cov xeev nyuaj-rau-mus txog (xws li lub xeev thauj khoom) tuaj yeem simulated.

Nrog rau kev pom pom ntawm ntau lub xeev thiab cov npe ntawm cov khoom, feem ntau yuav tsum tau sau cov lus piav qhia dav dav ntawm cov ntsiab lus - tsim cov ntsiab lus, kev siv cov ntaub ntawv, lossis cov lus piav qhia ntawm cov neeg siv kev sim cov txiaj ntsig. Markdown yog qhov yooj yim heev rau kev kawm - qhov zoo tshaj plaws, cov lus qhia yuav tsum yog cov peev txheej sib koom rau cov neeg tsim qauv thiab tsim tawm. Docz, Styleguidist, thiab Storybook muaj txoj hauv kev yooj yim sib xyaw Markdown nrog cov khoom.

Docz

Tam sim no Docz tsuas yog ua haujlwm nrog React, tab sis kev ua haujlwm nquag tab tom ua los txhawb Preact, Vue thiab lub vev xaib. Docz yog qhov tsis ntev los no ntawm peb cov cuab yeej, tab sis nws tau tswj kom sau ntau dua 14 hnub qub ntawm Github. Docz qhia txog ob lub ntsiab lus − <Playground> и < Props >. Lawv yog imported thiab siv nyob rau hauv cov ntaub ntawv .mdx.

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

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

<Button>click</Button>

Koj tuaj yeem qhwv koj tus kheej React Cheebtsam nrog <Playground>los tsim ib qho analogue ntawm lub built-in CodePen lossis CodeSandbox - uas yog, koj pom koj cov khoom thiab tuaj yeem hloov kho.

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

<Props> yuav qhia tag nrho cov khoom muaj nyob rau ntawm qhov muab React tivthaiv, qhov tseem ceeb, thiab seb cov khoom puas yuav tsum tau ua.

<Props of={Button} />

Tus kheej, Kuv pom qhov MDX raws li txoj hauv kev kom nkag siab yooj yim tshaj plaws thiab ua haujlwm yooj yim tshaj plaws.

Yog tias koj yog tus kiv cua ntawm Gatsby static site generator, Docz muaj kev sib koom ua ke zoo.

Style qhia

Zoo li Docz, piv txwv yog sau siv Markdown syntax. Styleguidist siv Markdown code blocks (triple quotes) hauv cov ntaub ntawv tsis tu ncua .md cov ntaub ntawv, tsis yog MDX.

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

Code blocks hauv Markdown feem ntau tsuas yog qhia cov lej. Thaum siv Styleguidist, txhua qhov thaiv ntawm cov lej nrog cov lus cim npe js, jsx los yog javascript yuav ua raws li React Cheebtsam. Zoo li Docz, cov cai yog kho tau - koj tuaj yeem hloov cov khoom thiab pom qhov tshwm sim tam sim ntawd.

Styleguidist yuav cia li tsim cov khoom vaj khoom tsev los ntawm PropTypes, Flow lossis Typescript tshaj tawm.

Styleguidist tam sim no txhawb React thiab Vue.

Dab neeg

Storybook tso nws tus kheej ua "UI tivthaiv kev txhim kho ib puag ncig." Hloov chaw sau cov piv txwv hauv Markdown lossis MDX cov ntaub ntawv, koj sau dab neeg hauv Javascript cov ntaub ntawv. История sau lub xeev tshwj xeeb ntawm ib feem. Piv txwv li, ib feem yuav muaj keeb kwm rau lub xeev loaded thiab lub xeev tsis taus (xiam oob khab).

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

Dab neeg phau ntawv yog qhov nyuaj dua li Styleguidist thiab Docz. Tab sis tib lub sijhawm, qhov no yog qhov kev xaiv nrov tshaj plaws; qhov project muaj ntau dua 36 hnub qub ntawm Github. Nws yog qhov qhib qhov project nrog 000 tus neeg koom tes thiab cov neeg ua haujlwm puv sijhawm. Nws yog siv los ntawm Airbnb, Algolia, Atlassian, Lyft thiab Salesforce. Storybook txhawb nqa ntau lub ntsiab lus tshaj li cov neeg sib tw - React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte thiab HTML li niaj zaus.

Hauv kev tso tawm yav tom ntej yuav muaj cov yam ntxwv ntawm Docz thiab MDX yuav raug qhia.

# Button

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

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

Storybook cov yam ntxwv tshiab yuav nthuav tawm maj mam dhau ob peb lub hlis tom ntej thiab zoo li nws yuav yog ib kauj ruam loj rau tom ntej.

Cov txiaj ntsim tau los

Cov txiaj ntsig ntawm lub tsev qiv ntawv qauv yog extolled nyob rau hauv ntau lab ntawm cov khoom ntawm Nruab Nrab. Thaum ua tau zoo, lawv ua kom yooj yim los tsim cov khoom muaj feem xyuam thiab tswj tus kheej. Tau kawg, tsis muaj ib qho ntawm cov cuab yeej no yuav tsim tau ib qho qauv tsim. Qhov no yuav tsum tau ua tib zoo tsim thiab CSS. Tab sis thaum nws los txog rau lub sij hawm los ua kom ib tug tsim system nkag mus rau tag nrho cov tuam txhab, Docz, Storybook thiab Styleguidist yog cov kev xaiv zoo.

Los ntawm tus txhais lus. Nov yog kuv thawj qhov kev paub ntawm Habre. Yog tias koj pom qhov tsis raug, lossis muaj lus pom zoo rau kev txhim kho tsab xov xwm, sau ntawv rau kuv ntawm tus kheej cov lus.

Tau qhov twg los: www.hab.com

Cov lus qhia nyob - MDX thiab lwm cov txheej txheem