Stiùireadh beò - MDX agus frèaman eile

Is dòcha gu bheil pròiseact stòr fosgailte nas fheàrr agad, ach mura h-eil deagh sgrìobhainnean aige, tha teans nach toir e dheth gu bràth. Anns an oifis, cumaidh sgrìobhainnean math thu bho bhith a’ freagairt nan aon cheistean a-rithist is a-rithist. Bidh sgrìobhainnean cuideachd a’ dèanamh cinnteach gun urrainn do dhaoine ciall a dhèanamh den phròiseact ma dh’ fhàgas prìomh luchd-obrach a’ chompanaidh no ma dh’ atharraicheas dreuchdan. Bidh stiùiridhean beò a’ cuideachadh le bhith dèanamh cinnteach à ionracas dàta.

Ma dh’ fheumas tu teacsa fada a sgrìobhadh, tha Markdown na dheagh roghainn eile an àite HTML. Uaireannan chan eil co-chòrdadh Markdown gu leòr. Anns a 'chùis seo, is urrainn dhuinn HTML a chleachdadh na bhroinn. Mar eisimpleir, eileamaidean gnàthaichte. Mar sin, ma tha thu a’ togail siostam dealbhaidh le co-phàirtean lìn dùthchasach, tha e furasta an toirt a-steach do sgrìobhainnean teacsa. Ma tha thu a’ cleachdadh React (no frèam JSX sam bith eile mar Preact or Vue), faodaidh tu an aon rud a dhèanamh le MDX.

Tha an artaigil seo na shealladh farsaing air innealan airson sgrìobhainnean a sgrìobhadh agus stiùireadh a chruthachadh. Chan eil a h-uile inneal a tha air an liostadh an seo a’ cleachdadh MDX, ach tha e a’ sìor fhàs a-steach do innealan sgrìobhaidh.

Dè a th' ann am MDX?

faidhl .mdx aig a bheil an aon cho-chòrdadh ri Markdown ach leigidh e leat co-phàirtean JSX eadar-ghnìomhach a thoirt a-steach agus an cuir a-steach don t-susbaint agad. Tha taic airson co-phàirtean Vue ann an alpha. Gus tòiseachadh ag obair le MDX, dìreach stàlaich "Cruthaich React App". Tha plugins ann airson Next.js agus Gatsby. Bidh taic a-staigh aig an ath dhreach de Docusaurus (dreach 2).

A 'sgrìobhadh sgrìobhainnean le Docusaurus

Sgrìobh Docusaurus air Facebook. Bidh iad ga chleachdadh air a h-uile pròiseact stòr fosgailte ach a-mhàin React. Taobh a-muigh na companaidh, bidh Redux, Prettier, Gulp, agus Babel ga chleachdadh.

Stiùireadh beò - MDX agus frèaman eilePròiseactan a bhios a’ cleachdadh Docusaurus.

Faodar Docusaurus a chleachdadh airson sgrìobhadh aon sam bith sgrìobhainnean, chan ann a-mhàin airson cunntas a thoirt air an aghaidh. Tha React aige fon chochall, ach cha leig thu leas a bhith eòlach air airson a chleachdadh. Bheir e na faidhlichean Markdown agad, tha pìos de dhraoidheachd agus sgrìobhainnean le deagh structar, cruth agus leughadh le dealbhadh brèagha deiseil.

Stiùireadh beò - MDX agus frèaman eile
Chì thu an teamplaid Docusaurus bunaiteach air làrach-lìn Redux.

Faodaidh làraich a chaidh a thogail le Docusaurus cuideachd blog stèidhichte air Markdown a ghabhail a-steach. Airson soilleireachadh co-chòrdadh, tha Prism.js air a thoirt a-steach sa bhad. A dh 'aindeoin gu bheil Docusaurus air nochdadh an ìre mhath o chionn ghoirid, chaidh aithneachadh mar an inneal as fheàrr de 2018 air StackShare.

Roghainnean cruthachaidh susbaint eile

Tha Docusaurus air a dhealbhadh gu sònraichte airson sgrìobhainnean a chruthachadh. Gu dearbh, tha millean agus aon dòigh ann airson làrach-lìn a chruthachadh - faodaidh tu am fuasgladh agad fhèin a chleachdadh ann an cànan sam bith, CMS, no gineadair làrach statach a chleachdadh.

