Iwe unogona kuve neyakanakisa yakavhurika sosi purojekiti, asi kana isina magwaro akanaka, mukana wekuti haizombobva. Muhofisi, zvinyorwa zvakanaka zvinokudzivirira kubva pakupindura mibvunzo yakafanana. Zvinyorwa zvakare zvinovimbisa kuti vanhu vanogona kunzwisisa chirongwa kana vashandi vakakosha vakasiya kambani kana mabasa akachinja. Nhungamiro yekurarama ichabatsira kuve nechokwadi chekuvimbika kwedata.
Kana iwe uchida kunyora mavara akareba, Markdown inzira huru kune HTML. Dzimwe nguva Markdown syntax haina kukwana. Muchiitiko ichi tinogona kushandisa HTML mukati maro. Somuenzaniso, tsika zvinhu. Naizvozvo, kana iwe uri kuvaka dhizaini sisitimu ine zvemukati zvewebhu zvikamu, zvinogona kuverengerwa zviri nyore muzvinyorwa zvinyorwa. Kana iwe uri kushandisa React (kana chero imwe JSX chimiro sePreact kana Vue), unogona kuita chinhu chimwe chete neMDX.
Ichi chinyorwa chitarisiko chakafara chezvishandiso zvekunyora zvinyorwa uye kugadzira nhungamiro. Haasi ese maturusi akanyorwa pano anoshandisa MDX, asi iri kuramba ichiverengerwa mumaturusi ezvinyorwa.
Chii chinonzi MDX?
faira .mdx ine syntax yakafanana neMarkdown, asi inokutendera kuti utore zvinhu zvinopindirana zveJSX wozvinyudza mune zvauri. Tsigiro yezvikamu zveVue iri mualpha. Kutanga kushanda neMDX, ingoisa "Gadzira React App". Pane mapulagi eNext.js uye Gatsby. Iyo inotevera vhezheni yeDocusaurus (vhezheni 2) ichave zvakare nerutsigiro rwekuzvarwa.
Kunyora zvinyorwa neDocusaurus
Docusaurus akanyora paFacebook. Ivo vanoishandisa pane yega yega sosi purojekiti kunze kweReact. Kunze kwekambani inoshandiswa neRedux, Prettier, Gulp neBabel.
Zvirongwa zvinoshandisa Docusaurus.
Docusaurus inogona kushandiswa kunyora chero zvinyorwa, kwete chete kutsanangura frontend. Iyo ine React pasi pehodhi, asi haufanirwe kujairana nayo kuti uishandise. Zvinotora mafaera ako eMarkdown, piniki yemashiripiti uye yakanyatso kurongeka, yakarongwa uye inoverengwa zvinyorwa zvine dhizaini yakanaka yakagadzirira.
Pawebhusaiti yeRedux iwe unogona kuona yakajairwa Docusaurus template
Mawebhusaiti akavakwa neDocusaurus anogona zvakare kusanganisira Markdown-based blog. Prism.js inongobatanidzwa nekukasira kuratidza syntax. Kunyangwe chokwadi chekuti Docusaurus yakaonekwa nguva pfupi yadarika, yakaonekwa sechishandiso chakanakisa che2018 paStackShare.
Zvimwe Zvisarudzo Zvekugadzira Zvemukati
Docusaurus yakagadzirirwa chaizvo kugadzira zvinyorwa. Ehe, kune miriyoni uye imwe nzira dzekugadzira webhusaiti - iwe unogona kuendesa yako mhinduro mune chero mutauro, CMS, kana kushandisa static saiti jenareta.
Semuenzaniso, zvinyorwa zveReact, IBM dhizaini system, Apollo uye Ghost CMS inoshandisa Gatsby - jenareta resaiti rakamira rinowanzo shandiswa kumablog. Kana iwe ukashanda neVue, saka VuePress isarudzo yakanaka kwauri. Imwe sarudzo ndeye kushandisa jenareta yakanyorwa muPython - MkDocs. Iyo yakavhurika sosi uye yakagadziriswa uchishandisa imwechete YAML faira. GitBook zvakare isarudzo yakanaka, asi ndeye yemahara kune veruzhinji uye isiri-yekutengesa zvikwata. Iwe unogona zvakare kungoisa mardown mafaera uchishandisa Git uye kushanda navo muGithub.
Zvinyorwa zvinyorwa: Docz, Storybook uye Styleguidist
Nhungamiro, dhizaini dhizaini, chikamu maraibhurari - chero chaunodaidza iwo, chave chakakurumbira zvikuru nguva pfupi yadarika. Kuuya kwezvikamu zvakaita seReact uye maturusi ataurwa pano akaashandura kubva kumapurojekiti ezvisina maturo kuita maturusi anobatsira.
Bhuku renyaya, Docz uye Styleguidist vese vanoita chinhu chimwe chete: kuratidza zvinhu zvinopindirana uye kunyora API yavo. Purojekiti inogona kuva nemazana kana kunyange mazana ezvikamu - zvese zvine matunhu akasiyana uye masitaera. Kana iwe uchida kuti zvikamu zvishandiswezve, vanhu vanofanirwa kuziva kuti zviripo. Kuti uite izvi, ingo nyora zvikamu. Nhungamiro dzinopa nyore-kuwana-kutarisa pamusoro pezvinhu zvako zvese. Izvi zvinobatsira kuchengetedza kutaridzika kwekuona uye kudzivirira basa rekudzokorora.
Zvishandiso izvi zvinopa nzira iri nyore yekuona nyika dzakasiyana. Zvinogona kuve zvakaoma kuburitsa imwe neimwe mamiriro echikamu mumamiriro ekushandiswa chaiko. Panzvimbo pekudzvanya pane iyo chaiyo application, zvakafanira kugadzira chikamu chakasiyana. Zvakaoma-kusvika-zvinzvimbo (sekurodha nyika) zvinogona kutevedzerwa.
Pamwe chete neratidziro inooneka yematunhu akasiyana siyana uye runyorwa rwezvivakwa, zvinowanzodikanwa kunyora tsananguro yakajairika yezvirimo - dhizaini magadzirirwo, mashandisiro ekushandisa, kana tsananguro yemhedzisiro yekuedzwa kwevashandisi. Markdown iri nyore kwazvo kudzidza - zvine hungwaru, nhungamiro dzinofanirwa kuve dzakagovaniswa sosi yevagadziri uye vanogadzira. Docz, Styleguidist, uye Storybook inopa nzira yekusanganisa zviri nyore Markdown nezvikamu.
Docz
Parizvino Docz inoshanda chete neReact, asi basa rinoshanda riri kuenderera mberi kutsigira Preact, Vue uye zvinhu zvewebhu. Docz ndiyo yazvino pazvishandiso zvitatu, asi yakakwanisa kuunganidza nyeredzi dzinopfuura zviuru gumi nezvina paGithub. Docz inosuma zvikamu zviviri - <Playground> ΠΈ < Props >. Izvo zvinotengeswa kunze kwenyika uye zvinoshandiswa mumafaira .mdx.
import { Playground, Props } from "docz";
import Button from "../src/Button";
## You can _write_ **markdown**
### You can import and use components
<Button>click</Button>Unogona kuputira yako React zvikamu ne <Playground>kugadzira analogue yeakavakirwa-mukati CodePen kana CodeSandbox - ndiko kuti, iwe unoona chikamu chako uye unogona kuchigadzirisa.
<Playground>
<Button>click</Button>
</Playground><Props> icharatidza zvese zviripo zvivakwa zveyakapihwa React chikamu, default values, uye kana pfuma ichidiwa.
<Props of={Button} />Ini pachangu, ndinoona iyi MDX yakavakirwa nzira iri nyore kunzwisisa uye iri nyore kushanda nayo.
Kana iwe uri fan weGatsby static saiti jenareta, Docz inopa kubatanidzwa kukuru.
Style guide
SaDocz, mienzaniso yakanyorwa uchishandisa Markdown syntax. Styleguidist inoshandisa Markdown kodhi mabhuraki (katatu makotesheni) mumafaira enguva dzose .md mafaira, kwete MDX.
```js
<Button onClick={() => console.log('clicked')>Push Me</Button>Code block muMarkdown kazhinji inongoratidza kodhi. Paunenge uchishandisa Styleguidist, chero bhuroka rekodhi ine tag yemutauro js, jsx kana javascript ichaita sechikamu cheReact. SaDocz, kodhi inogadziriswa - unogona kuchinja zvivakwa uye wobva waona mhedzisiro.
Styleguidist inongogadzira tafura yezvivakwa kubva kuPropTypes, Flow kana Typescript zviziviso.
Stylegudist parizvino inotsigira React uye Vue.
Nyaya Yenyaya
Bhuku renyaya rinozvimiririra se "UI chikamu chekusimudzira nharaunda." Panzvimbo yekunyora zvikamu zvemuenzaniso mukati meMarkdown kana MDX mafaera, unonyora nhoroondo mukati meJavascript mafaira. ΠΡΡΠΎΡΠΈΡ nyora mamiriro chaiwo echikamu. Semuenzaniso, chikamu chinogona kunge chine nhoroondo yedunhu rakaremerwa uye rakaremara nyika (remara).
storiesOf('Button', module)
.add('disabled', () => (
<Button disabled>lorem ipsum</Button>
))Bhuku renyaya rakanyanya kuoma kupfuura Styleguidist uye Docz. Asi panguva imwecheteyo, iyi ndiyo inonyanya kufarirwa sarudzo; chirongwa ichi chine anopfuura zviuru makumi matatu nematanhatu nyeredzi paGithub. Icho chirongwa chakavhurika sosi ine 36 vanopa uye vashandi venguva yakazara. Inoshandiswa neAirbnb, Algolia, Atlassian, Lyft uye Salesforce. Bhuku renyaya rinotsigira mamwe masisitimu kupfuura evakwikwidzi - React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte uye yakajairwa HTML.
Mukuburitswa kunotevera kuchave nemaficha kubva kuDocz uye MDX ichaunzwa.
# Button
Some _notes_ about your button written with **markdown syntax**.
<Story name="disabled">
<Button disabled>lorem ipsum</Button>
</Story>Zvinyorwa zvitsva zveBhuku reNhau zvichabuda zvishoma nezvishoma mumwedzi mishoma inotevera uye zvinoita sekunge richava danho rakakura kumberi.
Migumisiro
Mabhenefiti eraibhurari yepatani anorumbidzwa mumamirioni ezvinyorwa paMedium. Kana zvaitwa zvakanaka, vanoita kuti zvive nyore kugadzira zvigadzirwa zvine hukama uye kuchengetedza chitupa. Ehe, hapana chimwe chezvishandiso izvi chichagadzira zvemashiripiti dhizaini system. Izvi zvinoda kunyatsogadzira uye CSS. Asi kana yasvika nguva yekuita dhizaini dhizaini kuti iwanikwe kune iyo kambani yese, Docz, Storybook uye Styleguidist sarudzo huru.
Kubva kumushanduri. Ichi ndicho chiitiko changu chekutanga paHabrΓ©. Kana iwe ukawana chero zvisizvo, kana uine mazano ekuvandudza chinyorwa, nyora kwandiri mushoko rega rega.
Source: www.habr.com