A small react frontend to my Faker.js API hosted on Glitch.
How to use:
- 🌀 Clone the repo at
https://github.com/twhite96/dummy-glitch-api-frontend.git
- 🏃 Run:
npm i
to install dependencies. - 🔃 Remix the API on Glitch at
https://glitch.com/edit/#!/faker-api
- 🎊 Have fun with it.
I needed a place to display the data being grabbed from the API. I didn't just want to build an API, I wanted people to see the results of that API.
For this I used my favorite library, and most likely yours too, React. For the UI I used Shards UI but I determined that this was a mistake. Next time I want to build something like this, I am going to roll my own UI with something like Styled Components 💅 or Emotion 👩🎤.
Creating components wasn't hard. I created the User.js
component pretty quickly.
Understanding how to map over data returned from the API and displaying each new data object returned in different individual cards wasn't quite as simple. I looked at other projects that did a similar thing that I've worked on from some tutorial or another and I couldn't fuse those concepts together in my brain. This was because in those tutorials, we weren't doing anything with an API, external or otherwise.
Another thing I struggled with was the spinner. Glitch spins down your database after 10 or 15 minutes to be able to keep the site free. I wanted a way to indicate to the user that the site was still loading so that they wouldn't bounce from the sluggishness of the app.
I tried to use old React syntax but then realized React has APIs that make this simpler than ever.
I am going to be diving into some tutorials on how to use those newer React APIs.
Joseph Rex refactored the App.js
component via Hangouts. I grok some of what he did, but I am going to get with him to get a better understanding of the method where have an object like this:
requestRender(status) {
const renderStatuses = {
idle: () => null,
loading: () => <PacmanLoader size={150} color={"#06d7d9"} />,
loaded: () => this.userList(),
error: () => <h1>An error occurred!</h1>
};
return renderStatuses[status];
}
I am not certain why the properties on the renderStatuses
object are functions.
Piping in a Node API from Glitch to a React Frontend | Tiffany R. White Blog