Note: this article begins after you’ve setup and coded an Express Router on a NodeJS server and written an API that connects to a mysql database
Now that we’ve got our sexy app up and running, we want to make it a little more sophisticated. We didn’t bother to include user-password encryption before, because who cares about hacking my demo app for school, right?
We’re going to be using a package called bcrypt to encrypt our password and for the validation. Here’s what wikipedia has to say about bcrypt:
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.
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.
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:
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…
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:
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.
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…
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!
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
The first thing we’re going to do is run a terminal, and from the command line…
How’s that sound?!
Why would we want to do that in the first place? That’s simple; because there are so many primo form-generators online to build some really tight-looking forms, but maybe you don’t want to send the data off somewhere else for processing.
That’s as good a reason…
4a 75 73 74 20 61 6e 6f 74 68 65 72 20 63 6f 6d 70 75 74 65 72 20 6e 65 72 64 20 77 69 74 68 20 61 20 62 6c 6f 67