{"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\/ro\/blog\/administrirovanie\/zhivye-gajdlajny-mdx-i-drugie-frejmvorki","title":{"rendered":"Ghiduri actualizate \u2013 MDX \u0219i alte framework-uri","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Pute\u021bi avea cel mai bun proiect open-source, dar dac\u0103 nu are o documenta\u021bie bun\u0103, exist\u0103 \u0219anse mari s\u0103 nu decoleze niciodat\u0103. O documenta\u021bie bine conceput\u0103 \u00een birou v\u0103 va ajuta s\u0103 nu r\u0103spunde\u021bi la acelea\u0219i \u00eentreb\u0103ri din nou \u0219i din nou. Documenta\u021bia garanteaz\u0103, de asemenea, c\u0103 oamenii pot \u00een\u021belege proiectul dac\u0103 angaja\u021bii cheie p\u0103r\u0103sesc compania sau dac\u0103 rolurile se schimb\u0103. Ghidurile interactive vor ajuta la asigurarea integrit\u0103\u021bii datelor. <\/p>\n

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

Dac\u0103 trebuie s\u0103 scrie\u021bi un text lung, Markdown este o alternativ\u0103 excelent\u0103 la HTML. Uneori, sintaxa Markdown nu este suficient\u0103. \u00cen acest caz, putem folosi HTML \u00een interiorul s\u0103u. De exemplu, elemente personalizate. A\u0219adar, dac\u0103 construi\u021bi un sistem de design cu componente web native, aceste componente pot fi u\u0219or incluse \u00een documenta\u021bia textual\u0103. Dac\u0103 utiliza\u021bi React (sau orice alt cadru JSX, cum ar fi Preact sau Vue), pute\u021bi face acela\u0219i lucru folosind MDX. <\/p>\n

<\/p>\n

Acest articol este o prezentare general\u0103 ampl\u0103 a instrumentelor pentru scrierea documenta\u021biei \u0219i crearea de ghiduri. Nu toate instrumentele enumerate aici folosesc MDX, dar acesta este din ce \u00een ce mai frecvent integrat \u00een instrumentele de documentare.<\/p>\n

<\/p>\n

Ce este MDX?<\/h2>\n

<\/p>\n

Fi\u0219ier .mdx<\/code> are acela\u0219i sintax\u0103 ca \u0219i Markdown, dar permit importarea componentelor interactive JSX \u0219i \u00eencorporarea acestora \u00een con\u021binutul t\u0103u. Suportul pentru componentele Vue se afl\u0103 \u00een versiune alpha. Pentru a \u00eencepe s\u0103 lucrezi cu MDX, este suficient s\u0103 instalezi \u201eCreate React App\u201d. Exist\u0103 pluginuri pentru Next.js \u0219i Gatsby. Urm\u0103toarea versiune Docusaurus (versiunea 2) va include, de asemenea, suport \u00eencorporat.<\/p>\n

<\/p>\n

Scrierea documenta\u021biei cu Docusaurus<\/h2>\n

<\/p>\n

Docusaurus a fost creat de Facebook. Ace\u0219tia \u00eel folosesc pentru fiecare proiect open-source, cu excep\u021bia React. \u00cen afara companiei, este utilizat de Redux, Prettier, Gulp \u0219i Babel.<\/p>\n

<\/p>\n

\"GhiduriProiecte care folosesc Docusaurus.<\/em><\/p>\n

<\/p>\n

Docusaurus poate fi folosit pentru scrierea oricine<\/em> documenta\u021biei, nu doar pentru descrierea frontend-ului. Sub capot\u0103 are React, dar nu este necesar s\u0103 \u00eel cunoa\u0219te\u021bi pentru a-l folosi. El preia fi\u0219ierele dumneavoastr\u0103 Markdown, cu o mic\u0103 magie, \u0219i documenta\u021bia bine structurat\u0103, formatat\u0103 \u0219i u\u0219or de citit cu un design frumos este gata. <\/p>\n

<\/p>\n

\"Ghiduri
\nPe site-ul Redux pute\u021bi consulta \u0219ablonul standard Docusaurus<\/em><\/p>\n

<\/p>\n

Site-urile create cu Docusaurus pot include, de asemenea, un blog bazat pe Markdown. Pentru eviden\u021bierea sintaxei, Prism.js este deja integrat. De\u0219i Docusaurus a ap\u0103rut relativ recent, a fost recunoscut ca fiind cel mai bun instrument din 2018 pe StackShare. <\/p>\n

<\/p>\n

Alte op\u021biuni pentru crearea de con\u021binut<\/h2>\n

<\/p>\n

Docusaurus este special conceput pentru a crea documenta\u021bie. Sigur, exist\u0103 milioane de modalit\u0103\u021bi de a face un site \u2014 pute\u021bi implementa propria solu\u021bie \u00een orice limb\u0103, CMS sau utiliza un generator de site-uri statice.<\/p>\n

<\/p>\n

De exemplu, documenta\u021bia pentru React, sistemul de design IBM, Apollo \u0219i Ghost CMS folosesc Gatsby \u2014 un generator de site-uri statice care este adesea folosit pentru bloguri. Dac\u0103 lucra\u021bi cu Vue, VuePress va fi o op\u021biune bun\u0103 pentru dumneavoastr\u0103. O alt\u0103 op\u021biune este s\u0103 folosi\u021bi un generator scris \u00een Python \u2014 MkDocs. Acesta este deschis \u0219i se configureaz\u0103 cu ajutorul unui singur fi\u0219ier YAML. GitBook este de asemenea o op\u021biune decent\u0103, dar este gratuit doar pentru echipele deschise \u0219i non-profit. De asemenea, pute\u021bi pur \u0219i simplu s\u0103 \u00eenc\u0103rca\u021bi fi\u0219iere Markdown folosind Git \u0219i s\u0103 lucra\u021bi cu ele \u00een Github. <\/p>\n

<\/p>\n

Documentarea componentelor: Docz, Storybook \u0219i Styleguidist<\/h2>\n

<\/p>\n

Guideline-urile, sistemele de design, bibliotecile de componente \u2014 indiferent de cum le numi\u021bi, acestea au devenit foarte populare \u00een ultima vreme. Apari\u021bia cadrelor de componente, cum ar fi React \u0219i uneltele men\u021bionate aici \u2014 a transformat aceste proiecte din lucruri vanitoase \u00een instrumente utile. <\/p>\n

<\/p>\n

Storybook, Docz \u0219i Styleguidist \u2014 fac acela\u0219i lucru: afi\u0219eaz\u0103 elemente interactive \u0219i documenteaz\u0103 API-urile acestora. Un proiect poate avea zeci sau chiar sute de componente \u2014 toate cu diverse st\u0103ri \u0219i stiluri. Dac\u0103 dori\u021bi ca componentele s\u0103 fie reutilizate, oamenii trebuie s\u0103 \u0219tie c\u0103 ele exist\u0103. Este suficient s\u0103 catalogiza\u021bi componentele. Guideline-urile ofer\u0103 o privire de ansamblu u\u0219or de c\u0103utat asupra tuturor componentelor dvs. Acest lucru ajut\u0103 la men\u021binerea coeren\u021bei vizuale \u0219i la evitarea muncii redundante.<\/p>\n

<\/p>\n

Aceste unelte ofer\u0103 o modalitate convenabil\u0103 de a vizualiza diverse st\u0103ri. Poate fi dificil s\u0103 reproduce\u021bi fiecare stare a unei componente \u00een contextul unei aplica\u021bii reale. \u00cen loc s\u0103 face\u021bi clic pe o aplica\u021bie real\u0103, este mai bine s\u0103 dezvolta\u021bi o component\u0103 separat\u0103. Pute\u021bi modela st\u0103ri greu accesibile (de exemplu, starea de \u00eenc\u0103rcare). <\/p>\n

<\/p>\n

\u00cempreun\u0103 cu demonstrarea vizual\u0103 a diferitelor st\u0103ri \u0219i lista de propriet\u0103\u021bi, este adesea necesar s\u0103 scriem o descriere general\u0103 a con\u021binutului \u2014 justificarea designului, cazurile de utilizare sau descrierea rezultatelor test\u0103rii utilizatorilor. Markdown este foarte u\u0219or de \u00eenv\u0103\u021bat \u2014 ideal, ghidurile ar trebui s\u0103 fie o resurs\u0103 comun\u0103 pentru designeri \u0219i dezvoltatori. Docz, Styleguidist \u0219i Storybook ofer\u0103 o modalitate u\u0219oar\u0103 de a amesteca Markdown cu componente.<\/p>\n

<\/p>\n

Docz<\/h2>\n

<\/p>\n

\u00cen prezent, Docz func\u021bioneaz\u0103 doar cu React, dar se lucreaz\u0103 activ la sprijinul pentru Preact, Vue \u0219i componente web. Docz este cel mai nou dintre cele trei instrumente, dar pe Github a reu\u0219it s\u0103 adune peste 14.000 de stele. Docz prezint\u0103 dou\u0103 componente \u2014 <Playground><\/code> \u0219i < Props ><\/code>. Acestea sunt importate \u0219i folosite \u00een fi\u0219iere .mdx<\/code>. <\/p>\n

<\/p>\n

import { Playground, Props } from \"docz\";\nimport Button from \"..\\\/src\\\/Button\";\n\n## Po\u021bi _scrie_ **markdown**\n### Po\u021bi importa \u0219i folosi componente\n\n