Azonao atao ny manana tetikasa open source tsara indrindra, fa raha tsy manana antontan-taratasy tsara izy, dia mety tsy hiala mihitsy izany. Ao amin'ny birao, ny antontan-taratasy tsara dia hanakana anao tsy hamaly ireo fanontaniana mitovy. Ny antontan-taratasy ihany koa dia manome antoka fa azon'ny olona ny tetikasa raha toa ka miala amin'ny orinasa ny mpiasa lehibe na miova andraikitra. Ny torolalana miaina dia hanampy amin'ny fiantohana ny fahamarinan'ny angona.
Raha mila manoratra lahatsoratra lava ianao, Markdown dia safidy tsara ho an'ny HTML. Indraindray dia tsy ampy ny syntax Markdown. Amin'ity tranga ity dia afaka mampiasa HTML ao anatiny isika. Ohatra, singa manokana. Noho izany, raha manangana rafitra famolavolana miaraka amin'ny singa tranonkala teratany ianao, dia azo ampidirina mora foana amin'ny antontan-taratasy. Raha mampiasa React ianao (na rafitra JSX hafa toa an'i Preact na Vue), dia azonao atao ny manao zavatra mitovy amin'ny MDX.
Ity lahatsoratra ity dia topimaso midadasika amin'ny fitaovana hanoratana antontan-taratasy sy famoronana torolàlana. Tsy ny fitaovana rehetra voatanisa eto no mampiasa MDX, fa vao mainka ampidirina ao anatin'ny fitaovana fandraketana.
Inona no atao hoe MDX?
rakitra .mdx manana fehezanteny mitovy amin'ny Markdown, saingy mamela anao manafatra singa JSX interactive ary mampiditra azy ireo ao anaty atiny. Ny fanohanana ireo singa Vue dia ao amin'ny alpha. Mba hanombohana miasa amin'ny MDX, apetraho fotsiny ny "Create React App". Misy plugins ho an'ny Next.js sy Gatsby. Ny kinova manaraka an'ny Docusaurus (dikan-teny 2) dia hanana fanohanana teratany ihany koa.
Manoratra antontan-taratasy miaraka amin'i Docusaurus
Docusaurus nanoratra tao amin'ny Facebook. Ampiasain'izy ireo amin'ny tetikasa open source rehetra afa-tsy ny React. Any ivelan'ny orinasa dia ampiasain'ny Redux, Prettier, Gulp ary Babel.
Tetikasa mampiasa Docusaurus.
Azo ampiasaina hanoratana ny Docusaurus misy antontan-taratasy, tsy mba hamaritana ny frontend ihany. Misy React ao ambanin'ny sarony, saingy tsy mila mahafantatra azy ianao vao mampiasa azy. Mitaky ny rakitrao Markdown ianao, majika majika ary antontan-taratasy voalamina tsara, voalamina ary azo vakiana miaraka amin'ny endrika tsara tarehy dia vonona.
Ao amin'ny tranokalan'ny Redux dia afaka mahita ny môdely Docusaurus mahazatra ianao
Ny tranokala namboarina miaraka amin'ny Docusaurus dia mety ahitana bilaogy miorina amin'ny Markdown ihany koa. Ny Prism.js dia mifandray avy hatrany amin'ny fanasongadinana syntax. Na dia teo aza ny fisehoan'i Docusaurus vao haingana, dia nekena ho fitaovana tsara indrindra amin'ny 2018 amin'ny StackShare.
Safidy famoronana votoaty hafa
Docusaurus dia natao manokana hamoronana antontan-taratasy. Mazava ho azy fa misy fomba iray tapitrisa sy iray hanaovana tranokala - azonao atao ny mametraka ny vahaolanao manokana amin'ny fiteny rehetra, CMS, na mampiasa mpamorona tranokala static.
Ohatra, ny antontan-taratasy ho an'ny React, rafitra famolavolana IBM, Apollo ary Ghost CMS dia mampiasa Gatsby - mpamorona tranonkala tsy mihetsika izay matetika ampiasaina amin'ny bilaogy. Raha miara-miasa amin'ny Vue ianao, dia safidy tsara ho anao ny VuePress. Safidy iray hafa dia ny fampiasana generator voasoratra amin'ny Python - MkDocs. Izy io dia loharano misokatra ary namboarina tamin'ny alàlan'ny rakitra YAML tokana. Safidy tsara ihany koa ny GitBook, saingy maimaim-poana ho an'ny ekipam-bahoaka sy tsy ara-barotra. Azonao atao ihany koa ny mampakatra rakitra mardown amin'ny alàlan'ny Git ary miara-miasa amin'izy ireo ao amin'ny Github.
Ireo singa fandraketana: Docz, Storybook ary Styleguidist
Torolàlana, famolavolana rafitra, tranomboky singa - na inona na inona iantsoanao azy ireo dia nanjary nalaza be tato ho ato. Ny fahatongavan'ireo rafitra singa toa ny React sy ireo fitaovana voalaza eto dia nanova azy ireo avy amin'ny tetikasa zava-poana ho fitaovana ilaina.
Ny Storybook, Docz ary Styleguidist dia samy manao zavatra mitovy: asehoy ireo singa mifampiresaka ary soraty ny API-ny. Ny tetikasa iray dia mety manana singa am-polony na an-jatony mihitsy aza - samy manana fanjakana sy fomba samihafa. Raha te hampiasaina indray ny singa dia mila mahafantatra ny olona fa misy izy ireo. Mba hanaovana izany, katalaogy fotsiny ireo singa. Ny torolalana dia manome topimaso mora hita amin'ny singanao rehetra. Izany dia manampy amin'ny fitazonana ny tsy fitoviana amin'ny maso sy hisorohana ny asa miverimberina.
Ireo fitaovana ireo dia manome fomba mety hijerena fanjakana samihafa. Mety ho sarotra ny mamerina ny toetry ny singa tsirairay amin'ny tontolon'ny fampiharana tena izy. Raha tokony hanindry ny fampiharana tena izy, dia mendrika ny hamolavola singa iray manokana. Ny fanjakana sarotra tratrarina (toy ny fanjakana mavesatra) dia azo atao simulation.
Miaraka amin'ny fampisehoana an-tsary momba ny fanjakana isan-karazany sy ny lisitry ny fananana, dia matetika ilaina ny manoratra famaritana ankapobeny momba ny votoaty - ny antony famolavolana, tranga fampiasana, na famaritana ny valin'ny fitsapana mpampiasa. Tena mora ianarana ny Markdown - raha ny tokony ho izy, ny torolalana dia tokony ho loharano iombonana ho an'ny mpamorona sy mpamorona. Docz, Styleguidist, ary Storybook dia manolotra fomba fampifangaroana mora ny Markdown amin'ny singa.
Docz
Amin'izao fotoana izao dia miara-miasa amin'ny React ihany i Docz, fa efa mandeha ny asa mavitrika hanohanana ireo singa Preact, Vue ary tranonkala. Docz no farany indrindra amin'ireo fitaovana telo, saingy nahavita nanangona kintana maherin'ny 14 tao amin'ny Github. Docz dia mampiditra singa roa − <Playground> и < Props >. Izy ireo dia nafarana sy ampiasaina amin'ny rakitra .mdx.
import { Playground, Props } from "docz";
import Button from "../src/Button";
## You can _write_ **markdown**
### You can import and use components
<Button>click</Button>Azonao atao ny mamatotra ny singa React anao manokana <Playground>mba hamoronana analogue ny CodePen na CodeSandbox naorina - izany hoe, hitanao ny singanao ary azonao atao ny manova azy.
<Playground>
<Button>click</Button>
</Playground><Props> dia hampiseho ny fananana rehetra misy ho an'ny singa React nomena, ny sanda mahazatra, ary raha ilaina ilay fananana.
<Props of={Button} />Amiko manokana dia hitako fa ity fomba fiasa mifototra amin'ny MDX ity no mora azo sy mora ampiasaina.
Raha mpankafy ny mpamorona tranokala static Gatsby ianao, Docz dia manolotra fampidirana lehibe.
Style guide
Tahaka an'i Docz, ny ohatra dia nosoratana tamin'ny fampiasana syntax Markdown. Styleguidist dia mampiasa sakana kaody Markdown (tsipiteny telo) amin'ny rakitra mahazatra .md rakitra, fa tsy MDX.
```js
<Button onClick={() => console.log('clicked')>Push Me</Button>Ny sakana kaody ao amin'ny Markdown dia matetika mampiseho kaody. Rehefa mampiasa Styleguidist, izay andian-kaody misy marika fiteny js, jsx na javascript dia havadika ho singa React. Toa an'i Docz, azo ovaina ny kaody - afaka manova fananana ianao ary mahita avy hatrany ny vokatra.
Styleguidist dia hamorona latabatra fananana avy amin'ny PropTypes, Flow na Typescript fanambarana.
Styleguidist amin'izao fotoana izao dia manohana ny React sy Vue.
Boky fitantarana
Ny Storybook dia mametraka ny tenany ho "tontolo fampandrosoana singa UI." Raha tokony hanoratra singa ohatra ao anaty rakitra Markdown na MDX ianao, dia manoratra tantara ao anaty rakitra Javascript. История manorata ny toetry ny singa iray. Ohatra, ny singa iray dia mety manana tantara momba ny fanjakana feno entana sy fanjakana kilemaina (sembana).
storiesOf('Button', module)
.add('disabled', () => (
<Button disabled>lorem ipsum</Button>
))Ny boky tantara dia sarotra kokoa noho ny Styleguidist sy Docz. Saingy amin'izany fotoana izany, ity no safidy malaza indrindra; manana kintana maherin'ny 36 ao amin'ny Github ny tetikasa. Tetikasa loharano misokatra misy mpandray anjara 000 sy mpiasa amin'ny fotoana feno. Izy io dia ampiasain'ny Airbnb, Algolia, Atlassian, Lyft ary Salesforce. Ny Storybook dia manohana rafitra kokoa noho ny mpifaninana - React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte ary HTML mahazatra.
Amin'ny famoahana ho avy dia hisy endri-javatra avy amin'ny Docz ary MDX no hampidirina.
# Button
Some _notes_ about your button written with **markdown syntax**.
<Story name="disabled">
<Button disabled>lorem ipsum</Button>
</Story>Ny endri-javatra vaovao an'ny Storybook dia hivoaka tsikelikely mandritra ny volana vitsivitsy ary toa ho dingana lehibe izany.
vokatra
Ny tombotsoan'ny tranomboky modely dia ankalazaina amin'ny lahatsoratra an-tapitrisany ao amin'ny Medium. Rehefa vita tsara izy ireo dia manamora ny famoronana vokatra mifandraika sy mitazona ny maha-izy azy. Mazava ho azy fa tsy misy amin'ireo fitaovana ireo hamorona rafitra famolavolana mahagaga. Mitaky famolavolana tsara sy CSS izany. Saingy rehefa tonga ny fotoana hanaovana rafitra famolavolana ho an'ny orinasa iray manontolo, Docz, Storybook ary Styleguidist dia safidy tsara.
Avy amin'ny mpandika teny. Ity no traikefako voalohany momba ny Habré. Raha mahita tsy marina ianao, na manana soso-kevitra hanatsarana ny lahatsoratra dia manorata ho ahy amin'ny hafatra manokana.
Source: www.habr.com