Our great sponsors
-
react-query
Discontinued 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. [Moved to: https://github.com/TanStack/query]
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Recoil
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
-
-
I favor Hooks and function components over class components. Hooks let me concisely encapsulate stateful logic. The ecosystem has moved towards them too. For example, the excellent react-query library uses a hook interface.
TailwindCSS has gained popularity and looks great. But I don’t have enough experience with it yet to consider switching my default away from Bootstrap.
I like TypeStyle for component-scoped styling. With TypeStyle, I can use the full power of a programming language (TypeScript) to build up my styles and share them among components. And I can nicely co-locate the styles in the same file as my components.
If I do need shared client state, Redux works fine, but I have started to prefer Recoil. With Recoil, you don’t have to write reducers and actions. You can treat Recoil atoms like a shared useState. That reduces the code volume and ceremony needed to manage shared state. So my first choice is Recoil. It's pretty new though, so for more conservative projects, I choose Redux.
For unit tests, Jest is the way to go. It’s snapshot test feature is particularly useful, for both frontend and backend unit testing. And it has useful presets from the community, for example jest-dynalite for DynamoDB testing.
I default to react-bootstrap. This gives me a fine suite of buttons, form inputs, modals, etc. that give attention to aria attributes and use Bootstrap styles.
I configure a git commit hook with Husky runs the linter and runs the test suite. That way I can’t commit code that doesn’t pass those checks. This is particularly useful when working on a team.
For unit tests, Jest is the way to go. It’s snapshot test feature is particularly useful, for both frontend and backend unit testing. And it has useful presets from the community, for example jest-dynalite for DynamoDB testing.
I default to Bootstrap. Bootstrap has served me well through years of usage. It's a mature library, allows customization, takes accessibility into account, and has corresponding component libraries like react-bootstrap.
For forms, I default to react-final-form. React-final-form comes from the creator of the redux-form library, Erik Rasmussen. He has taken lessons learned from redux-form and applied them to final-form.
Instead of setting up Webpack, TypeScript, and so on from scratch, I use create-react-app (CRA). You’d have to have an extremely unusual use-case to set up Webpack config from scratch. (Almost) nobody should do that anymore.