React component na rin ang scheduler at ang data grid, sa @needless-ui/react: parehong feature, keyboard at accessibility gaya sa Angular, parehong stylesheet at parehong MIT license. Paparating na ang iba pang component. Kailangan nila ang React 19, at gumagana sila sa Next.js App Router at sa Vite.
Pag-install
pnpm add @needless-ui/react @needless-ui/cssI-import ang mga style
Walang kasamang style ang mga component. I-import nang isang beses ang stylesheet, mula sa isang CSS file ng app mo.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';Gumagana ang mga layer gaya sa Angular: nasa isang layer bago ang nui ang mga reset, at sa Tailwind CSS, nasa pagitan ng base ng Tailwind at ng mga utility nito ang nui, gaya ng ipinapakita sa pagsisimula.
Isang scheduler
May sariling entry point ang bawat component. Ipinapakita ng scheduler ang mga events na ipinapasa mo, at sinasabihan ka nito kapag may naglipat ng event o pumili ng oras para sa bago: ikaw ang nag-iingat ng mga event.
Isang data grid
Ilarawan ang columns sa labas ng component, para hindi ulitin ng grid ang trabaho nito sa bawat render. Tinatawag ng isang edit ang onRowsChange kasama ang mga bagong row, at nasa ref ng grid ang mga method gaya ng Excel export.
Ang API sa mga termino ng React
Sinusunod ng mga React component ang parehong mga spec ng mga Angular component, kaya magkatugma ang kanilang mga API, sa mga termino ng React. Nakalista sa mga API page ang bawat prop: ang sa scheduler at ang sa data grid.
| Angular | React |
|---|---|
Isang model, [(view)] | State: view kasama ang onViewChange, o defaultView para ang component ang mag-ingat nito |
Isang output, (eventClick) | Isang callback, onEventClick |
Isang template, <ng-template nuiSchedulerEvent> | Isang function na gumuguhit, renderEvent |
Isang method, scheduler.next() | Isang method sa ref, ref.current.next() |
children, para sa tree data | getChildren: sa React, para sa mga element ang children |
locale, bilang default ang LOCALE_ID ng app | locale, bilang default ang en-US |
Pag-render sa server
Nire-render sa server ang dalawang component, saka nagha-hydrate ang mga ito sa browser. Minamarkahan sila ng package bilang mga client component, kaya puwede silang i-render ng isang Server Component gamit ang mga prop na nase-serialize, at tumatakbo sa server ang mga helper gaya ng nuiSchedulerFromIcs. Hindi makakatawid sa browser ang mga callback: inilalagay ang component na tumatanggap ng mga ito sa sarili mong client component, gaya ng dalawa sa itaas.
Hinihintay ang browser para sa mga bagay na nakadepende sa nagbabasa: ang linya ng kasalukuyang oras sa scheduler, at kung anong araw ngayon. Bigyan ang scheduler ng defaultDate kapag isang server ang nagre-render nito, dahil baka iba ang “ngayon” ng server sa “ngayon” ng nagbabasa.