Author Archives: Mark Reyes

About Mark Reyes

Web Developer based out of Southern California.

React Components: Bootstrap Card, Github API

I’m dabbling with React 18, displaying data in a separate component using hooks and fetch.


Let’s build this. A simple React app which accesses Github’s REST API and prints a user’s profile into a Bootstrap 5 card interface.

What’s the Goal?

Create a separate component that displays a person’s Github profile.

What will we need?

  • Stackblitz – to quickly prototype a React project and its dependencies.
  • React Bootstrap 5 – to grab some ready-made user interfaces (e.g. cards).
  • useState – to handle the data.
  • useEffect – to make the call for external data.
  • Github REST API – the data source we’ll need to access and display a user’s profile.

Step By Step

Step 1: Create React App

From Stackblitz, click New project button and choose React JavaScript.

Step 2: Install Dependencies

From Stackblitz, open a new terminal and run: npm install react-bootstrap bootstrap

Step 3: Add Dependencies

From Stackblitz, add line 5 of main.jsx, import bootstrap.min.css.
From Stackblitz, add lines 5-8 of App.jsx, import React components Card, Container, Row, Col.

Step 4: Setup Hooks in Function, App()

From Stackblitz, App.jsx.
  • Line 1: import useState and useEffect.
  • Line 35: set a constant which de-structures an object called data and a method called setData which initially sets the data object’s value to null.
  • Line 36, 40: set up useEffect() method and pass in a callback function. Take note of line 40, where an empty array is assigned in order to make this request once when the application first renders.
  • Line 37: use built-in fetch method from the browser to make an HTTP request from Github’s API.
  • Line 38, 39: The first then takes the response and turns it into JSON and chaining in another then method will take the result of that JSON and pass it into the setData method defined on line 35.
  • List 41, 71: Set up an if statement to return the HTML if data exists.

Step 5: Create Function, GitHubUser()

From Stackblitz, App.jsx, lines 10 through 33.
  • Line 10: pass in the props of your choice for display. In my case, name, created at, avatar url, company, html url and blog keys have the values I want to display as HTML elements on the page.
  • Line 11, 26: Concatenate secure protocol since it was not included in the original API call and pass that into the Card Link component.
From Stackblitz, App.jsx, lines 59 through 66.
  • Line 59 – 65: Once the conditional (line 41, 72) evaluates to true, the data object will be available for props to be passed into the GitHubUser component.

Key Takeaways

Outside of a successful call, data can be coming in many different states such as loading and error. This is due to the dependency of calling in a third party API. Extend this example by leveraging additional useState hooks, conditional rendering and catch method to display HTML which reflects those different use cases.

Additional Resources

Review of The AI Exchange

How It All Began…

AI this…AI that…AI this…AI that. AI. AI. AI. All the things AI.

Photo by BoliviaInteligente on Unsplash

Ever since AI found itself into our hands back in November of 2022 by way of Chat-GPT, it’s been really hard to ignore the topic and its accelerated adoption from both a professional and personal perspective. In year ’22 my eyes had a laser-like focus on Web3 and the blockchain but the noise of AI quickly took over. Since then, it’s been hard for me to discern what resources I’d need to ramp up on this vast ecosystem. Obviously, I was inundated with too much information from endless Google searches leaving me with nowhere to start.

Analysis paralysis, 1. Mark, 0.

Thankfully, a little Meetup bird dropped a note in my inbox for a Seminar Series called Optimize Your Time With AI hosted by Rachel Woods of The AI Exchange and after digesting the ins and outs of that presentation, I was intrigued to learn more. Could I have possibly discovered the intel I needed to initially succeed with AI?


Thus Far…

In a nutshell, what compelled me to pursue further intel from The AI Exchange was based primarily on the insights I received from the original Meetup. In that alone, Rachel guided me on how to use Chat-GPT more effectively when paired with some consistent tactics. Still intrigued, I wanted to learn more and found myself on their website, eventually clicking the Enroll button on a course called, Prompting for AI Operations.


Current Thoughts…

I can’t quite put a pin on it yet, but yes, there’s something special about this domain! Once enrolled, my initial assumption was that it’d simply be a course powered by an LMS (Learning Management System). On the surface, it is still very much that but it doesn’t stop there. The AI Exchange turns out to be much more than that. It’s offering is paired with a very condense playbook on how to communicate with LLMs (Large Language Models), ancillary tools you can use to help you scale out tasks by way of prompting and there’s a worldwide community within this domain conversing on all aspects related to AI. I’ve barely scratched the surface on the content (at the time of this writing, I’ve reached the end of Part 2 of the course), however, The AI Exchange is definitely a path worth considering for both technical and non-technical audiences who are curious on how to possibly adopt AI into their everyday work.

15 Common Beginner JavaScript Mistakes

I’ve taught JavaScript to hundreds of people in-person and thousands online. During my time teaching, I’ve seen beginner JavaScript developers make the same mistakes over and over….and over again. Here are the 15 most common beginner JavaScript mistakes I’ve seen.

James Q Quick