E mafai ona e maua le poloketi tatala puna sili, ae afai e leai ni faʻamaumauga lelei, e le mafai ona alu ese. I totonu o le ofisa, o faʻamaumauga lelei o le a taofia ai oe mai le taliina o fesili tutusa. O faʻamaumauga e faʻamautinoa ai foi e mafai e tagata ona malamalama i le poloketi pe a tuua e tagata faigaluega autu le kamupani pe suia matafaioi. O ta'iala ola o le a fesoasoani e fa'amautinoa le sa'o o fa'amaumauga.
Afai e te manaʻomia le tusiaina o tusitusiga uumi, Markdown o se mea sili lea e sui ai le HTML. O nisi taimi e le lava le syntax Markdown. I lenei tulaga e mafai ona tatou faʻaogaina HTML i totonu. Mo se faʻataʻitaʻiga, elemene masani. O le mea lea, afai o loʻo e fausiaina se faiga faʻapipiʻi faʻatasi ai ma vaega ole upega tafaʻilagi, e mafai ona faigofie ona faʻaofi i totonu o tusitusiga. Afai o lo'o e fa'aogaina le React (po'o so'o se isi fa'avae JSX pei o Preact po'o Vue), e mafai ona e faia le mea lava e tasi e fa'aaoga ai le MDX.
O lenei tusiga o se aotelega lautele o meafaigaluega mo le tusiaina o faʻamaumauga ma le fatuina o taʻiala. E le o mea faigaluega uma o loʻo lisiina iinei e faʻaaogaina le MDX, ae o loʻo faʻateleina le faʻapipiʻiina i meafaigaluega faʻamaumauga.
O le a le MDX?
faila .mdx e tutusa le syntax e pei o Markdown, ae fa'atagaina oe e fa'aulufale mai vaega JSX fefa'asoaa'i ma fa'apipi'i i totonu o au mea. Lagolago mo vaega Vue o loʻo i le alpha. Ina ia amata galue ma MDX, naʻo le faʻapipiʻiina o le "Create React App". E iai fa'apipi'i mo Next.js ma Gatsby. Ole isi lomiga ole Docusaurus (version 2) ole a iai fo'i le lagolago fa'ale-aganu'u.
Tusitusi faʻamaumauga ma Docusaurus
Na tusia e Docusaurus i luga o le Facebook. Latou te faʻaaogaina i luga o soʻo se galuega faʻalauiloa sei vagana ai React. I fafo atu o le kamupani o loʻo faʻaaogaina e Redux, Prettier, Gulp ma Babel.
Poloketi e fa'aoga Docusaurus.
E mafai ona fa'aoga Docusaurus e tusitusi ai soʻo se faʻamaumauga, e le gata e faʻamatala ai le pito i luma. E iai le React i lalo o le pulou, ae e te le tau masani i ai e faʻaaoga ai. E manaʻomia au faila Markdown, se pine o togafiti faʻataulāitu ma faʻatulagaina lelei, faʻapipiʻiina ma mafai ona faitau faʻamaumauga ma se mamanu matagofie ua saunia.
I luga o le upega tafaʻilagi a Redux e mafai ona e vaʻaia le faʻataʻitaʻiga masani Docusaurus
O upega tafaʻilagi e fausia ma Docusaurus e mafai foi ona aofia ai se blog faʻavae Markdown. O le Prism.js e feso'ota'i vave lava mo le fa'ailogaina o le syntax. E ui i le mea moni o Docusaurus na faʻaalia talu ai nei, na lauiloa o le meafaigaluega sili ona lelei o le 2018 i luga ole StackShare.
Isi Filifiliga Fausia Mea
Docusaurus ua mamanuina faapitoa mo le fatuina o faamaumauga. Ioe, e miliona ma tasi le auala e fai ai se upega tafaʻilagi - e mafai ona e faʻaogaina lau oe lava fofo i soʻo se gagana, CMS, poʻo le faʻaogaina o se masini faʻapipiʻi nofoaga.
Mo se faʻataʻitaʻiga, faʻamaumauga mo le React, IBM design system, Apollo ma le Ghost CMS faʻaaogaina Gatsby - o se faʻapipiʻi nofoaga e masani ona faʻaaogaina mo blogs. Afai e te galue ma Vue, o le VuePress o se filifiliga lelei mo oe. O le isi filifiliga o le faʻaaogaina lea o se generator tusia i le Python - MkDocs. O loʻo tatala ma faʻapipiʻiina e faʻaaoga ai se faila YAML e tasi. O le GitBook o se filifiliga lelei foi, ae e na'o le sa'olotoga mo tagata lautele ma 'au e le o ni pisinisi. E mafai foi ona e faʻapipiʻiina faila mardown e faʻaaoga ai Git ma galulue faʻatasi ma i latou i Github.
Vaega o fa'amaumauga: Docz, Storybook ma Styleguidist
Ta'iala, mamanu faiga, faletusi vaega - po'o le a lava le mea e te fa'aigoaina, ua matua lauiloa lava talu ai nei. O le oʻo mai o vaega faʻavae e pei o React ma meafaigaluega o loʻo taʻua iinei ua suia ai i latou mai galuega faʻatauvaʻa i meafaigaluega aoga.
Storybook, Docz ma Styleguidist e faia uma lava le mea e tasi: faʻaali elemene fesoʻotaʻi ma faʻamaumau a latou API. O se poloketi e mafai ona i ai le tele po'o le fiaselau o vaega - e eseese uma setete ma sitaili. Afai e te manaʻo e toe faʻaaogaina vaega, e tatau ona iloa e tagata o loʻo iai. Ina ia faia lenei mea, naʻo le faʻavasegaina o vaega. O ta'iala e maua ai se fa'amatalaga faigofie e maua i au vaega uma. E fesoasoani lea e fa'atumauina ai le va'aia lelei ma aloese mai galuega fai fai.
O nei meafaigaluega e maua ai se auala faigofie e matamata ai i setete eseese. E mafai ona faigata ona toe gaosia tulaga taʻitasi o se vaega i totonu o le tala o se faʻaoga moni. Nai lo le kiliki i luga o le talosaga moni, e aoga le atiaeina o se vaega eseese. E mafai ona fa'ata'ita'iina setete e faigata ona o'o atu (e pei o le utaina o setete).
Faatasi ai ma se faʻataʻitaʻiga vaʻaia o setete eseese ma se lisi o meatotino, e masani ona manaʻomia le tusia o se faʻamatalaga lautele o mea o loʻo i totonu - faʻataʻitaʻiga faʻataʻitaʻiga, faʻaoga mataupu, poʻo faʻamatalaga o taunuʻuga o suʻega a tagata. Markdown e matua faigofie lava ona aʻoaʻoina - lelei, o taʻiala e tatau ona avea ma punaoa faʻasoa mo tagata mamanu ma atinaʻe. Docz, Styleguidist, ma Tala Tala e ofoina atu se auala e faigofie ai ona faʻafefiloi Markdown ma vaega.
Docz
Ole taimi nei e na'o le React e galue ai Docz, ae o lo'o fa'agasolo galuega e lagolago ai le Preact, Vue ma vaega ole upegatafa'ilagi. Docz o le mea sili ona lata mai o meafaigaluega e tolu, ae ua mafai ona aoina mai 14 fetu ile Github. Ua faailoa mai e Docz vaega e lua − <Playground> и < Props >. E fa'aulufale mai ma fa'aoga i faila .mdx.
import { Playground, Props } from "docz";
import Button from "../src/Button";
## You can _write_ **markdown**
### You can import and use components
<Button>click</Button>E mafai ona e afifi au lava vaega React ma <Playground>e fatuina se faʻatusa o le CodePen poʻo le CodeSandbox ua fausia - o lona uiga, e te vaʻai i lau vaega ma mafai ona faʻasaʻo.
<Playground>
<Button>click</Button>
</Playground><Props> o le a fa'aalia uma meatotino avanoa mo se vaega React ua tu'uina atu, tau fa'aletonu, ma pe mana'omia le meatotino.
<Props of={Button} />I le tagata lava ia, ou te iloa o lenei MDX e faʻavae i luga ole auala e sili ona faigofie ona malamalama ma sili ona faigofie e galue ai.
Afai o oe o se tagata fiafia i le Gatsby static site generator, ua ofoina mai e Docz se tuʻufaʻatasiga sili.
Taiala sitaili
E pei o Docz, o faʻataʻitaʻiga o loʻo tusia e faʻaaoga ai le Markdown syntax. Styleguidist fa'aaoga poloka fa'ailoga Markdown (upusii tolu) i faila masani .md faila, ae le o le MDX.
```js
<Button onClick={() => console.log('clicked')>Push Me</Button>O poloka code i Markdown e masani lava ona faʻaalia le code. A fa'aogaina le Styleguidist, so'o se poloka fa'ailoga ma se pine gagana js, jsx poʻo javascript o le a fa'aalia o se vaega React. E pei o Docz, o le code e mafai ona faʻasaʻo - e mafai ona e suia meatotino ma vaʻaia vave le iʻuga.
Styleguidist o le a otometi lava ona fatuina se laulau o meatotino mai PropTypes, Flow poʻo Typescript faʻaaliga.
Styleguidist o lo'o lagolagoina nei le React ma le Vue.
Tusitusiga
O loʻo faʻatulagaina e le tusi tala o ia lava o se "Siosiomaga atinaʻe vaega UI." Nai lo le tusia o faʻataʻitaʻiga vaega i totonu o Markdown poʻo MDX faila, e te tusia tala i totonu o faila Javascript. История tusi le tulaga patino o se vaega. Mo se faʻataʻitaʻiga, o se vaega e ono iai ni tala faʻasolopito mo se setete ua utaina ma se tulaga le atoatoa (vaivaiga).
storiesOf('Button', module)
.add('disabled', () => (
<Button disabled>lorem ipsum</Button>
))O le tusi tala e sili atu ona lavelave nai lo Styleguidist ma Docz. Ae i le taimi lava e tasi, o le filifiliga sili lea ona lauiloa; o le poloketi e sili atu i le 36 fetu ile Github. Ose galuega fa'apogai matala ma 000 tagata fai sao ma tagata faigaluega tumau. E faʻaaogaina e Airbnb, Algolia, Atlassian, Lyft ma Salesforce. E lagolagoina e le tusi tala le tele o fa'avae nai lo tagata tauva - React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte ma HTML masani.
I se faʻasalalauga i le lumanaʻi o le ai ai faʻaaliga mai Docz ma MDX o le a faʻalauiloaina.
# Button
Some _notes_ about your button written with **markdown syntax**.
<Story name="disabled">
<Button disabled>lorem ipsum</Button>
</Story>O foliga fou o le Storybook o le a faasolosolo malie atu i nai masina o lumanaʻi ma e foliga mai o se laasaga tele i luma.
O taunuʻuga
O faʻamanuiaga o se faletusi faʻataʻitaʻiga e faʻaalia i le faitau miliona o tala ile Medium. A mae'a lelei, latou te fa'afaigofie ona faia ni oloa fa'atatau ma fa'amaumau le fa'asinomaga. O le mea moni, e leai se tasi o nei mea faigaluega o le a faia fa'amaneta se faiga mamanu. O lenei mea e manaʻomia ai le mamanu faʻaeteete ma le CSS. Ae a oʻo i le taimi e faʻaogaina ai se faiga mamanu e mafai e le kamupani atoa, Docz, Storybook ma Styleguidist o ni filifiliga sili.
Mai le faaliliu. O lo'u aafiaga muamua lea i Habré. Afai e te mauaina ni mea le saʻo, pe i ai ni fautuaga mo le faʻaleleia o le tusiga, tusi mai ia te aʻu i se savali patino.
puna: www.habr.com