Deploy Your React App with Netlify
Tags: code
Published: 2021-02-06 01:48:31

---
title: Deploy Your React App with Netlify
published: true
date: 2021-01-12 04:43:00 UTC
tags: Code
canonical_url: https://www.split.io/blog/react-netlify/
---

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](https://howtonode.org/how-to-install-nodejs).

You’ll also want to sign up for a [free developer account with Split](https://www.split.io/signup/) 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](https://help.split.io/hc/en-us/articles/360020523792-Create-a-split#:~:text=First%2C%20navigate%20to%20your%20splits,description%2C%20owners%2C%20and%20tags.).

Then, you will need to configure your Split (feature flag) and define the different treatments.

![](https://lh3.googleusercontent.com/OKaDRHKCHJij2XgGqheypDZvsNw6-Zxv1hY6rX0A425L5CGSL5G361yOi4LNuKPKF92uBcksE5-71Kra6vnzixAR_L-V2eGj9GsgSxcaV3oVbummVRXTN6mJJRm6LuPq4-1Akl9C)

The most important part here is the targeting rules, where you’ll define who will be targeted inside your feature flag. 

![](https://lh3.googleusercontent.com/Jdod6jMG7cPhIORDe_GvlQVrRxtfXxoiPAwFsn0AA56k9ja4UeMAsHZTL92I_sEAmrqBJLhSV0SKKGN1-vtT60C0aNSt4Lj8mrispF6UhjesFT12_JsnLe_4gI4qyRHzVaEzl433)

![](https://lh5.googleusercontent.com/juRU7EHZSk3sOQlovFiAqaWidjdQezx2RrzWZf0hihn1utlojlw_Vj0JDmMw7NfO8uv1wadTysRDrAeqel8fpl2x9AFtvSWFAtgJKR-TXpcmux1LLTONhlOodwTMzCiEsRMqRxu2)

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.

## 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!

`npm run build`

`npm install netlify-cli -g`

`netlify deploy`

Here is the full [repo](https://github.com/splitio-examples/react-netlify/tree/master) 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](https://www.split.io/blog/styled-components-react-app/)
- [The Benefits of Feature Flags in Software Development](https://www.split.io/blog/benefits-feature-flags-software-development/)
- [7 Ways Feature Flags Improve Software Development](https://www.split.io/blog/7-ways-feature-flags-improve-software-development/)
- [Testing Styled Components in Your React App](https://www.split.io/blog/styled-components-react-app/)
- [Set Up Feature Flags with React in 10 Minutes](https://www.split.io/blog/react-feature-flags-10-minutes/)

To stay up to date on all things testing in prod and feature flagging, follow us on Twitter [@splitsoftware](https://twitter.com/SplitSoftware), and [subscribe to our YouTube channel](https://www.youtube.com/channel/UCrkFMZZY8cjmZyKzOVV245Q/videos)!