There are many starter boilerplates to choose from when you want to learn React. Here’s an overview of the most common ones and why you might need them to streamline the process of setting up your web application.
You can make a boilerplate from scratch or use one provided by the community. But if it’s your first time, you’ll probably use create-react-app (CRA), a package that allows you to easily create a project based on React.js. With it, you can learn the basics because it has a minimum number of features and dependencies.
Boilerplate refers to blocks of code that you can reuse for various projects. A boilerplate works like a template you can use with little or no alteration.
If you decide to use create-react-app, you’ll get a project with many configuration options, such as Babel (a transpiler tool for JavaScript) and Webpack (used to compile JavaScript modules). That’s what you’ll need at the very start of your React journey. If you’d like to use more modules or libraries, you can add whatever you want on demand.
To start working with the CRA and set up a web app by running one command, you’ll need to have Node >= 8.10 and npm >= 5.6 on your machine.
What is a React boilerplate?
If you have some experience with React, it may be better to use another starter kit that consists of several libraries so that you can develop a complex project. One of the most popular is react-boilerplate, a highly scalable and production-ready boilerplate providing a virtual development environment so that you can jump right into development.
Here’s what you get when choosing react-boilerplate:
- Redux: a standalone library used for managing application state
- Redux-Saga: a redux middleware library that aims to make application side effects, such as asynchronous flows
- Jest: a framework for testing JavaScript
- React Router: a routing library for React used for client-side routing
- ESLint: a tool that automatically analyses your code to quickly find and fix problems. You can simply adjust the eslintrc.js configuration and write your own rules to make ESLint better suit your project
- Modern JavaScript syntax: introduces a number of useful features, such as arrow functions and object destruction
- Folder structure: the starter pack introduces a good approach to structure React projects
Advantages of using react-boilerplate
One of the biggest advantages of the react-boilerplate pack is the huge community behind it. You can always find help when you encounter a problem. Another thing you can benefit from is creating a multi-language app in no time by using the react-intl package.
So, are there any drawbacks?
The thing is that developers take a different approach to such starter kits, especially when you’re starting your React journey. One of the main problems is the list of features that come with boilerplates—you usually get more code and higher complexity than necessary.
For instance, react-boilerplate uses redux, together with redux-saga middleware, for asynchronous actions. However, it’s better (and easier) to use the redux-thunk, especially for simple and trivial tasks. Plus, redux-saga uses generator functions, so writing tests can be quite complicated and non-intuitive.
I don’t think that react-boilerplate is an unuseful solution, but it will provide greater value to developers who are aware of its libraries and understand how they work. If you’re not familiar with the technology, trying to figure out how things work can be an overwhelming experience.
As you can see, this doesn’t sound like the perfect starting point for learning. If you’re completely new to React, it’s better to start with the create-react-app pack.
Decide what suits you best
When you decide to use boilerplates, you’ll be completely ready to start writing React and build your app. They usually contain everything your project needs. Some of them are more complex than others, but no matter your choice, you’ll always end up saving a lot of time.
What do you think? Are boilerplates useful, or it’s better to write code from scratch?
