Author Archives: Mark Reyes

About Mark Reyes

Web Developer based out of Southern California.

KiloByte Contributor 

Introduction

Welcome to Season 9 of AllWebSD. This season is dedicated to my colleagues at the San Diego Futures Foundation and today I’m in collaboration with Teresa Valenzuela, Community Outreach Manager for SDFF and we’re here to expand on a new initiative developed on their behalf called the Digital Bridge.




Highlighted Topics

In some way shape or form, I feel that I personally am in this role. So let’s start our exploration here, shall we?

  1. What is a KiloByte Contributor?
  2. Who would you say is most suited to fulfill this level of support? 
  3. Knowing that this level of support is non-financial, what kind of an impact can this still provide for your cause?
  4. Final thoughts.

Thanks again for listening in. Remember, I’m here to foster innovation through conversation. So if you’d like to continue this discussion or any topics previously discussed, go head first into our Discord server by clicking the link on the footer of AllWebSD.com. Otherwise, you can find me on occasion at San Diego Tech Hub’s monthly meetups. For more details on that, go to meetup.com/sandiegotechhub. Thanks and Aloha!

Introducing The Digital Bridge

Introduction

Welcome to Season 9 of AllWebSD. This season is dedicated to my colleagues at the San Diego Futures Foundation and today I’m in collaboration with Teresa Valenzuela, Community Outreach Manager for SDFF and we’re here to expand on a new initiative developed on their behalf called the Digital Bridge.



Highlighted Topics

  1. What is the Digital Bridge Initiative all about?
  2. How exactly does the Digital Bridge Initiative work?
  3. How can individuals and organizations get involved with this initiative?
  4. Are there any success stories or noteworthy outcomes from this initiative?
  5. How will success be defined for this type of program?
  6. Final thoughts.

Thanks again for listening in. Remember, I’m here to foster innovation through conversation. So if you’d like to continue this discussion or any topics previously discussed, go head first into our Discord server by clicking the link on the footer of AllWebSD.com. Otherwise, you can find me on occasion at San Diego Tech Hub’s monthly meetups. For more details on that, go to meetup.com/sandiegotechhub. Thanks and Aloha!

React Components: Bootstrap Card, Github API

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


Introduction

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