How to Speed up Development on React Projects

When multiple developers are working on multiple projects using React, creating a React boilerplate can speed up development and allow for greater collaboration within and among teams.

What Is React?

React.js is a JavaScript library for building user interfaces. It is based on reusable components and built to efficiently render data. Since its inception, React has become one of the most popular tools in front-end software development.

>> Love working with React.js? Check out our job posting for a senior software engineer well-versed in React.js and learn what’s great about being a developer at Praxent.

What Is Boilerplate Text (for Software)?

Boilerplate is a section of code that doesn’t change and can be re-used anywhere. Instead of re-writing the same code for every new project, developers use boilerplate to avoid risk of error and save time.

Why We Created a React Boilerplate (Say Goodbye to 2-Week Long Initial Sprints! 3 Days Is the New Norm)

Ryan Ostrom and I created a boilerplate that any developer within our organization can access for their React project. The boilerplate allows developers to:

• Cut down on the amount of time it would usually take to create a build process at the beginning of a project. What is usually a 2-week sprint at the beginning of each project is now a 3-day process, at the most.
• Understand exactly what to test for and how to write each test. Even inexperienced developers can now write tests without pulling in extra help. The boilerplate documentation automatically includes Jest in the test script, along with examples for each type of test and a holder structure.

About Our React Boilerplate

The boilerplate presents developers with a local, live development server, a production development build script and pre-arranged folder structures. Instead of creating a new build process from scratch, developers starting a new React project need only make a few customizations before they’re ready to go:

1. Customize some of the parameters to suit the project
2. Add the boilerplate to source control
3. Hook up the CI/CD pipeline for continuous integration and deployment

Because this is an opinionated boilerplate, any new developers added to the project or senior developers checking in to review code will be able to quickly understand how the project is laid out.

The boilerplate includes built-in structure for implementing automated testing, plus the benefit of built-in automatic code splitting. (Code splitting allows developers to access only the JavaScript they need at any given moment, rather than pulling chunks of related JavaScript which they must manually sift and separate.)

The application consists of the following technology stack:

React.js

JavaScript library to build the interface

Redux

Library to manage the global state of React application

Immutable JS

Immutable collections for JavaScript (functions aren’t supposed to produce side effects, immutable JS enforces that all the time)

Webpack

Module bundler used to bundle JS and SCSS files

Create-React-App

Created with the React boilerplate called create-react-app, and ejected to make configurations

Clients Love This Boilerplate, Too

Our clients benefit enormously from the time-saving components of our new React boilerplate. Not only does this innovative technology save time, reducing spend, it strengthens quality and security.

• Best practices for all new web apps are baked in to this boilerplate.
• Because best practices are built-in, developers experience few to no coding errors, which means faster coding.
• Predictability skyrockets on projects using this boilerplate because we know ahead of time what values are inputted and outputted.
• Predictability also re-enforces data integrity for greater security.

We like to remind our clients that consistent patterns enforce best practices. That’s why we emphasize automated testing and coding standards on every project. Our new React boilerplate guarantees high standards. Good for clients. Good for developers. Win-win!

>> Check out our automated testing checklist for a list of testing and deployment standards your software partner should follow.