Deploying A React App With Netlify

Creating the App

We will begin by creating our React application by running the command npx create-react-app your-app-name. This will create the framework of our application. You will receive the following messages:

yarn start or npm start will both work
Boiler plate React app

Building Our Color Changer

We can build this app entirely inside the src/App.js file. After clearing out the current contents of App.js, let’s create a function called “changeColor” and inside it three variables, “red”, “green”, and “blue” to represent the rgb values of a color. The JavaScript Math.floor() function will round down a Math.random() function multiplied by 256, which will give us a maximum value of 255 and a minimum value of 0. We will then create the random color with a fourth variable, “newColor”, that uses backticks to concatenate the random numbers into an rgb value.

This is the function body
This is the return statement with added inline CSS
A simple but effective app

Deploying To Netlify

Now for the reason you’re here, how to get this app online!

--

--

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
Aidan McBride

Aidan McBride

I ‘m a Web Developer and a Flatiron coding bootcamp alumni. I currently work in the financial tech industry as a Front End Engineer