Yay, Me!

This will be my last blog post for my enrollment at good ‘ol Austin Coding Academy. I submitted my final project, a puzzle game called Puzlr yesterday and this post is the last assignment.

Later they’ll make a video of its functionality for the graduation ceremony and I’ll get me a certificate certifying myself as a Full-Stack Web Developer. Which I was already, in php and mysql, but I wasn’t certified and I had never run into the tools they taught us how to use.

Now they’re preparing us for the job hunt. That’s what this article’s about.

Welcome to Your Nightmare

By now…

Problem:

What we’re going to be running into today is what to do when you have an array of elements to map, but you want to do something to each one first.

The Example:

I’ve been making a React app called Swars out of the Star Wars API.

That’s an excellent API, btw, very helpful and fun for training. Here’s a version I made 6 months ago in PHP. I just checked and the API was down so neither example was working.

…but we don’t need ’em to for this…

As you know, the records come through like this:

{ "name": "Luke Skywalker"…

Disclaimer:

I got involved in some new-feature development on my good ‘ol Capstone App for Austin Coding Academy this weekend. This left me inspirationally drained and intellectually worn out enough that I almost completely forgot I had a blog post to write as well.

I’m losin’ it, here…

I usually cover something I learned in class this week, but since we’re very near the end of the course our classes have been a lot of tying up concepts that we’ve already been familiarized with.

Some important concepts have been introduced and then left behind as we move on to other things…

Abstract:

At some point by now you’ve probably signed up for a website and been automatically assigned an avatar as a “placeholder” until you supply your own.

Here’s an example if you don’t know what I’m talking about:

Introduction

So you’ve got your amazing app all refactored into components and you’ve set up react-router to provide you a path to all your different pages.

That’s great!

But then you find out that one of your pages needs to redirect the user to another page along with some props that they’ll need once they get there!

You don’t want to use a global state manager like Redux, because who knows why you do the crazy things that you do, but you still need a way.

I can tell by the amount of people I ran into with the same problem…

Intro:

Have you heard that old joke recently?

Q: “What does a programmer do while in quarantine?”

 6:00AM — wake up 6:30AM — Shower, breakfast, coffee 7:00AM — build the first Covid tracker of the day

I’m in this joke — and I like it!

So today, instead of just reading API data and spitting it out in pretty rows, let’s jazz it up with a little visual enhancement!

Let’s Get Started:

Go ahead and create your react app using npx create-react-app bestappever and get yourself to the App.js file.

Just like normal, we’re going to gut that file and replace it with our…

I’m sure you’ve experienced the sudden nightmare when you make an API call and the data that gets returned contains an array in it with more data. Then you open that array and it’s filled with more arrays with more data. And then each one of those data elements is another array with more data!

Here’s the Pathetic News Network app from the picture above.

Here’s an example of the data we’re working with. It’s my project from last week to display articles and comments from the Hacker News API.

That link will display all the comments for one article…

For today’s fun adventure we’ll be using ReactJS to fetch data from an API and output that data to the user. We’ll also test for how far the user has scrolled down the page and automatically load more data when they’ve reached the bottom.

The API data we’re going to use is from the fine folks at PunkAPI. They provide pictures, descriptions and recipes for craft beers. Soon we will, too!

What you’ll need:

— npm package manager

— VSCode

— create-react-app

— react/react-dom

The first thing we’re going to do is run a terminal, and from the command line…