In this tutorial, you will create a calculator app, add feature flags to it, and then deploy it to production with Netlify so you can see it in action. Let’s get started!
Prerequisites for Your Netlify + React App
First, let’s make sure you have Node installed. If not, follow these instructions.
Create Your React Application
For this example, we will create a simple calculator app with just the four basic functions and then deploy it with Netlify. Using Facebook’s boilerplate of create-react-app, you can create the entire React file structure and template quickly and easily. In the terminal, enter the following command to create the app called calculator:
Then, change the directory to the new app and start the development server. In most cases, this will be
localhost:3000, unless you have another app running there:
Next, it’s time to create the calculator’s two main components: the buttons and the result. In the results, you display the output from whatever functionality you click on from the buttons component. The results component will just be one paragraph tag that displays the content from the props.
Notice that each button in the Buttons Component calls
this.OnClick and passes e.target.name as an argument.
Now, in your
App.js file, you define the calculate function and onClick function.
this.Calculate will calculate the result of your function when you click the
= button. The onClick function changes the state depending on what button you click:
Next, you render the components:
Add Feature Flags to your React App
Next, let’s say you’re working on implementing the BACKSPACE functionality of the calculator. You may not want this available to your users yet, so you’re going to add a feature flag to make sure it’s not enabled yet.
Then, you will need to configure your Split (feature flag) and define the different treatments.
The most important part here is the targeting rules, where you’ll define who will be targeted inside your feature flag.
Then, install the following dependency in your root folder:
At the top of your component, import
withSplitFactory from Split.
SplitTreatments is a React Component that performs feature evaluation. The
withSplitFactory Higher Order Component is used to wrap the Calculator component when you export it:
Next, in your render function, use the
SplitTreatments component to perform a feature evaluation:
In the future, you could use this feature flag configuration to deploy all of your changes incrementally to users or all at once, without any code changes.
Deploy Your React App with Netlify
Once you have finished your React App and added all the styling and CSS, it’s time to deploy! You can deploy with Netlify with three easy commands:
Here is the full repo in GitHub.
Netlify + React + Feature Flags = Magic
Using Netlify and Split together allows you to release faster and catch bugs quicker. Although there are other deployment tools available, Netlify is most commonly used by front-end developers because of its speed and reliability. The magic of feature flags plus the quality of Netlify make them a perfect match!
Learn More About React and Feature Flags
For more information on using feature flags with React, their benefits, and more use cases, check out these posts:
- Add Styled Components to Your React App
- The Benefits of Feature Flags in Software Development
- 7 Ways Feature Flags Improve Software Development
- Testing Styled Components in Your React App
- Set Up Feature Flags with React in 10 Minutes