This video is available to students only

Building the Furry Friend Gallery

This code-along lesson walks through using Create React App to build a fully-functioning picture gallery, the Furry Friend Gallery.

Building the Furry Friend Gallery#

Introduction#

As we saw in the quick demo of the Furry Friend Gallery, we’re going to build an app that talks to our familiar Dog CEO API, loads in a few starter pictures before turning control over to the user, allowing them to choose several images they’d like to fetch.

We’re going to start by creating a new React project using Create React App.

Create React App (CRA) starter project#

Up until this point, we’ve been using Parcel JS to set up and configure our React apps. It makes sense for smaller projects or apps and there’s certainly no problem with continuing to choose Parcel for more complex needs.

However, out in the realms of real world commercial environments, you’ll often come across React projects with a lot more complexity around their configuration; from employing some static code analysis using a tool like ESLint or Babel JS to allow us to use the latest JavaScript features cross-browser, and code bundling and optimization with help from Webpack.

Create React App is an official React starter project, developed and maintained by the Facebook Open Source team and it offers all of the above (and more) in one, convenient package with just one dependency.

CRA advantages#

Behind the scenes, the Create React App maintains an up-to-date and working configuration that employs modern coding best practices for setting up and working with a React project. It abstracts all of the complex setup required for Webpack to bundle your project’s files, as well as giving us a list of great code linting rules to ensure we’re adhering to generally accepted ‘good code’ standards.

What’s more, it can be used to spin up a new project and get coding in under five minutes from just a single terminal command.

CRA disadvantages#

The biggest drawback to using Create React App is also one of its biggest advantages: the abstraction.

Many developers and projects demand more flexibility and control from their configuration. By using Create React App, you’re effectively handing over control of these parts of your app to the React team and their own development opinions.

It’s not a bad thing, per se, and there are workarounds to add in your own configurations without using the built in ‘eject’ command (CRA offers this as a last resort, should you wish to unbundle all the configurations and remove the dependency on the CRA itself), but they’re not always ideal.

For more information about this and a great guide on how to set up your own React project without Create React App, there is a great article on Dev.to from Nikhil Kumaran you can take a look at.

With that out of the way, let’s get started with our new gallery app by navigating to your main code projects folder on your machine in the terminal.

From here, we’re going to use the following command to create a brand new React project using the Create React App starter.

You’ll see your terminal or command window going to town and pulling in all the resources it needs to create a new project.

When it’s done, you’ll have a success message in the terminal window featuring a list of commands.

CRA terminal

Testing the new project#

Before we do anything else, it’s a good idea to jump straight into the new project, launch it, and make sure it’s all working.

So, follow the advice in your terminal output and enter the following commands:

After a brief couple of moments, you should see a webpage open up with a spinning React logo and a simple message:

App start

Phew, everything’s looking great and our new project’s almost ready to go!

Cleaning up the default files#

Create React App does load in a few bare-bones files and styles to give you a jumping-off point. However, we’ll need to make a few changes to get everything cleaned up and ready for our new gallery app.

First, open index.js, located in /furry-friend-gallery/src/ and remove the following line:

import ‘./index.css'

It should be on line 3 of the index.js file. This will just remove a link to the default styles from the project that we won’t need.

After that, locate /src/index.css and delete the file.

Next, find the /src/App.css file and open it up. Highlight all the contents and delete the existing styles. Save and close the file.

Finally, open the main App.js file located at /src/App.js. This currently contains a lot of starter JSX which we’re going to replace, as well as a link to a logo file that we’ll want to remove.

First, locate the following line (around line 2) that imports a logo.svg file, and remove it:

import logo from ‘./logo.svg'

Now, select everything in the return statement (everything between return ( and ) and replace it with the following so that the new return statement looks like this:

Our project still contains a few default files, components, and assets that are loaded in by default, but we’re not going to worry about them for now as they’re not doing any harm just sitting there and they’re not currently being loaded anyway.

Bulma CSS framework#

CSS frameworks, much like JavaScript frameworks and libraries such as React itself, allow you to employ some well-used and well-tested conventions to help you build user interfaces more quickly.

CSS frameworks specifically, give you access to a design system of sorts, providing many individual elements, like buttons and heroes, that often combine into larger components, each maintaining the correct look and feel. They also offer some sort of layout systems, such as grids or column-based layouts.

We’ll be using one frequently throughout this course, the Bulma CSS framework. I really like Bulma because it’s quite lightweight, simple to implement, and is based on modern CSS using Flexbox for much of its layout options.

It can be loaded via an npm package or simply dropped into an HTML file as an external stylesheet resource (which we’ll be doing here) and there is even a React-based component library that you can add to your project.

I’d recommend taking a look at the Bulma docs to familiarize yourself with the elements and components on offer, but for now, we’ll be adding to our app and using the CSS classes that it gives us to build our components.

Creating our Furry Friends files#

Our project is going to consist of just three files:

  1. App.js — this is where the main action takes place

  2. DogCardInfo.jsx — a reusable list item component that will display each picture

  3. App.css - we’ll need to add a couple of styles in here to tweak the look and feel of our gallery list items

We’ll also need to make a single line change in our index.html file that loads the Bulma CSS framework for us.

Let’s start there.

Editing index.html#

Navigate to /public/index.html and open the file. This is the main starting template HTML file that the project uses to render the initial output of the app. It’s well commented and you can easily see what does what.

In order to load in Bulma so we can take advantage of the styles, add the following line somewhere between the opening and closing <head></head> tags:

You can also edit the title of the page between the <title></title> tags too if you wish.

Creating DogInfoCard.jsx#

DogInfoCard will be what’s known as a presentational component. That is, it deals with the presentational aspects but usually no logic (or very little). A presentational component will accept one or more values as props or direct arguments and simply return a block of JSX to render out.

Create a new file in the /src directory called DogInfoCard.jsx and drop in the following contents:

You’ll see that we’re using the destructuring syntax again to break the imgUrl and breed values out from the props object supplied to this component.

The markup here is based on Bulma’s card component. The subtle difference here is that we’ve employed a little image display trick on the figure element.

Because the dog images are returned from the API in different sizes and aspect ratios, we can’t just drop them directly in using an <img /> tag. Or rather, we could but they’d look wonky and misshapen.

What we’re doing here is applying the image to the figure element as a background which (via some styling we’ll take care of next) allows us more control of how things look when the images are weird sizes and shapes.

However, in order to keep things nice and semantic and look after those users working with screen-readers, we’ll still use an <img /> tag with the correct src and alt attributes, but we’ll apply a handy helper class, ‘is-sr-only’ which means the image won’t be visible on screen.

We’re rendering the breed name into the ‘card-content’ div as a nice addition so that people can see what breed they’re looking at.

Editing App.css#

Now that we’ve got our list item display component ready, we’ll add a scant handful of styles into the /src/App.css file, which is loaded in at the top of our App.js file.

Nothing complicated here, but we’re adding a height to the main image container from the DogCardInfo.jsx component, otherwise it would collapse because its child, the image element, is hidden.

We’re also applying some background styles to the child figure element so that the background is sized properly and doesn’t repeat.

Editing App.js#

Let’s start by importing what we need. In our case the React defaults, our DogCardInfo component and our main styles, App.css.

The loadDogPictures() function#

Next, outside of the main App component, we’ll define a new asynchronous function, loadDogPictures(), which will do exactly that, load a set of pictures from the API.

 

This page is a preview of Beginner's Guide to Real World React

Please select a discussion on the left.