My Favourite React Stack
From setting up a new project to state management and more, this is what I use
If you’re familiar to the React landscape, you might know how challenging it can be to figure out which libraries to use. Since React isn’t a full-fledged JS framework like Angular, we need additional libraries to build large projects. However, this is no easy task because in each category there are multiple options to choose from.
In this piece, I’ll explain my favourite libraries to use in combination with React. This is my perspective and, of course, subjective. Feel free to leave any comments if you have a different perspective about certain parts.
Bootstrapping a New Project
For easily getting started, I like to use a tool that bootstraps a new project. This way I don’t have to deal with any build tooling, and it just works.
Basically, I always go for either one of these options:
A few months ago, I’d have chosen Create React App for building dynamic React apps. However, NextJS has quickly caught on and seems to be an overall better choice, in my opinion. It supports both static and server-side pages (hybrid) and focuses more on performance in general.
Gatsby is the framework I prefer to go for when building a full public-facing site. I like the focus on SEO and performance out of the box, as well as the great ecosystem. There are quite a few plugins available for easily integrating functionality like analytics, a CMS, and lazy loading images.
So in general: If it’s a public-facing site, I prefer Gatsby. If I’m building a dynamic (large) React application, I would use NextJS.
If the application is large enough, I like to complement my application with a state-management framework. As far as I can see, there are two main libraries to use:
A year ago, I’d have always preferred MobX because of the massive boilerplate Redux brought to the table. This, however, changed recently since the creators behind Redux introduced Redux Toolkit. This makes sure boilerplate is kept at a minimum while still enjoying the structure this library brings.
Since this adjustment, the choice is a bit harder. From where I stand, Redux is more suitable for larger projects where more structure is necessary and where the dev tools can become a great asset. MobX is my favourite choice when the project is rather small- or medium-sized.
MobX is best used with Mobx-react-lite. The hooks approach plays better with functional components.
For styling in React, there are quite a few good options to choose from, such as SASS, CSS modules, and CSS in JS. My preference goes to a CSS-in-JS approach using styled components. There are pros and cons to all options, but I like how it functions. Placing the styles close to the component definitions to minimise context switching is a major plus.
A downside to styled components is the amount of boilerplate theming required. Below is an example:
That’s one of the reasons why I like to use xstyled in combination with styled components. This makes sure we can translate the previous snippet to:
All those magic numbers? They are converted to theme values.
margin: 0 3; can turn into margin 0px 16px, for example.
React is by default shipped without router. Which means we need to choose a library for this as well. My preference goes to the most popular one: React Router. It has over 38k stars on GitHub and is quite simple to use.
There’s more at this link if you want to know about the accessibility features of the Reach router.
For adding forms to my applications, I’m mostly deciding between these two libraries:
- React Hook Form
The most popular of the two is Formik — with about 20k stars on GitHub. However, this one can be quite daunting to use. it can be described as an extensive toolbox for forms. I like to use it when building a large application containing a lot of different forms.
My personal favourite is React Hook Form. It fully embraces the new React hook system and is easy to set up and work with. For most forms, this will do just fine. However, when having to write complex forms, it can be an option to also look at Formik.
Hopefully, my favourite React stack can be a starting point when you’re deciding to build a new project.
This is by no means the perfect stack, but it’s worked for me when building various types of applications.
Thanks for reading.