Everything I use when I set up a new React app
If you are a React developer like me, then you are essentially spoiled for choice when it comes to frameworks, libraries, tools, etc. With React, it is even trickier compared to full-fledged opinionated frameworks like Angular. React calls itself a JavaScript library for building user interfaces (UI).
With a huge array of options, it is only natural to be confused about what technologies to use for your next React project. Today, I’ll share my favourite libraries and how they make my life so much easier!
Kickstarting a Project (The Base)
Photo from Next.js.
To kickstart a project, my favourite option is Next.js!
Next.js offers out-of-the-box server-side rendering, file system-based routing, built-in CSS/SCSS support, and so much more. You can literally be up and running in a few seconds with Next.js without having to worry about tooling.
Alternatives
The default way to bootstrap a React project will be to use the Create React App. However, trust me: Next.js is just so awesome and more developer-friendly. It allows you to focus on the code instead of the setup.
Another popular option is Gatsby, which is more SEO-centric. However, Gatsby is more focused on static site generation and I am not comfortable using it for a project that may quickly balloon into a large code base. I prefer Gatsby for projects such as a blog.
My suggestion is to go with Next.js for projects that may become bigger or even enterprise-grade in the future. Choose Gatsby if you want a more SEO-optimised, public-facing site like a blog or a static informational site.
CSS Framework
Photo from Bulma.
My favourite CSS framework is Bulma. It’s an open source framework based on Flexbox and has gained wide traction with over 200,000 developers using it.
One of the key reasons I use Bulma is that it’s just simple and beautiful. It comes with several UI components that are really well-designed with a focus on mobile responsiveness.
Alternatives
Speaking of CSS frameworks, we cannot overlook the ever-popular Bootstrap. It’s definitely an amazing framework, but truth be told, it has gotten a little boring. With many sites using Bootstrap, the styles and components seem monotonous. Nevertheless, Bootstrap is an awesome choice for those who are already familiar with it and it has a very trusted community of developers to rely on for support too.
Tailwind CSS is currently the talk of the town. Tailwind allows you to style everything without leaving your HTML code. There is a CSS class for everything — colors, sizes, fonts, shadows, etc. I am personally not a fan of too many CSS classes in my code. I like segregating and modularising my code based on component-level CSS. That being said, Tailwind CSS could be a great solution for developers who love the freedom offered by the framework.
Styling
Photo by the author.
My go-to option for styling is using Sass with CSS Modules. This is supported by default in Next.js, where we separate CSS/Sass files from our code and simply import it into the React file where it is required.
Sass is much more efficient than using pure CSS, as it helps developers to refactor their code and prevent repetitive styling. Developers can quickly extract, refactor, and reuse their code across the project.
Alternatives
One popular option is styled-components, which allows you to write CSS in JS. While this is easy to write, I hate the idea of combining styling inside my JS code. I prefer a separation of concerns and isolating styling from my JS code.
Navigation
If you use Next.js like me, then navigation is absolutely not a concern. With file system-based routing, the hierarchy of your directories becomes the actual file path and routes too!
If you are using React, then React Router is the best choice. It is solid, well-tested with few bugs, and straightforward to use. Oh, and it has 42.3K stars on GitHub!
Forms
Photo from React Hook Form.
Almost every web application needs a form. To add a form to my application, I use React Hook Form.
React Hook Form adopts React Hooks as the core of the library and is extremely simple and easy to use. In fact, there is a form builder you can use to build your forms and literally copy-paste the code into your React project.
Photo from Formspree.
If all you need is a static form (e.g. Contact Us), then Formspree might be your choice. It requires zero server code and is an excellent option for simple forms.
Alternatives
One popular option here is Formik. Formik is a powerhouse — it contains an amazing number of features and has a wide fanbase of developers with over 25.8K stars on GitHub! However, I feel that Formik can sometimes be overkill. When all you need is a simple, nice form with a few fields, React Hook Form has you covered.
Quick Back End
Photo from Firebase.
I know this article is about front-end React stacks. Nevertheless, I thought I would add this one in — especially for projects where you wish you had a quick back end to integrate. Firebase and Firestore are excellent options for this use case. I wouldn’t delve too much into this, as it is an entire topic of its own.
Alternatives
If you need a quick back end, then some other options are Google Sheets and Airtable! Both are as simple as an Excel sheet yet can become as powerful as a small database when required.
Final Thoughts
And there you go: Next.js, Bulma, Sass, CSS Modules, React Hook Form, Firebase, and Firestore. This is my typical React stack that fits almost any project I am working on.
Surprise
If you're looking for an all-encompassing codebase which can supercharge your next project, look no further! I created exactly what you need - Supercharge.dev!
Supercharge.dev combines all of the above and even more! With Google Analytics and ready-to-use dashboard with Firebase support, you get everything out-of-the-box!
Use the code DEV2021 to enjoy a 20% off the Supercharge bundle now!
Thanks for reading! Leave a comment below about your favourite libraries.
Happy hacking!
Top comments (2)
But nice article.. 👍👌
I love styled components and putting JS and styles together, because when your app grows its easy to clean it up, when you remove components..