{"id":34791,"date":"2019-10-31T22:00:25","date_gmt":"2019-10-31T19:00:25","guid":{"rendered":"https:\/\/prohoster.info\/blog\/zhivye-gajdlajny-mdx-i-drugie-frejmvorki\/"},"modified":"2019-10-31T22:00:25","modified_gmt":"2019-10-31T19:00:25","slug":"zhivye-gajdlajny-mdx-i-drugie-frejmvorki","status":"publish","type":"post","link":"https:\/\/prohoster.info\/sq\/blog\/administrirovanie\/zhivye-gajdlajny-mdx-i-drugie-frejmvorki","title":{"rendered":"Guidat e gjalla \u2014 MDX dhe frameworke t\u00eb tjera","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Ju mund t\u00eb keni projektin m\u00eb t\u00eb mir\u00eb me kod t\u00eb hapur, por n\u00ebse ai nuk ka dokumentacion t\u00eb mir\u00eb, ka mund\u00ebsi q\u00eb ai kurr\u00eb t\u00eb mos arrij\u00eb sukses. N\u00eb zyra, dokumentacioni i mir\u00eb do ju ndihmoj\u00eb t\u00eb mos p\u00ebrgjigjeni vazhdimisht p\u00ebr t\u00eb nj\u00ebjtat pyetje. Dokumentacioni gjithashtu garanton q\u00eb njer\u00ebzit mund t\u00eb kuptojn\u00eb projektin n\u00ebse punonj\u00ebsit ky\u00e7 largohen nga kompania ose ndodhin ndryshime n\u00eb rolet. Udh\u00ebzimet e gjalla do t\u00eb ndihmojn\u00eb n\u00eb ruajtjen e integritetit t\u00eb t\u00eb dh\u00ebnave. <\/p>\n

<\/a><\/noindex><\/p>\n

N\u00ebse ju nevojitet t\u00eb shkruani nj\u00eb tekst t\u00eb gjat\u00eb, Markdown \u00ebsht\u00eb nj\u00eb alternativ\u00eb e shk\u00eblqyer ndaj HTML. Ndonj\u00ebher\u00eb, sintaksa e Markdown s'do t\u00eb mjaftoj\u00eb. N\u00eb k\u00ebt\u00eb rast, ne mund t\u00eb p\u00ebrdorim HTML brenda tij. P\u00ebr shembull, element\u00eb personalizuar. Prandaj, n\u00ebse po nd\u00ebrtoni nj\u00eb sistem dizajni me komponente web natyrale, \u00ebsht\u00eb e leht\u00eb t'i p\u00ebrfshini ato n\u00eb dokumentacionin tekstual. N\u00ebse po p\u00ebrdorni React (ose ndonj\u00eb tjet\u00ebr framework JSX, si Preact ose Vue), ju mund t\u00eb b\u00ebni t\u00eb nj\u00ebjt\u00ebn gj\u00eb p\u00ebrmes MDX. <\/p>\n

<\/p>\n

Ky artikull \u00ebsht\u00eb nj\u00eb pamje e gjer\u00eb mbi mjetet p\u00ebr shkruajten e dokumentacionit dhe krijimin e udh\u00ebzuesve. Jo t\u00eb gjitha mjetet e p\u00ebrmendura k\u00ebtu p\u00ebrdorin MDX, por ai po p\u00ebrfshihet gjithnj\u00eb e m\u00eb shum\u00eb n\u00eb mjetet e dokumentacionit.<\/p>\n

<\/p>\n

\u00c7far\u00eb \u00ebsht\u00eb MDX?<\/h2>\n

<\/p>\n

Skeda .mdx<\/code> ka i nj\u00eb sintaks\u00eb t\u00eb ngjashme me Markdown, por lejon importimin e komponent\u00ebve interaktiv JSX dhe integrimin e tyre n\u00eb p\u00ebrmbajtjen tuaj. Mb\u00ebshtetja p\u00ebr komponent\u00ebt Vue \u00ebsht\u00eb n\u00eb alfa. P\u00ebr t\u00eb filluar t\u00eb punoni me MDX, mjafton t\u00eb instaloni 'Create React App'. Ka plugina p\u00ebr Next.js dhe Gatsby. Versioni i ardhsh\u00ebm Docusaurus (versioni 2) gjithashtu do t\u00eb ket\u00eb mb\u00ebshtetje t\u00eb brendshme.<\/p>\n

<\/p>\n

Shkrimi i dokumentacionit me Docusaurus<\/h2>\n

<\/p>\n

Docusaurus \u00ebsht\u00eb shkruar nga Facebook. Ata e p\u00ebrdorin at\u00eb n\u00eb \u00e7do projekt me kod t\u00eb hapur, p\u00ebrve\u00e7 React. Jasht\u00eb kompanis\u00eb, p\u00ebrdoret nga Redux, Prettier, Gulp dhe Babel.<\/p>\n

<\/p>\n

\"GuidatProjektet q\u00eb p\u00ebrdorin Docusaurus.<\/em><\/p>\n

<\/p>\n

Docusaurus mund t\u00eb p\u00ebrdoret p\u00ebr t\u00eb shkruar \u00e7far\u00ebdo<\/em> dokumenatacion, jo vet\u00ebm p\u00ebr t\u00eb p\u00ebrshkruar front-endin. Ai ka React n\u00ebn kapu\u00e7, por p\u00ebr ta p\u00ebrdorur, nuk \u00ebsht\u00eb e nevojshme t\u00eb jeni t\u00eb njohur me t\u00eb. Ai merr skedar\u00ebt tuaj Markdown, nj\u00eb grimc\u00eb magjie dhe dokumentacioni i strukturuar mir\u00eb, i formatizuar dhe i lexuesh\u00ebm me nj\u00eb dizajn t\u00eb bukur \u00ebsht\u00eb gati. <\/p>\n

<\/p>\n

\"Guidat
\nN\u00eb faqen e internetit t\u00eb Redux mund t\u00eb shihni modelin standard t\u00eb Docusaurus<\/em><\/p>\n

<\/p>\n

Website-t\u00eb e krijuara me Docusaurus gjithashtu mund t\u00eb p\u00ebrfshijn\u00eb nj\u00eb blog t\u00eb bazuar n\u00eb Markdown. P\u00ebr theksimin e sintaks\u00ebs, Prism.js \u00ebsht\u00eb aktivizuar menj\u00ebher\u00eb. Megjith\u00ebse Docusaurus ka dal\u00eb n\u00eb sken\u00eb relativisht s\u00eb fundmi, ai \u00ebsht\u00eb pranuar si mjeti m\u00eb i mir\u00eb i vitit 2018 n\u00eb StackShare. <\/p>\n

<\/p>\n

M\u00eb shum\u00eb mund\u00ebsi p\u00ebr krijimin e p\u00ebrmbajtjes<\/h2>\n

<\/p>\n

Docusaurus \u00ebsht\u00eb krijuar posa\u00e7\u00ebrisht p\u00ebr t\u00eb krijuar dokumentacione. Natyrisht, ka miliona dhe nj\u00eb m\u00ebnyr\u00eb p\u00ebr t\u00eb b\u00ebr\u00eb nj\u00eb faqe \u2014 mund t\u00eb vendosni zgjidhjen tuaj n\u00eb \u00e7do gjuh\u00eb, CMS ose t\u00eb p\u00ebrdorni nj\u00eb gjenerues t\u00eb faqeve statike.<\/p>\n

<\/p>\n

P\u00ebr shembull, dokumentacioni p\u00ebr React, sistemi i dizajnit t\u00eb IBM, Apollo dhe Ghost CMS p\u00ebrdorin Gatsby \u2014 ky \u00ebsht\u00eb nj\u00eb gjenerues i faqeve statike, i cili shpesh p\u00ebrdoret p\u00ebr blogje. N\u00ebse punoni me Vue, at\u00ebher\u00eb VuePress do t\u00eb jet\u00eb nj\u00eb opsion i mir\u00eb p\u00ebr ju. Nj\u00eb alternativ\u00eb tjet\u00ebr \u00ebsht\u00eb t\u00eb p\u00ebrdorni nj\u00eb gjenerues t\u00eb shkruar n\u00eb Python \u2014 MkDocs. Ai \u00ebsht\u00eb i hapur dhe konfigurimi b\u00ebhet p\u00ebrmes nj\u00eb skedari YAML. GitBook gjithashtu \u00ebsht\u00eb nj\u00eb opsion i mir\u00eb, por \u00ebsht\u00eb falas vet\u00ebm p\u00ebr ekipet e hapura dhe jo-komerciale. Dhe mund t\u00eb ngarkoni thjesht skedar\u00eb markdown, duke p\u00ebrdorur git, dhe t\u00eb punoni me ta n\u00eb Github. <\/p>\n

<\/p>\n

Dokumentimi i komponenteve: Docz, Storybook dhe Styleguidist.<\/h2>\n

<\/p>\n

Rregullat, sistemet e dizajnit, bibliotekat e komponenteve \u2014 pavar\u00ebsisht se si i quani ato, ato jan\u00eb b\u00ebr\u00eb shum\u00eb t\u00eb njohura koh\u00ebt e fundit. Shfaqja e strukturave komponentiale, si React, dhe mjetet e p\u00ebrmendura k\u00ebtu \u2014 kan\u00eb lejuar q\u00eb ato t\u00eb shnd\u00ebrrohen nga projekte vaniteti n\u00eb mjete t\u00eb dobishme. <\/p>\n

<\/p>\n

Storybook, Docz dhe Styleguidist \u2014 b\u00ebjn\u00eb t\u00eb nj\u00ebjt\u00ebn gj\u00eb: shfaqin elemente interaktive dhe dokumentojn\u00eb API-t\u00eb e tyre. Nj\u00eb projekt mund t\u00eb ket\u00eb dhjet\u00ebra ose madje qindra komponente \u2014 t\u00eb gjitha me gjendje dhe stile t\u00eb ndryshme. N\u00ebse doni q\u00eb komponentet t\u00eb p\u00ebrdoren s\u00ebrish, njer\u00ebzit duhet t\u00eb din\u00eb se ato ekzistojn\u00eb. P\u00ebr k\u00ebt\u00eb mjafton t\u00eb katalogizoni komponentet. Rregullat ofrojn\u00eb nj\u00eb pasqyr\u00eb t\u00eb leht\u00eb p\u00ebr t'u k\u00ebrkuar p\u00ebr t\u00eb gjitha komponentet tuaja. Kjo ndihmon n\u00eb ruajtjen e koherenc\u00ebs vizuale dhe shmang rekompleksitetin e pun\u00ebs.<\/p>\n

<\/p>\n

K\u00ebto mjete ofrojn\u00eb nj\u00eb m\u00ebnyr\u00eb t\u00eb leht\u00eb p\u00ebr t\u00eb par\u00eb gjendje t\u00eb ndryshme. Mund t\u00eb jet\u00eb e v\u00ebshtir\u00eb t\u00eb riprodhoni \u00e7do gjendje t\u00eb komponentit n\u00eb kontekstin e nj\u00eb aplikacioni real. N\u00eb vend q\u00eb t\u00eb klikoni mbi nj\u00eb aplikacion real, \u00ebsht\u00eb m\u00eb mir\u00eb t\u00eb zhvilloni nj\u00eb komponent t\u00eb ve\u00e7ant\u00eb. Mund t\u00eb modeloni gjendje t\u00eb v\u00ebshtira p\u00ebr t'u arritur (p.sh., gjendja e ngarkimit). <\/p>\n

<\/p>\n

N\u00eb p\u00ebrputhje me demonstrimin vizual t\u00eb gjendjeve t\u00eb ndryshme dhe list\u00ebs s\u00eb pronave, shpesh \u00ebsht\u00eb e nevojshme t\u00eb shkruhet nj\u00eb p\u00ebrshkrim i p\u00ebrgjithsh\u00ebm t\u00eb p\u00ebrmbajtjes - justifikimet e dizajnit, rastet e p\u00ebrdorimit ose p\u00ebrshkrimi i rezultateve t\u00eb testimit t\u00eb p\u00ebrdoruesve. Markdown \u00ebsht\u00eb shum\u00eb e leht\u00eb p\u00ebr t'u m\u00ebsuar - idealisht, udh\u00ebzimet duhet t\u00eb jen\u00eb nj\u00eb burim dhe p\u00ebr dizajner\u00ebt dhe p\u00ebr zhvilluesit. Docz, Styleguidist dhe Storybook ofrojn\u00eb nj\u00eb m\u00ebnyr\u00eb t\u00eb leht\u00eb p\u00ebr t\u00eb kombinuar Markdown me komponent\u00ebt.<\/p>\n

<\/p>\n

Docz<\/h2>\n

<\/p>\n

Aktualisht, Docz funksionon vet\u00ebm me React, por \u00ebsht\u00eb duke u punuar aktivisht p\u00ebr mb\u00ebshtetje t\u00eb Preact, Vue dhe komponenteve p\u00ebr web. Docz \u00ebsht\u00eb m\u00eb i fresk\u00ebt nga tre mjetet, por n\u00eb Github ka arritur mbi 14,000 yje. Docz paraqet dy komponent\u00eb - <Playground><\/code> dhe < Props ><\/code>. Ato importohen dhe p\u00ebrdoren n\u00eb skedar\u00ebt .mdx<\/code>. <\/p>\n

<\/p>\n

import { Playground, Props } from \"docz\";\nimport Button from \"..\\\/src\\\/Button\";\n\n## Mund t\u00eb _shkruani_ **markdown**\n### Mund t\u00eb importoni dhe p\u00ebrdorni komponent\u00eb\n\n