{"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\/hu\/blog\/administrirovanie\/zhivye-gajdlajny-mdx-i-drugie-frejmvorki","title":{"rendered":"\u00c9l\u0151 \u00fatmutat\u00f3k \u2014 MDX \u00e9s m\u00e1s keretrendszerek","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Lehet, hogy a legjobb ny\u00edlt forr\u00e1sk\u00f3d\u00fa projekted van, de ha nincs j\u00f3 dokument\u00e1ci\u00f3ja, val\u00f3sz\u00edn\u0171, hogy sosem fog siker\u00fclni. Az irod\u00e1ban a j\u00f3 dokument\u00e1ci\u00f3 lehet\u0151v\u00e9 teszi, hogy ne kelljen ugyanazokra a k\u00e9rd\u00e9sekre v\u00e1laszolnod. A dokument\u00e1ci\u00f3 biztos\u00edtja azt is, hogy az emberek meg\u00e9rts\u00e9k a projektet, ha a kulcsfontoss\u00e1g\u00fa munkat\u00e1rsak t\u00e1voznak, vagy a szerepek megv\u00e1ltoznak. Az \u00e9l\u0151 ir\u00e1nyelvek seg\u00edtenek a befektetett adatok integrit\u00e1s\u00e1nak meg\u0151rz\u00e9s\u00e9ben. <\/p>\n

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

Ha hossz\u00fa sz\u00f6veget kell \u00edrnod, a Markdown nagyszer\u0171 alternat\u00edva a HTML-hez. N\u00e9ha a Markdown szintaxisa nem elegend\u0151. Ilyen esetben HTML-t is haszn\u00e1lhatunk benne. P\u00e9ld\u00e1ul, egyedi elemeket. Teh\u00e1t ha diz\u00e1jnrendszert \u00e9p\u00edtesz nat\u00edv webkomponensekkel, k\u00f6nnyen beillesztheted \u0151ket a sz\u00f6veges dokument\u00e1ci\u00f3ba. Ha React-ot (vagy b\u00e1rmilyen m\u00e1s JSX keretrendszert, p\u00e9ld\u00e1ul Preact vagy Vue) haszn\u00e1lsz, akkor ugyanazt megteheted az MDX seg\u00edts\u00e9g\u00e9vel. <\/p>\n

<\/p>\n

Ez a cikk egy sz\u00e9les k\u00f6r\u0171 \u00e1ttekint\u00e9st ny\u00fajt a dokument\u00e1ci\u00f3s \u00e9s ir\u00e1nyelv k\u00e9sz\u00edt\u0151 eszk\u00f6z\u00f6kr\u0151l. Nem minden itt felsorolt eszk\u00f6z haszn\u00e1l MDX-et, de egyre gyakrabban be\u00e9p\u00edtik a dokument\u00e1l\u00f3 eszk\u00f6z\u00f6kbe.<\/p>\n

<\/p>\n

Mi az MDX?<\/h2>\n

<\/p>\n

F\u00e1jl .mdx<\/code> ugyanazt a szintaxist haszn\u00e1lja, mint a Markdown, de lehet\u0151v\u00e9 teszi interakt\u00edv JSX komponensek import\u00e1l\u00e1s\u00e1t \u00e9s azok be\u00e1gyaz\u00e1s\u00e1t a tartalm\u00e1ba. A Vue komponensek t\u00e1mogat\u00e1sa alpha f\u00e1zisban van. Az MDX haszn\u00e1lat\u00e1nak megkezd\u00e9s\u00e9hez elegend\u0151 telep\u00edteni a \u201eCreate React App\u201d-ot. Vannak pluginek a Next.js \u00e9s Gatsby sz\u00e1m\u00e1ra. A Docusaurus k\u00f6vetkez\u0151 verzi\u00f3ja (2. verzi\u00f3) is be\u00e9p\u00edtett t\u00e1mogat\u00e1ssal fog rendelkezni.<\/p>\n

<\/p>\n

Dokument\u00e1ci\u00f3 \u00edr\u00e1sa Docusaurus-szal<\/h2>\n

<\/p>\n

A Docusaurust a Facebook k\u00e9sz\u00edtette. Minden ny\u00edlt forr\u00e1sk\u00f3d\u00fa projektj\u00fckben haszn\u00e1lj\u00e1k, kiv\u00e9ve a React-ot. A c\u00e9gen k\u00edv\u00fcl a Redux, a Prettier, a Gulp \u00e9s a Babel is haszn\u00e1lja.<\/p>\n

<\/p>\n

\"\u00c9l\u0151A Docusaurust haszn\u00e1l\u00f3 projektek.<\/em><\/p>\n

<\/p>\n

A Docusaurust a dokument\u00e1ci\u00f3 \u00edr\u00e1s\u00e1hoz lehet haszn\u00e1lni, nemcsak a frontend le\u00edr\u00e1s\u00e1hoz. Alapj\u00e1t a React k\u00e9pezi, de ahhoz, hogy haszn\u00e1lni tudd, nem sz\u00fcks\u00e9ges ismerned. Egyszer\u0171en veszi a Markdown f\u00e1jljaidat, egy csipetnyi var\u00e1zslatot, \u00e9s j\u00f3l struktur\u00e1lt, form\u00e1zott \u00e9s olvashat\u00f3 dokument\u00e1ci\u00f3 k\u00e9sz\u00fcl gy\u00f6ny\u00f6r\u0171 diz\u00e1jnnal. . N\u00e9h\u00e1ny k\u00e9rd\u00e9s teljesen el\u00e9g j\u00f3nak t\u0171nik, m\u00e1sok pedig nem teljes\u00edtik a fent eml\u00edtett teszteket, k\u00fcl\u00f6n\u00f6sen a \"keres\u00e9s egyszer\u0171s\u00e9ge\" ellen\u0151rz\u00e9s\u00e9t.<\/em> A Redux weboldal\u00e1n megtekinthet\u0151 a Docusaurus alap\u00e9rtelmezett sablonja. <\/p>\n

<\/p>\n

\"\u00c9l\u0151
\nA Redux weboldal\u00e1n meg lehet n\u00e9zni a Docusaurus alap\u00e9rtelmezett sablonj\u00e1t.<\/em><\/p>\n

<\/p>\n

A Docusaurus-szal k\u00e9sz\u00fclt weboldalak Markdown alap\u00fa blogot is tartalmazhatnak. A szintaxis kiemel\u00e9s\u00e9hez a Prism.js azonnal csatlakozik. Annak ellen\u00e9re, hogy a Docusaurus viszonylag nemr\u00e9giben jelent meg, 2018 legjobb eszk\u00f6z\u00e9nek ismert\u00e9k el a StackShare-en. <\/p>\n

<\/p>\n

Tov\u00e1bbi tartalomk\u00e9sz\u00edt\u00e9si lehet\u0151s\u00e9gek<\/h2>\n

<\/p>\n

A Docusaurus kifejezetten dokument\u00e1ci\u00f3 k\u00e9sz\u00edt\u00e9s\u00e9re lett tervezve. Term\u00e9szetesen milli\u00f3 egy m\u00f3dja van egy weboldal l\u00e9trehoz\u00e1s\u00e1nak \u2014 saj\u00e1t megold\u00e1s\u00e1t b\u00e1rmilyen nyelven, CMS-ben megval\u00f3s\u00edthatja, vagy haszn\u00e1lhat statikus weboldal-gener\u00e1tort.<\/p>\n

<\/p>\n

P\u00e9ld\u00e1ul a React dokument\u00e1ci\u00f3ja, az IBM design rendszer, az Apollo \u00e9s a Ghost CMS a Gatsby-t haszn\u00e1lja \u2014 ez egy statikus weboldal-gener\u00e1tor, amelyet gyakran haszn\u00e1lnak blogokhoz. Ha Vue-t haszn\u00e1l, akkor a VuePress j\u00f3 v\u00e1laszt\u00e1s lehet az \u00d6n sz\u00e1m\u00e1ra. Egy m\u00e1sik lehet\u0151s\u00e9g egy Python nyelven \u00edrt gener\u00e1tor, a MkDocs alkalmaz\u00e1sa. Ez ny\u00edlt forr\u00e1sk\u00f3d\u00fa \u00e9s egy YAML f\u00e1jllal konfigur\u00e1lhat\u00f3. A GitBook is egy j\u00f3 opci\u00f3, de csak ny\u00edlt \u00e9s nem kereskedelmi csapatok sz\u00e1m\u00e1ra ingyenes. Emellett egyszer\u0171en felt\u00f6ltheti a Markdown f\u00e1jlokat a Git haszn\u00e1lat\u00e1val, \u00e9s dolgozhat vel\u00fck a GitHub-on. <\/p>\n

<\/p>\n

Komponensdokument\u00e1l\u00e1s: Docz, Storybook \u00e9s Styleguidist<\/h2>\n

<\/p>\n

\u00datmutat\u00f3k, design rendszerek, komponens k\u00f6nyvt\u00e1rak \u2014 b\u00e1rhogy is nevezik \u0151ket, az ut\u00f3bbi id\u0151ben nagyon n\u00e9pszer\u0171v\u00e9 v\u00e1ltak. A komponens-alap\u00fa keretrendszerek, mint p\u00e9ld\u00e1ul a React, \u00e9s a fenti eszk\u00f6z\u00f6k megjelen\u00e9se lehet\u0151v\u00e9 tette sz\u00e1mukra, hogy hi\u00fa projektekb\u0151l hasznos eszk\u00f6z\u00f6kk\u00e9 v\u00e1ljanak. <\/p>\n

<\/p>\n

A Storybook, a Docz \u00e9s a Styleguidist mind ugyanazt csin\u00e1lja: interakt\u00edv elemeket jelen\u00edt meg \u00e9s dokument\u00e1lja az API-jukat. Egy projekt rendelkezhet tucatnyi vagy ak\u00e1r t\u00f6bb sz\u00e1z komponenssel \u2014 mind k\u00fcl\u00f6nb\u00f6z\u0151 \u00e1llapotokkal \u00e9s st\u00edlusokkal. Ha szeretn\u00e9, hogy a komponensek \u00fajra felhaszn\u00e1lhat\u00f3ak legyenek, az embereknek tudniuk kell a l\u00e9tez\u00e9s\u00fckr\u0151l. Ehhez elegend\u0151 katalogiz\u00e1lni a komponenseket. Az \u00fatmutat\u00f3k \u00e1ttekinthet\u0151 m\u00f3don ny\u00fajtanak \u00f6sszefoglal\u00f3t minden komponensr\u0151l. Ez seg\u00edt fenntartani a vizu\u00e1lis k\u00f6vetkezetess\u00e9get \u00e9s elker\u00fclni a megism\u00e9telt munk\u00e1t.<\/p>\n

<\/p>\n

Ezek az eszk\u00f6z\u00f6k k\u00e9nyelmes m\u00f3dot biztos\u00edtanak a k\u00fcl\u00f6nb\u00f6z\u0151 \u00e1llapotok megtekint\u00e9s\u00e9re. Neh\u00e9z lehet egy komponens minden \u00e1llapot\u00e1t reproduk\u00e1lni egy val\u00f3s alkalmaz\u00e1s kontextus\u00e1ban. Ahelyett, hogy egy val\u00f3s alkalmaz\u00e1sban kattintgatna, \u00e9rdemes k\u00fcl\u00f6n komponenst fejleszteni. Modellezheti a nehezen el\u00e9rhet\u0151 \u00e1llapotokat (p\u00e9ld\u00e1ul a bet\u00f6lt\u00e9si \u00e1llapotot). <\/p>\n

<\/p>\n

A k\u00fcl\u00f6nb\u00f6z\u0151 \u00e1llapotok vizu\u00e1lis bemutat\u00e1sa \u00e9s a tulajdons\u00e1glist\u00e1k mellett gyakran sz\u00fcks\u00e9ges a tartalom \u00e1ltal\u00e1nos le\u00edr\u00e1s\u00e1nak meg\u00edr\u00e1sa \u2014 a diz\u00e1jn indokl\u00e1sa, felhaszn\u00e1l\u00e1si esetek vagy a felhaszn\u00e1l\u00f3i tesztel\u00e9si eredm\u00e9nyek bemutat\u00e1sa. A Markdown tanulm\u00e1nyoz\u00e1sa nagyon egyszer\u0171 \u2014 ide\u00e1lis esetben a ir\u00e1nyelvek k\u00f6z\u00f6s forr\u00e1st jelentenek a tervez\u0151k \u00e9s fejleszt\u0151k sz\u00e1m\u00e1ra. A Docz, Styleguidist \u00e9s Storybook egy egyszer\u0171 m\u00f3dot k\u00edn\u00e1l a Markdown \u00e9s a komponensek kever\u00e9s\u00e9re.<\/p>\n

<\/p>\n

Docz<\/h2>\n

<\/p>\n

Jelenleg a Docz csak a React-tel m\u0171k\u00f6dik, de akt\u00edvan dolgoznak a Preact, Vue \u00e9s webkomponensek t\u00e1mogat\u00e1s\u00e1n. A Docz a leg\u00fajabb a h\u00e1rom eszk\u00f6z k\u00f6z\u00fcl, de a GitHub-on t\u00f6bb mint 14 000 csillagot gy\u0171jt\u00f6tt \u00f6ssze. A Docz k\u00e9t komponenst k\u00edn\u00e1l \u2014 <Playground><\/code> \u00e9s < Props ><\/code>. Ezeket import\u00e1lj\u00e1k \u00e9s haszn\u00e1lj\u00e1k a f\u00e1jlokban .mdx<\/code>. <\/p>\n

<\/p>\n

import { Playground, Props } from \"docz\";\nimport Button from \"..\\\/src\\\/Button\";\n\n## \u00cdrhatsz _markdown_-t\n### Import\u00e1lhatsz \u00e9s haszn\u00e1lhatsz komponenseket\n\n