Mar eisimpleir, bidh na sgrìobhainnean airson React, siostam dealbhaidh IBM, Apollo, agus Ghost CMS a’ cleachdadh Gatsby, gineadair làrach statach a bhios gu tric air a chleachdadh airson blogaichean. Ma tha thu ag obair le Vue tha VuePress na dheagh roghainn dhut. Is e roghainn eile gineadair a chleachdadh sgrìobhte ann am Python - MkDocs. Tha e fosgailte agus air a rèiteachadh le aon fhaidhle YAML. Tha GitBook cuideachd na dheagh roghainn, ach chan eil e an-asgaidh ach airson sgiobaidhean fosgailte agus neo-mhalairteach. Faodaidh tu cuideachd dìreach faidhlichean mardown a luchdachadh suas a’ cleachdadh git agus obrachadh còmhla riutha ann an Github.

Sgrìobhainnean co-phàirteach: Docz, leabhar-sgeulachd agus treòraiche stoidhle

Stiùireadh, dealbhadh shiostaman, leabharlannan co-phàirteach, ge bith dè a tha thu airson an ainmeachadh, tha iad sin air a bhith mòr-chòrdte o chionn ghoirid. Tha nochdadh frèaman co-phàirteach leithid React agus na h-innealan a tha air an ainmeachadh an seo air a dhèanamh comasach an cruth-atharrachadh bho phròiseactan vanity gu bhith nan innealan feumail.

Bidh Leabhar-sgeulachd, Docz agus Styleguidist a’ dèanamh an aon rud: seall eileamaidean eadar-ghnìomhach agus clàraich an API aca. Faodaidh dusanan no eadhon ceudan de cho-phàirtean a bhith aig pròiseact, uile le diofar stàitean agus stoidhlichean. Ma tha thu airson gun tèid co-phàirtean ath-chleachdadh, feumaidh fios a bhith aig daoine gu bheil iad ann. Gus seo a dhèanamh, tha e gu leòr airson na pàirtean a chlàradh. Tha an stiùireadh a’ toirt seachad sealladh farsaing a tha furasta a sgrùdadh air na co-phàirtean agad gu lèir. Bidh seo a 'cuideachadh le bhith a' cumail cunbhalachd lèirsinneach agus a 'seachnadh obair ath-aithris.

Tha na h-innealan sin nan dòigh goireasach airson diofar stàitean fhaicinn. Faodaidh e a bhith duilich a h-uile suidheachadh co-phàirteach ath-riochdachadh ann an co-theacsa tagradh fìor. An àite a bhith a’ cliogadh air an fhìor iarrtas, is fhiach co-phàirt air leth a leasachadh. Tha e comasach stàitean a tha doirbh a ruighinn a mhodail (mar eisimpleir, staid luchdachadh).

Còmhla ri taisbeanadh lèirsinneach de dhiofar stàitean agus liosta de thogalaichean, gu tric feumar tuairisgeul coitcheann a sgrìobhadh air an t-susbaint - adhbharan dealbhaidh, cùisean cleachdaidh, no tuairisgeul air toraidhean deuchainn luchd-cleachdaidh. Tha Markdown gu math furasta ionnsachadh - gu h-iomchaidh, bu chòir stiùireadh a bhith na ghoireas co-roinnte airson luchd-dealbhaidh agus luchd-leasachaidh. Tha Docz, Styleguidist, agus Storybook a’ tabhann dòigh air Markdown a mheasgachadh gu furasta le co-phàirtean.

Docz

An-dràsta, chan eil Docz ag obair ach le React, ach tha e gu gnìomhach ag obair air taic airson Preact, Vue, agus co-phàirtean lìn. Is e Docz am fear as ùire de na trì innealan, ach tha e air a bhith comasach air còrr air 14 rionnag a chruinneachadh air Github. Tha Docz a’ toirt a-steach dà phàirt - <Playground> и < Props >. Tha iad air an toirt a-steach agus air an cleachdadh ann am faidhlichean .mdx.

import { Playground, Props } from "docz";
import Button from "../src/Button";

## You can _write_ **markdown**
### You can import and use components

<Button>click</Button>

Faodaidh tu na pàirtean React agad fhèin a phasgadh le <Playground>gus analog a chruthachadh den CodePen no CodeSandbox togte - is e sin, chì thu do phàirt agus is urrainn dhut a dheasachadh.

<Playground>
  <Button>click</Button>
</Playground>

<Props> seallaidh e a h-uile seilbh a tha ri fhaighinn airson a’ phàirt React a chaidh a thoirt seachad, na luachan bunaiteach agus a bheil feum air an togalach.

