U ka ba le projeke e ntle ka ho fetisisa ea mohloli o bulehileng, empa haeba e se na litokomane tse ntle, ho na le monyetla oa hore e ke ke ea tloha. Ka ofising, litokomane tse ntle li tla u thibela ho araba lipotso tse tšoanang. Litokomane li boetse li tiisa hore batho ba ka utloisisa morero haeba basebetsi ba ka sehloohong ba tlohela k'hamphani kapa mesebetsi e fetoha. Litaelo tse phelang li tla thusa ho netefatsa botšepehi ba data.
Haeba o hloka ho ngola mongolo o molelele, Markdown ke khetho e ntle ho feta HTML. Ka linako tse ling syntax ea Markdown ha ea lekana. Tabeng ena re ka sebelisa HTML ka hare ho eona. Ka mohlala, likarolo tse khethehileng. Ka hona, haeba u haha sistimi ea meralo e nang le likarolo tsa sebaka sa marang-rang, li ka kenyelletsoa habonolo litokomaneng tsa mongolo. Haeba u sebelisa React (kapa moralo ofe kapa ofe oa JSX joalo ka Preact kapa Vue), u ka etsa se tšoanang ka MDX.
Sengoliloeng sena ke kakaretso e pharaletseng ea lisebelisoa tsa ho ngola litokomane le ho theha tataiso. Ha se lisebelisoa tsohle tse thathamisitsoeng mona tse sebelisang MDX, empa e ntse e tsoela pele ho kenyelletsoa lisebelisoa tsa litokomane.
MDX ke eng?
faele .mdx e na le syntax e tšoanang le ea Markdown, empa e u lumella ho kenya likarolo tsa JSX tse sebetsanang le ho li kenya ka har'a litaba tsa hau. Tšehetso ea likarolo tsa Vue e ho alpha. Ho qala ho sebetsa le MDX, kenya feela "Create React App". Ho na le li-plugins tsa Next.js le Gatsby. Mofuta o latelang oa Docusaurus (mofuta oa 2) le ona o tla ba le tšehetso ea lehae.
Ho ngola litokomane le Docusaurus
Docusaurus o ngotse ho Facebook. Ba e sebelisa morerong o mong le o mong o bulehileng oa mohloli ntle le React. Ka ntle ho khampani e sebelisoa ke Redux, Prettier, Gulp le Babel.
Merero e sebelisang Docusaurus.
Docusaurus e ka sebelisoa ho ngola leha e le efe litokomane, eseng feela ho hlalosa frontend. E na le React tlasa hood, empa ha ua tlameha ho e tloaela ho e sebelisa. Ho nka lifaele tsa hau tsa Markdown, palo ea boselamose le litokomane tse hlophisitsoeng hantle, tse hlophisitsoeng le tse baloang tse nang le moralo o motle li se li lokile.
Webosaeteng ea Redux u ka bona template e tloaelehileng ea Docusaurus
Liwebsaete tse hahiloeng ka Docusaurus li ka kenyelletsa blog e thehiloeng ho Markdown. Prism.js e hokahane hang-hang bakeng sa tokiso ea syntax. Leha taba ea hore Docusaurus e hlahile haufinyane, e ile ea amoheloa e le sesebelisoa se setle ka ho fetisisa sa 2018 ho StackShare.
Likhetho tse ling tsa Tlhahiso ea Likahare
Docusaurus e etselitsoe ho etsa litokomane ka kotloloho. Ehlile, ho na le limilione le mekhoa e le 'ngoe ea ho etsa sebaka sa marang-rang - u ka sebelisa tharollo ea hau ka puo efe kapa efe, CMS, kapa sebelisa jenereithara ea sebaka sa marang-rang.
Mohlala, litokomane tsa React, IBM design system, Apollo le Ghost CMS li sebelisa Gatsby - jenereithara ea sebaka se sa fetoheng se sebelisoang hangata bakeng sa li-blog. Haeba u sebetsa le Vue, joale VuePress ke khetho e ntle ho uena. Khetho e 'ngoe ke ho sebelisa jenereithara e ngotsoeng ka Python - MkDocs. Ke mohloli o bulehileng 'me o hlophisitsoe ho sebelisoa faele e le' ngoe ea YAML. GitBook le eona ke khetho e ntle, empa ke mahala feela bakeng sa lihlopha tsa sechaba le tseo e seng tsa khoebo. U ka boela ua kenya lifaele tsa mardown feela u sebelisa Git 'me u sebetse le tsona ho Github.
Likarolo tsa ho ngola: Docz, Storybook le Styleguidist
Litaelo, moralo oa sistimi, lilaebrari tsa likarolo - eng kapa eng eo u li bitsang, e se e tumme haholo morao tjena. Ho hlaha ha meralo ea likarolo tse kang React le lisebelisoa tse boletsoeng mona li li fetotse ho tloha mererong ea lefeela ho ba lisebelisoa tse sebetsang.
Buka ea lipale, Docz le Styleguidist kaofela ba etsa ntho e tšoanang: bonts'a likarolo tse sebetsanang le ho ngola API ea bona. Morero o ka ba le likarolo tse ngata kapa tse makholo - kaofela ka linaha le mekhoa e fapaneng. Haeba u batla hore likaroloana li sebelisoe hape, batho ba lokela ho tseba hore li teng. Ho etsa sena, khetha feela likarolo tsa eona. Litaelo li fana ka kakaretso e fumanehang habonolo ea likarolo tsohle tsa hau. Sena se thusa ho boloka botsitso ba pono le ho qoba mosebetsi oa ho pheta-pheta.
Lisebelisoa tsena li fana ka mokhoa o bonolo oa ho sheba linaha tse fapaneng. Ho ka ba thata ho hlahisa boemo bo bong le bo bong ba karolo maemong a ts'ebeliso ea 'nete. Sebakeng sa ho tobetsa ts'ebeliso ea 'nete, ho bohlokoa ho theha karolo e arohaneng. Maemo ao ho leng thata ho fihla ho ona (joalo ka libaka tsa ho kenya) li ka etsisoa.
Hammoho le pontšo ea pono ea linaha tse fapaneng le lethathamo la thepa, hangata hoa hlokahala ho ngola tlhaloso e akaretsang ea litaba - mabaka a moralo, linyeoe tsa tšebeliso, kapa litlhaloso tsa liphetho tsa tlhahlobo ea basebelisi. Markdown e bonolo haholo ho ithuta - ka nepo, litataiso e lokela ho ba sesebelisoa se arolelanoang bakeng sa baqapi le bahlahisi. Docz, Styleguidist, le Storybook li fana ka mokhoa oa ho kopanya Markdown le likarolo habonolo.
Docz
Hajoale Docz e sebetsa feela le React, empa mosebetsi o mafolofolo o ntse o tsoela pele ho ts'ehetsa Preact, Vue le likarolo tsa webo. Docz ke ea morao-rao ho lisebelisoa tse tharo, empa e khonne ho bokella linaleli tse fetang 14 ho Github. Docz e hlahisa likarolo tse peli − <Playground> и < Props >. Li kentsoe kantle ho naha 'me li sebelisoa lifaeleng .mdx.
import { Playground, Props } from "docz";
import Button from "../src/Button";
## You can _write_ **markdown**
### You can import and use components
<Button>click</Button>U ka thatela likarolo tsa hau tsa React ka <Playground>ho theha analogue ea CodePen kapa CodeSandbox e hahelletsoeng - ke hore, o bona karolo ea hau mme o ka e hlophisa.
<Playground>
<Button>click</Button>
</Playground><Props> e tla bonts'a thepa eohle e teng bakeng sa karolo e fanoeng ea React, boleng ba kamehla, le hore na thepa ea hlokahala.
<Props of={Button} />Ka bonna, ke fumana mokhoa ona oa MDX o le bonolo ho o utloisisa ebile o bonolo ho sebetsa le ona.
Haeba u morati oa jenereithara ea sebaka sa marang-rang sa Gatsby, Docz e fana ka kopanyo e ntle.
Tataiso ea setaele
Joalo ka Docz, mehlala e ngotsoe ho sebelisoa syntax ea Markdown. Styleguidist e sebelisa li-block tsa khoutu tsa Markdown (litlhaloso tse tharo) lifaeleng tse tloaelehileng .md lifaele, eseng MDX.
```js
<Button onClick={() => console.log('clicked')>Push Me</Button>Li-block blocks ho Markdown hangata li bonts'a khoutu feela. Ha o sebelisa Styleguidist, boloko bofe kapa bofe ba khoutu e nang le tag ea puo js, jsx kapa javascript e tla fana ka karolo ea React. Joalo ka Docz, khoutu e ea hlophisoa - o ka fetola thepa mme hanghang o bone sephetho.
Styleguidist e tla iketsetsa tafole ea thepa ho tsoa ho PropTypes, Flow kapa Typescript declaration.
Stylegudist hajoale e tšehetsa React le Vue.
Buka ea Lipale
Buka ea lipale e iponahatsa e le "tikoloho ea ntlafatso ea karolo ea UI." Sebakeng sa ho ngola likarolo tsa mohlala ka har'a lifaele tsa Markdown kapa MDX, oa ngola lipale ka har'a lifaele tsa Javascript. История ngola boemo bo itseng ba karolo. Ka mohlala, karolo e ka 'na ea e-ba le histori ea boemo bo imetsoeng le ba holofetseng (ba holofetse).
storiesOf('Button', module)
.add('disabled', () => (
<Button disabled>lorem ipsum</Button>
))Buka ea lipale e rarahane haholo ho feta Styleguidist le Docz. Empa ka nako e ts'oanang, ena ke khetho e tsebahalang haholo; projeke e na le linaleli tse fetang 36 ho Github. Ke morero oa mohloli o bulehileng o nang le bafani ba 000 le basebetsi ba nako eohle. E sebelisoa ke Airbnb, Algolia, Atlassian, Lyft le Salesforce. Buka ea lipale e ts'ehetsa meralo e mengata ho feta bahlolisani - React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte le HTML e tloaelehileng.
Khatisong e tlang ho tla ba le likarolo tse tsoang ho Docz le MDX li tla hlahisoa.
# Button
Some _notes_ about your button written with **markdown syntax**.
<Story name="disabled">
<Button disabled>lorem ipsum</Button>
</Story>Likarolo tse ncha tsa Storybook li tla qala butle-butle likhoeling tse 'maloa tse tlang' me ho bonahala eka e tla ba mohato o moholo oa ho ea pele.
Liphello
Melemo ea laebrari ea mohlala e rorisoa ka limilione tsa lingoliloeng tse mabapi le Medium. Ha li etsoa hantle, li etsa hore ho be bonolo ho theha lihlahisoa tse amanang le ho boloka boitsebiso. Ha e le hantle, ha ho le e 'ngoe ea lisebelisoa tsena e tla theha tsamaiso ea boqapi ka boselamose. Sena se hloka moralo o hlokolosi le CSS. Empa ha ho fihla nako ea ho etsa hore mokhoa oa ho qapa o fumanehe ho khampani eohle, Docz, Storybook le Stylegudist ke likhetho tse ntle.
Ho tsoa ho mofetoleli. Ena ke phihlelo ea ka ea pele ho Habré. Haeba u fumana ho se nepahale, kapa u na le litlhahiso tsa ho ntlafatsa sengoloa, ngolla molaetsa oa hau.
Source: www.habr.com