Kickstarting Your React Projects With Boilerplates

At Osedea, we create a bunch of web and mobile applications with React and start off each project from a boilerplate. This boilerplate is in its own repository that we’ve created and kept fine tuned as libraries update and our tools of choice change. Outlined in this article are some of the benefits of using a boilerplate for React projects and some of the things you might find in a typical boilerplate.

Quickly Get Started With a New Project

This may seem obvious, but having everything setup in a boilerplate will allow you to quickly get started building a React application. All you need to do is copy the boilerplate and start building out your React app!

Consistently Formatted Code

When working with multiple people on a project, it’s good practice for everyone to be formatting code consistently across files to make reading and writing code easier/faster. Having configuration files for ESLint, Prettier, and EditorConfig will make sure that everything from the indent size to the use of semicolons is consistent in all your project files. Make sure that all your team members have the appropriate plugins installed on their code editors to handle ESLint, Prettier, and EditorConfig files.

Familiar Folder Structure

Switching from one project to another requires a bit of adjustment. However, if you can keep the general folder structure consistent between one project to another, it will help you better navigate your project’s files since you will have a good idea of where to look for files.

Here is a sample folder structure you might see in a boilerplate:

├── __mocks__ // Jest mock data
├── __tests__ // Jest tests
├── app // React related files are found in this folder
    ├── assets
    ├── components
    ├── containers
    ├── services
    ├── styles
    ├── translations
    ├── types
    ├── views
├── cypress // End to end testing 
├── docs // Project documentation
    ├── functional
    ├── technical

Common Dependencies Available

In React, there are usually a good number of packages and libraries that you use on most of your projects. Using a boilerplate, you don’t have to worry about adding those packages individually using yarn or npm since they should all be found in your package.json file. Just run the install command once with yarn or npm and all your dependencies will be ready to be used in your project.

Here are some popular packages/libraries that are often used in React projects that can be useful to include in a boilerplate’s package.json:

• Axios (HTTP request library)
• Babel (JS compiler)
• React Router (Routing system for React)
• Immutable (Enforces data immutability)
• Lodash (Provides useful JS methods)
• Moment (Date formatting library)
• Redux (React state management)
• Reselect (Selector library for Redux)
• Sanitize.css (CSS base)
• Styled Components (CSS in JS library)

Git Setup

Using a boilerplate allows you to ignore committing common files used in all your React projects by specifying them in a .gitignore file. You can also include an ISSUE_TEMPLATE and PULL_REQUEST_TEMPLATE file in your root directory to have consistently formatted Github issues and pull requests. This is very useful to remind people to include the relevant information in both Github issues and pull requests. For example, you can remind users to make sure all tests are passed when making a pull request for a new feature.

You can also use a tool such as husky to put in place git hooks that will run on git events (e.g. commits, pulls, pushes). Hooks can be used to run tests before pushing your code to ensure you aren’t trying to add bad code to your dev or master branches.

Setup Webpack Once

Webpack or another type of bundler is almost necessary for any moderately complex React application. However, Webpack can be difficult/painful to setup correctly. Configuring Webpack once in a boilerplate can be a huge time saver so you don’t have to worry about setting it up for each new project.

If you think that a React boilerplate could be of use to you, you can go and check out the React documentation which contains numerous resources for other boilerplates and starter kits you can use to get started.

If you want to take advantage of boilerplates with React Native, you can take advantage of Ignite CLI to quickly get setup with a new React Native app. Ignite CLI has a list of boilerplates you can pick from, or you can create your own custom boilerplate to incorporate some of the things mentioned in this article.

Moving Beyond Boilerplates

Using boilerplates for your projects has many benefits, but there is also one major drawback: your config/tools are not kept up to date. If you want to add a project dependency to all your projects or update a configuration file on all of your projects, you cannot do this easily when using a boilerplate.

There is a movement towards using toolkits when building new projects. Toolkits solve the major issue with boilerplates and there are a few options available, such as Create React App and nwb. For more of a discussion on toolkits, take a look at this article written by Kent C. Dodds and listen to this talk by Dan Abramov.