Image for post
Image for post

Kickstarting Your React Projects With Boilerplates

Robert Cooper
Feb 14, 2018 · 4 min read

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.

├── __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.

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.

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.

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.

Osedea

We’re on a mission to build a more efficient and enjoyable world

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store