Unokuba neyona projekthi ivulekileyo yomthombo, kodwa ukuba ayinawo amaxwebhu alungileyo, amathuba okuba ayisoze yasuka. Kwiofisi, amaxwebhu alungileyo aya kukuthintela ukuba uphendule imibuzo efanayo. Amaxwebhu aqinisekisa ukuba abantu banokuqonda iprojekthi ukuba abasebenzi abaphambili bayayishiya inkampani okanye iindima zitshintsha. Izikhokelo eziphilayo ziya kunceda ukuqinisekisa ukuthembeka kwedatha.
Ukuba ufuna ukubhala umbhalo omde, iMarkdown yeyona ndlela ilungileyo kwiHTML. Ngamanye amaxesha i-syntax yeMarkdown ayanelanga. Kule meko sinokusebenzisa i-HTML ngaphakathi kwayo. Ngokomzekelo, izinto eziqhelekileyo. Ke ngoko, ukuba wakha isixokelelwano soyilo esinamalungu ewebhu emveli, anokufakwa ngokulula kuxwebhu lokubhaliweyo. Ukuba usebenzisa iReact (okanye nasiphi na esinye isakhelo se-JSX esifana ne-Preact okanye i-Vue), ungenza into enye usebenzisa i-MDX.
Eli nqaku liyinkcazo ebanzi yezixhobo zokubhala amaxwebhu kunye nokudala izikhokelo. Ayizizo zonke izixhobo ezidweliswe apha ezisebenzisa i-MDX, kodwa iya iqukwa ngakumbi kwizixhobo zamaxwebhu.
Yintoni i-MDX?
Ifayile .mdx ine-syntax efanayo ne-Markdown, kodwa ikuvumela ukuba ungenise amacandelo asebenzisanayo e-JSX kwaye uwafake kumxholo wakho. Inkxaso yamacandelo e-Vue ikwi-alpha. Ukuqala ukusebenza ngeMDX, vele ufake "Yenza iReact App". Kukho iiplagi ze-Next.js kunye ne-Gatsby. Inguqulelo elandelayo ye-Docusaurus (uguqulelo 2) nayo iya kuba nenkxaso yemveli.
Ukubhala amaxwebhu ngeDocusaurus
UDocusaurus wabhala kuFacebook. Bayisebenzisa kuyo yonke iprojekthi yomthombo ovulekileyo ngaphandle kweReact. Ngaphandle kwenkampani isetyenziswe nguRedux, Prettier, Gulp kunye neBabel.
Iiprojekthi ezisebenzisa iDocusaurus.
I-Docusaurus ingasetyenziselwa ukubhala naluphi na uxwebhu, hayi ukuchaza kuphela umphambili. Ine-React phantsi kwe-hood, kodwa akunyanzelekanga ukuba uqhelane nayo ukuze uyisebenzise. Kuthatha iifayile zakho zeMarkdown, i-pinch yomlingo kunye nokwakhiwa kakuhle, amaxwebhu afomathiweyo kunye afundekayo kunye noyilo oluhle lulungile.
Kwiwebhusayithi yeRedux unokubona itemplate yeDocusaurus eqhelekileyo
Iiwebhusayithi ezakhiwe ngeDocusaurus zinokubandakanya ibhlog esekwe kwiMarkdown. IPrism.js iqhagamshelwe ngoko nangoko ukuqaqambisa isivakalisi. Ngaphandle kwento yokuba iDocusaurus ivele mva nje, iye yamkelwa njengesona sixhobo sibalaseleyo sika-2018 kwiStackShare.
Ezinye Iinketho Zokudala Umxholo
IDocusaurus yenzelwe ngokukodwa ukwenza amaxwebhu. Ewe, kukho isigidi kunye neendlela enye zokwenza iwebhusayithi - unokusebenzisa isisombululo sakho kulo naluphi na ulwimi, i-CMS, okanye usebenzise i-static site generator.
Umzekelo, amaxwebhu e-React, inkqubo yoyilo ye-IBM, i-Apollo kunye ne-Ghost CMS isebenzisa i-Gatsby - ijenereyitha yesayithi engatshintshiyo ehlala isetyenziselwa iiblogi. Ukuba usebenza noVue, ke VuePress lukhetho olulungileyo kuwe. Enye inketho kukusebenzisa ijenereyitha ebhalwe kwiPython - MkDocs. Ingumthombo ovulekileyo kwaye iqwalaselwe usebenzisa ifayile ye-YAML enye. I-GitBook ikwayindlela elungileyo, kodwa isimahla kuphela kumaqela oluntu nangenzi nzuzo. Unokukhuphela ngokulula iifayile zemardown usebenzisa iGit kwaye usebenze nabo kwiGithub.
Amacandelo amaxwebhu: Docz, Storybook kunye Styleguidist
Izikhokelo, uyilo lwenkqubo, amathala eencwadi amacandelo - nokuba ubiza ntoni na, sele ethandwa kakhulu mva nje. Ukufika kwesakhelo secandelo elifana neReact kunye nezixhobo ezikhankanywe apha ziziguqule ukusuka kwiiprojekthi ezingamampunge zaba zizixhobo eziluncedo.
Incwadi yamabali, iDocz kunye ne-Styleguidist bonke benza into enye: bonisa izinto ezisebenzisanayo kwaye babhale i-API yabo. Iprojekthi inokuba neninzi okanye amakhulu eenxalenye - zonke zineendawo ezahlukeneyo kunye nezimbo. Ukuba ufuna amacandelo asetyenziswe kwakhona, abantu kufuneka bazi ukuba akhona. Ukwenza oku, dwelisa ngokulula amacandelo. Izikhokelo zibonelela ngokulula ukufumana isishwankathelo sawo onke amacandelo akho. Oku kunceda ukugcina ukuhambelana okubonakalayo kunye nokuphepha umsebenzi ophindaphindiweyo.
Ezi zixhobo zibonelela ngendlela efanelekileyo yokujonga amazwe ahlukeneyo. Kunokuba nzima ukuvelisa kwakhona yonke imeko yecandelo kumxholo wesicelo sokwenyani. Endaweni yokucofa kwisicelo esisiso, kufanelekile ukuphuhlisa icandelo elahlukileyo. Iimeko ekunzima ukufikelela kuzo (ezifana neendawo zokulayisha) zinokulinganiswa.
Kanye kunye nokubonakaliswa okubonakalayo kweemeko ezahlukeneyo kunye noluhlu lweepropati, kudla ngokuyimfuneko ukuba ubhale inkcazo ngokubanzi yomxholo - iingqiqo zokuyila, iimeko zokusetyenziswa, okanye iinkcazo zeziphumo zokuvavanya komsebenzisi. I-Markdown ilula kakhulu ukuyifunda- ngokufanelekileyo, izikhokelo kufuneka zibe sisixhobo ekwabelwana ngaso kubaqulunqi kunye nabaphuhlisi. I-Docz, i-Styleguidist, kunye ne-Storybook inikezela ngendlela yokuxuba ngokulula i-Markdown kunye namacandelo.
Docz
Okwangoku i-Docz isebenza kuphela ne-React, kodwa umsebenzi osebenzayo uyaqhubeka ukuxhasa i-Preact, i-Vue kunye namacandelo ewebhu. I-Docz yeyona nto yamva nje kwezixhobo ezithathu, kodwa ikwazile ukuqokelela ngaphezu kweenkwenkwezi ze-14 kwi-Github. UDocz wazisa amacandelo amabini - <Playground> и < Props >. Zithunyelwa ngaphandle kwaye zisetyenziswa kwiifayile .mdx.
import { Playground, Props } from "docz";
import Button from "../src/Button";
## You can _write_ **markdown**
### You can import and use components
<Button>click</Button>Ungasonga amacandelo akho eReact nge <Playground>ukwenza i-analogue ye-CodePen eyakhelwe-ngaphakathi okanye i-CodeSandbox- oko kukuthi, ubona inxalenye yakho kwaye ungayihlela.
<Playground>
<Button>click</Button>
</Playground><Props> izakubonisa zonke iipropati ezikhoyo zolwahlulo olunikiweyo lwe-React, amaxabiso angagqibekanga, kunye nokuba impahla iyafuneka na.
<Props of={Button} />Ngokwam, ndifumana le ndlela isekelwe kwi-MDX iyeyona ilula ukuyiqonda kwaye kulula ukusebenza nayo.
Ukuba ungumntu othanda i-Gatsby static site jenereyitha, i-Docz ibonelela ngokudityaniswa okukhulu.
Isikhokelo sesimbo
NjengoDocz, imizekelo ibhalwe kusetyenziswa i-syntax yeMarkdown. I-Styleguidist isebenzisa iibhloko zekhowudi ye-Markdown (iingcaphuno ezintathu) kwiifayile eziqhelekileyo .md iifayile, hayi iMDX.
```js
<Button onClick={() => console.log('clicked')>Push Me</Button>Iibhloko zekhowudi kwi-Markdown zihlala zibonisa ikhowudi. Xa usebenzisa i-Styleguidist, nayiphi na ibhloko yekhowudi enethegi yolwimi js, jsx okanye javascript iyakwenza njengecandelo le-React. NjengoDocz, ikhowudi iyahleleka - unokutshintsha iipropathi kwaye ubone iziphumo ngoko nangoko.
I-Styleguidist iyakwenza ngokuzenzekelayo itafile yepropathi esuka kwiPropTypes, Flow okanye izibhengezo zeTypescript.
I-Styleguidist okwangoku ixhasa i-React kunye ne-Vue.
Incwadi Yamabali
Incwadi yamabali izimisa “njengendawo yophuhliso lwecandelo le-UI.” Endaweni yokubhala amacandelo omzekelo ngaphakathi kweMarkdown okanye iifayile zeMDX, ubhala mabali ngaphakathi kweefayile zeJavascript. История uxwebhu lwemeko ethile yecandelo. Umzekelo, icandelo linokuba neembali zelizwe elilayishiweyo kunye nelizwe elikhubazekileyo (abakhubazekileyo).
storiesOf('Button', module)
.add('disabled', () => (
<Button disabled>lorem ipsum</Button>
))Incwadi yamabali intsonkothe ngakumbi kuneStyleguidist kunye neDocz. Kodwa kwangaxeshanye, le lolona khetho ludumileyo; Yiprojekthi yomthombo ovulekileyo enabaxhasi abangama-36 kunye nabasebenzi abasisigxina. Isetyenziswa nguAirbnb, eAlgolia, eAtlassian, eLyft naseSalesforce. Incwadi yamabali ixhasa izakhelo ezininzi kunabo bakhuphisana nabo-React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte kunye neHTML eqhelekileyo.
Kwixesha elizayo lokukhululwa kuya kubakho iimpawu ezivela kwi-Docz kunye ne-MDX ziya kwaziswa.
# Button
Some _notes_ about your button written with **markdown syntax**.
<Story name="disabled">
<Button disabled>lorem ipsum</Button>
</Story>Iimpawu ezintsha zencwadi yamabali ziya kuqaliswa kancinci kancinci kwezi nyanga zimbalwa zizayo kwaye kubonakala ngathi iya kuba linyathelo elikhulu ukuya phambili.
Iziphumo
Izibonelelo zethala leencwadi zinconywa kwizigidi zamanqaku kwiMedium. Xa zenziwe kakuhle, zenza kube lula ukwenza iimveliso ezinxulumeneyo kunye nokugcina isazisi. Ngokuqinisekileyo, akukho nanye kwezi zixhobo ziya kudala ngokumangalisayo inkqubo yoyilo. Oku kufuna uyilo olucokisekileyo kunye neCSS. Kodwa xa kufika ixesha lokwenza inkqubo yoyilo ifikeleleke kuyo yonke inkampani, i-Docz, i-Storybook kunye ne-Styleguidist zikhetho ezintle.
Ukusuka kumguquleli. La ngamava am okuqala kuHabré. Ukuba ufumana naziphi na izinto ezingachanekanga, okanye uneziphakamiso zokuphucula inqaku, nceda ubhale kum kumyalezo womntu.
umthombo: www.habr.com
