Should I use a boilerplate for React?
There are many starter boilerplates to choose from to get started with React. Some popular ones (over 10k stars on GitHub) are React Redux Universal Hot Example and react-boilerplate.
You might ask yourself if you should use these boilerplate starters or not.
The short answer is no.
Let me explain.
Higher maintenance cost
The boilerplate seems good at first sight. The code has high quality and follows best practices. It works as intended and has an informative Readme file.
Also, the boilerplates very often contain everything your project needs and might need in the future. This seems as an advantage. You get a lot for free, right?
The long list of features is actually the main problem with boilerplates.
You have to maintain every line of code that exists in your project for the whole lifetime of the project (or until you delete the line of code). A reminder what maintaining code means:
- Fixing bugs
- Doing refactorings to make the code base able to grow
- Upgrade dependencies
- If a dependency gets deprecated, you might need to do a major refactoring
Maintaining code is a big cost in a software project. When using a boilerplate you get more code than necessary to maintain.
Even though the boilerplate often is mature and high-quality code it will always be bugs in there that you need to fix. Or you need to manually merge in the bug fixes, refactorings and dependency upgrades from the original repository.
Higher complexity than necessary
But if you are new to React and just want to get started then you don’t care about maintaining code right now. Should you use a boilerplate then?
The answer is still no.
The React ecosystem is complex. Most of the starter boilerplates much of that complexity into them by including many technologies related to React.
This is a bad starting point for learning. It becomes an overwhelming experience trying to figure out how things work in the boilerplate and trying to figure out where to put your code.
In my opinion, the best way to learn is to code from scratch. There is a simplicity in coding from scratch that is very good for learning. You start small and keep adding. Then you stay in control and you minimize the possibility to get overwhelmed.
So what should I do instead?
You have two options. Either you set up a project yourself from scratch or you use a tool called Create React App.
Set it up yourself from scratch
If you are learning React to become a professional developer I advise you to learn how to set up a project from scratch using webpack and Babel. I have written a detailed post on the subject that you can use as a starting point.
It takes an hour or two. The experience of setting up a project from scratch is valuable for building more complex applications.
Use Create React App
If you want to get started coding React as quickly as possible I advise you to use Create React App. Create React App is a command line tool which creates a starter project for you.
Even though it is a starter project it is not a boilerplate. The differences from boilerplates are:
- It hides away all the build process config and you can keep it updated without major issues.
- Also, it has a minimum of features and dependencies. It basically just gives you a React component with some simple CSS and you are on your own from there.
- It doesn’t take a stance on how you should write your code.
There are other similar tools such as next.js that also could be a good choice.
Follow me on Twitter to get real-time updates with tips, insights, and things I build in the frontend ecosystem.