Split Blog for Split Software

Posted on Feb 6, 2021 • Originally published at split.io on Jan 12, 2021

Deploy Your React App with Netlify

#code

If you’re a JavaScript developer, chances are you’ve created a React App before – but once you finish, how do you get it out into the world? If you ask me, the answer is Netlify. Netlify is a tool used by developers to deploy and host their applications and websites. It is one of the most common and trusted tools that front-end developers because of its ease of use.

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.

You’ll also want to sign up for a free developer account with Split if you haven’t already. Later on, you’ll incorporate our JavaScript SDK with your app.

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.

npx create-react-app 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.

cd calculator

npm start

You should see the standard React app template when you go to localhost:3000.

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.

<button name="1" onClick={e => this.props.onClick(e.target.name)}>1</button>

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.


`Calculate = () => {
           this.setState({
               result: (eval(this.state.result) || "" ) + ""
           })
       };

onClick = button => {

       if(button === "="){
           this.calculate()
       }

       else {
           this.setState({
               result: this.state.result + button
           })
       }
   };
`
<small id="shcb-language-1"><span>Code language:</span> <span>JavaScript</span> <span>(</span><span>javascript</span><span>)</span></small>

Next, you render the components.


`render() {
       return (
           <div>
               <div className="calculator-body">
                   <ResultComponent result={this.state.result}/>
                   <ButtonsComponent onClick={this.onClick}/>
               </div>
           </div>
       );
   }`
<small id="shcb-language-2"><span>Code language:</span> <span>JavaScript</span> <span>(</span><span>javascript</span><span>)</span></small>

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.

First, create the split and treatment in Split.

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:

npm install --save @splitsoftware/splitio-react@1.1.0

At the top of your component, import SplitTreatments and 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.

import { SplitTreatments, withSplitFactory } from "@splitsoftware/splitio-react"

Next, in your render function, use the SplitTreatments component to perform a feature evaluation.

<SplitTreatments names={['name_of_feature_flag']} >

{({ treatments }) => {

return this.renderContent(treatments['name_of_feature_flag'])

}}

</SplitTreatments>

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.