Kickstarting Your React Projects With Boilerplates

Robert Cooper
Feb 14, 2018 · 4 min read

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 or since they should all be found in your file. Just run the command once with or 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 :

Git Setup

Using a boilerplate allows you to ignore committing common files used in all your React projects by specifying them in a file. You can also include an and 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 or 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.

OSEDEA

Montreal based tech agency taking work-life harmony to a higher level.

Robert Cooper

Written by

Front-end Web Developer

OSEDEA

OSEDEA

Montreal based tech agency taking work-life harmony to a higher level.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade