Here are some of the tools I tend to use in most React apps.
- Tailwind – for side or throw-away projects. Yet to use in a big app.
- React-bootstrap – to use a solid grid system and ship professional looking UIs fast.
- Material UI – Looking to experiment with.
- classnames – to conditionally join classes together. Invaluable.
- Sentry – to catch and report errors in non-development environments. Invaluable tool.
Forms & form widgets
- Formik & Yup – to make forms easier. Used on almost every project.
- React select – awesome component that does almost anything you want when it comes to select controls.
- Reach UI Slider – for a solid slider input that’s accessible and easy to customize.
- cleave.js – to format inputs in various formats like currencies or date masks.
- react-datepicker – to get a solid datepicker.
- Next.js – for server-rendered React apps.
Hooks / utilities
- Lodash – to help do common tasks like manipulate objects, arrays, strings, etc.
- alibaba/hooks – “A high-quality & reliable React Hooks library”
- date-fns – to parse, format, and manipulate dates.
react-use– to help do common things in React properly (run a
useEffectonce, set up an event listener, sync state with localStorage, etc).
faker– to generate random data for all sorts of things (e.g., create a fill form button for development)
- Create React App – for small / throwaway projects or SPAs.
- To help create a design system or make it easier to create reusable components
- Because it’s sometimes quicker to build a component in isolation than set up the context within the app.
- chartjs – for charts.
- React Router – for client-side routing.
State management / data synchronization
- React Query / Tanstack Query – to make managing data synchronization between client and server so much easier 🚀. Indispensable. I cannot imagine React apps without it now.
- Axios – to make HTTP requests.
- Redux Toolkit – for complex states where a lot is going on and I need a predictable state container and the awesome Redux DevTools. Plain old React context is too much work for complex states.
- Jest – for unit / non-visual tests.
- React Testing Library – for component testing.
- Cypress – for integration testing.
- TypeScript – to avoid so many classes of bugs and make coding more enjoyable ❤️.
- ESLint – to catch bugs and help conform to best practices. Especially useful when used with
eslint-plugin-reactto help deal with the pesky dependencies array of
useEffectand similar hooks 😖.
- Prettier. To help me focus on more important things than formatting.
- CodeSandbox – to try out new ideas.