React.JS and FrontEnd useful libraries

De la topicul acesta cred ca m-am dezvoltat destul de mult pe partea de frontend si mai ales pe partea de React (dar inca mai este foarte mult loc si de asta postez si aici ca poate invat ceva nou de la voi).

Base project setup
Ultimele mele proiecte incep cam asa:
Vite + React + TypeScript - https://vitejs.dev/
Redux ToolKit - pentru global state management - https://redux-toolkit.js.org/
RTK Query - pentru queries / mutations - RTK Query Overview | Redux Toolkit
Husky + ESLint + Prettier
React Router DOM
Storybook - for design system and docs - https://storybook.js.org/
Vitest for testing - https://vitest.dev/
React Spring (new docs :heart_eyes:) - https://beta.react-spring.dev/
@use-gesture/react :heart_eyes: - https://use-gesture.netlify.app/
zod - https://zod.dev/
Vanilla Extract Style :heart_eyes: - https://vanilla-extract.style/
React Konva - https://konvajs.org/

Mai cochetez si cu:
Three.js
R3F
Baylon.js

Voi ce tehnologii folositi ce articole folositoare aveti pentru partea de FrontEnd/React?

2 Likes

Aici folosesc SWR


Aici folosesc zustand

2 Likes

Formulare
Home | React Hook Form - Simple React forms validation (react-hook-form.com)
Query-uri si chestii asincron
React Query - Hooks for fetching, caching and updating asynchronous data in React (tanstack.com)
Tabel
React Table - Hooks for building lightweight, fast and extendable datagrids for React (tanstack.com)
Internationalizare
ivanhofer/typesafe-i18n: A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects. (github.com)
Drag and drop
atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React (github.com)
State management mai complex
pmndrs/zustand: :bear: Bear necessities for state management in React (github.com)
Testare
React Testing Library | Testing Library (testing-library.com)
API generation (React query din Swagger)
orval - Restful client generator
Validare pe FE
jquense/yup: Dead simple Object schema validation (github.com), dar cred ca voi folosi zod in viitor
Input mask:
sanniassin/react-input-mask: Input masking component for React. Made with attention to UX. (github.com)

2 Likes

Am avut nenorocul sa lucrez cu React Hook Form. E cu mult sub Formik din punct al developer-friendliness. Mi se pare ca are o gramada de boilerplate (aka Redux), iar in unele cazuri, cand ai de-a face cu anumite componente de Material mai complexe, precum ar fi Autocomplete, apar complicatii.

TLDR: I recommend Formik

2 Likes

Da, poate sa iasa o mamaliga cu watch abuzat de cei care nu citesc documentatia. La dropdown-uri e mai greu.

Legat de boilerplate cred ca te referi la control si options, validarea functioneaza foarte frumos combinat cu yup.

De fapt, da, formik e mult mai ok fiindca ai o componenta de form custom, in cazul meu pot sa am un div, un form normal sau altceva (in functie de cat de mult a citit si inteles omul documentatia) si te uiti unde incepe si se termina form-ul iar handlerul la onSubmit poate sa difere la butoane.

Eu am folosit react hook forms pentru forms dar nu prea sunt mare fan.
@isti37 mai bine dnd-kit sau @use-gesture pentru drag and drop

1 Like