React toolbox

Here are some of the tools I tend to use in most React apps.

CSS frameworks

• 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.

CSS utilities

• classnames – to conditionally join classes together. Invaluable.

Error reporting

• Sentry – to catch and report errors in non-development environments. Invaluable tool.

ESlint plugins

• @tanstack/eslint-plugin-query

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.

Frameworks

• 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 useEffect once, 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)

Misc

• Create React App – for small / throwaway projects or SPAs.
• Storybook
  • 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.

Routing

• 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.

Testing

• Jest – for unit / non-visual tests.
• React Testing Library – for component testing.
• Cypress – for integration testing.

Tooling

• 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-react to help deal with the pesky dependencies array of useEffect and similar hooks 😖.
• Prettier. To help me focus on more important things than formatting.
• CodeSandbox – to try out new ideas.