<Props of={Button} />

Gu pearsanta, tha mi den bheachd gur e an dòigh-obrach seo stèidhichte air MDX an dòigh as fhasa a thuigsinn agus as fhasa obrachadh leis.

Stiùireadh beò - MDX agus frèaman eile

Ma tha thu dèidheil air gineadair làrach statach Gatsby, tha Docz a’ tabhann deagh aonachadh.

neach-iùil stoidhle

Mar a tha ann an Docz, tha eisimpleirean air an sgrìobhadh a’ cleachdadh co-chòrdadh Markdown. Bidh Styleguidist a’ cleachdadh blocaichean còd Markdown (cuithean trì-fhillte) ann am faidhlichean cunbhalach .md faidhlichean, chan ann ann am MDX.

```js
<Button onClick={() => console.log('clicked')>Push Me</Button>

Mar as trice bidh blocaichean còd ann am Markdown dìreach a’ sealltainn a’ chòd. Nuair a bhios tu a’ cleachdadh Styleguidist, bloc còd sam bith le tag cànain js, jsx no javascript bheir e seachad mar phàirt React. Coltach ri Docz, faodar an còd a dheasachadh - faodaidh tu togalaichean atharrachadh agus an toradh fhaicinn sa bhad.

Stiùireadh beò - MDX agus frèaman eile

Cruthaichidh Styleguidist duilleag seilbh gu fèin-ghluasadach bho dhearbhaidhean PropTypes, Flow or Typescript.

Stiùireadh beò - MDX agus frèaman eile

Tha Styleguidist a-nis a’ toirt taic do React agus Vue.

Leabhar-sgeulachd

Leabhar-sgeulachd ga nochdadh fhèin mar “àrainneachd leasachaidh co-phàirt UI”. An àite a bhith a’ sgrìobhadh eisimpleirean co-phàirteach taobh a-staigh faidhlichean Markdown no MDX, bidh thu a’ sgrìobhadh na sgeulachdan taobh a-staigh faidhlichean Javascript. История clàradh staid sònraichte na co-phàirt. Mar eisimpleir, dh’ fhaodadh gum biodh eachdraidh aig pàirt airson staid luchdachadh agus staid ciorramach (ciorramach).

storiesOf('Button', module)
  .add('disabled', () => (
    <Button disabled>lorem ipsum</Button>
  ))

Tha leabhar-sgeulachd tòrr nas iom-fhillte na Styleguidist agus Docz. Ach aig an aon àm, is e seo an roghainn as mòr-chòrdte, air Github tha còrr air 36 rionnag aig a ’phròiseact. Is e pròiseact le còd fosgailte a tha seo le 000 com-pàirtichean agus luchd-obrach còmhla riutha. Tha e air a chleachdadh le Airbnb, Algolia, Atlassian, Lyft agus Salesforce. Tha leabhar-sgeulachd a’ toirt taic do bharrachd fhrèaman na am farpais - React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte, agus HTML sìmplidh.

Ann am brath san àm ri teachd, bidh chips bho Docz agus MDX ga thoirt a-steach.

# Button

Some _notes_ about your button written with **markdown syntax**.

<Story name="disabled">
  <Button disabled>lorem ipsum</Button>
</Story>

Thèid na feartan ùra san Leabhar-sgeulachd a sgaoileadh mean air mhean thairis air na mìosan a tha romhainn, agus tha coltas ann gur e ceum mòr air adhart a bhios ann.

Builean

Tha buannachdan an leabharlainn pàtrain air am moladh ann am milleanan de artaigilean air Meadhanach. Nuair a thèid an dèanamh gu math, bidh iad ga dhèanamh nas fhasa toraidhean co-cheangailte a chruthachadh agus dearbh-aithne a chumail suas. Gu dearbh, cha chruthaich gin de na h-innealan sin siostam dealbhaidh gu draoidheil. Feumaidh seo dealbhadh faiceallach agus dealbhadh CSS. Ach nuair a thig an t-àm airson an siostam dealbhaidh a thoirt don chompanaidh gu lèir, tha Docz, Storybook agus Styleguidist nan deagh roghainnean.

Bho eadar-theangair. Is e seo a’ chiad eòlas agam air Habré. Ma lorgas tu mearachd sam bith, no ma tha molaidhean agad airson an artaigil a leasachadh - sgrìobh gu pearsanta.

Source: www.habr.com

Cuir beachd ann