Creating a Simple React App for Beginners Like Me

Hello everyone! I have been working with React for about 3 weeks now as part of my journey through the Flatiron School’s Immersive Software Engineering program in Denver, and I would like to share with you a little of what I have learned, while demonstrating a simple React app, from start to finish.

React is a front end library that has reusable components which come in handy when you need to make more than one part of your app maybe have the same layout and logic. A good example might be a card game, all of the stats and information that shows on each card would be unique, but the card itself, the layout and the logic that dynamically grabs that unique information that card together is the same for every card.

For this demonstration we’ll make a very simple app that displays puppies as cards. On the cards we’ll display information about each individual puppy. And lastly we’ll create a feature that allows us to add puppies to a favorites list when clicked on.

Opening Steps

Lets start by creating a clean slate React app using this command in your terminal in whatever directory you want this app to live in:

When it’s finished creating the initial app, we should see something like this:

Let’s take their suggestion and change our directory to “puppy-picker”, followed by:

This will be shown in your terminal when it finishes:

You should see this page in your browser:

We’ll need to open this app in our editor (mine is VS Code) and go to “App.js”:

This is a good time to explain part of why React is a “one page app”. Our “App” file is going to hold all of the other components we want to render, serving as our “one page”. Right now, it’s a functional component that has some boilerplate HTML-looking code inside of the return, but this is actually JSX! Let’s clear this initial JSX, and change our component from a “stateless” (function) component, to a “stateful” (class) component to complete our initial set up:

Create the Puppy Container Component

Let’s create the container that will hold our puppy cards, starting by creating a new directory “components” in the “src” directory of our project:

Then lets make our new “PuppyContainer” component a stateless one like this:

Going back to our “App” component, we need to do a few things; including import our new “PuppyContainer” component, make a fetch call to a Rails API I made for this demonstration, create state, set the state of “puppies” to the array of objects we get back from our fetch call, and finally, pass our newly updated state as props down to our “PuppyContainer” component:

On line 15 we are able to set the state of “puppies” to “puppies” by saying { puppies } instead of {puppies: puppies} because the words match

Create the PuppyCard Component

Let’s go ahead and make another component we know we’ll need for our hierarchy stemming from “PuppyContainer”, “PuppyCard”:

Then let’s make it another functional/stateless component:

Going back to our parent component “PuppyContainer”, we need to import our new “PuppyCard” component, and map through our “puppies” array that was passed as props from “App” to return a “PuppyCard” for each puppy in the array (we are passing each “puppy” object as a prop to PuppyCard also). Then we call the “makePuppyCards” constant inside curly braces in our JSX:

Here’s a sample of the API I am fetching from as reference for the following step:

Let’s shape the JSX in our “PuppyCard” component to display the information we just passed it as a prop above on line 7 in “PuppyContainer”:

At this point, if we look in our browser, we should see:

Let’s add some quick styling to our “App.css” file to make these “PuppyCards” smaller and more card-like (delete all the boilerplate CSS in here first):

And wrapping up this step, we should now see in the browser:

Adding Favorites Component and Functionality

Now that we have made our cards, styled and rendered them, let’s add our “Favorites” component, and include some logic that adds that card to our favorites when clicked; starting with this command in our components directory:

In that file, lets make it a stateless component that we can pass props to — from “App”, where we will add some state called “favorites”:

Add state of “favorites” in “App.js”

Lines 6–8 are almost exactly the same as the code we used in “PuppyContainer”

We have a state of “favorites” but no way to update it, so we need to create a function in “App” that we can pass as a prop down to each card. We will also import “Favorites” into “App”, put it in our JSX above our “PuppyContainer”, and pass “Favorites” the state of “favorites”:

We will now prop drill “addPuppyToFavorites” function to “PuppyContainer”:

Then we continue prop drilling down to “PuppyCard”, and add an event listener “onClick” to the outermost JSX element, in this case it’s a <div> tag. Inside the “onClick” we will call “handleClick”, a function we’ll create in order to call our “addPuppyToFavorites” function from “App”:

We’ll add some initial CSS to the “Favorites” component in “App.css”:

Now, if you were to click on “Lily” and then “Bronx”, they would both be added to your favorites above, like so:

And that’s it! If you coded along using your own API, you just created a simple React App that used multiple components, state and props, did prop drilling, and used event listeners to change state in a higher level component. Hopefully this demonstrated for you how React components are reusable, and that is helpful for us as developers. In this case, we used “PuppyCard” in “PuppyContainer” and reused it in “Favorites”. Thanks for reading, and may it help start your React journey with a bang!

My GitHub: https://github.com/tfunk2

Puppy images and descriptions came from: https://www.akc.org/expert-advice/lifestyle/cute-puppies/