Starting my React Portfolio

-

     So I've mostly finished my portfolio in Blazor (there is a kink to work out with Auth0 and GitHub Pages, but it's mostly there!), and now I'm building a front-end in React. The more I've worked with React so far, the more I've liked it. Being able to isolate your code into components and see your work gradually appear without breaking the rest of your code is satisfying, and while JavaScript sometimes feels like someone spilled a programming language, it's actually very easy to code in. The most challenging aspect of code so far has been getting a list of objects from my API. I say challenging, but once I found the solution it was actually very very easy.

    The API call is made easy with Axios, the heavy lifting in on line 7 and 8. We simply reach out to the endpoint and pull the data out of the response. Boom, list of projects. I found that the more complicated part of this came from when I needed to actually display those projects. The asynchronous call made things seem more complicated; should the useEffect be async? Or should the render be asynchronous somehow? 

    Using React Hooks to handle the state of this component, it's actually just much simpler to create an async function called getProjects() that can try to access the API service and catch any errors. Our function will first display a loading message, and it will try to gather up the project data. When it is successful, it uses a React Hook to set projects and then sets the loading and error hooks to false. In the event that the API call fails, it will display an error message. All of this is called as soon as the page loads, and that extra pair of square brackets is just there to tell useEffect to only run once (so it isn't constantly trying to update the list of projects, causing a weird flicker effect).

    You can check out the code here!

Comments

Post a Comment

Popular posts from this blog

API's in C#

-
      There is a lot here to take screen shots, but the code is all on my GitHub here if you'd like to follow along with this post.       My wife teaches sixth grade, and lately I've been thinking about an application I could build her to help manager her classroom and motivate the students to improve on the skills they've been struggling with. The concept is to turn a classroom into a game of Dungeons & Dragons, except the skills are in things like math and reading. Students would answer questions instead of rolling dice, and can then add their skills to their results so they can earn experience and rewards. Originally I was going to build this in FastAPI but I thought .NET Core would be better for setting up models and working with a database.     I started by setting up my models in a shared class library project, and I added a Classroom class for tracking classes of students, a Student class for tracking the stats of students and a Logs class to keep track of how a
Read more

Using WebRTC to build a videophone in React and TypeScript

-
 Recently I had the opportunity to spend more time learning React, as well as Redux and a bit about WebRTC. I was prototyping a website that allows you to make video calls to other users, and I thought it was really cool how out-of-the-box WebRTC is. I also used TypeScript, even though I had some trouble in the past with React-TypeScript applications, and it went pretty well. There was some finicky things and it required me to learn the types of objects I had never used before, but overall I think it went pretty well.   The server is built with express, and uses socket.io to emit the web-rtc requests. There is no authentication or authorization, I was mainly focused on showing that I could make a video call.It uses Redux to handle state management, which was a bit tricky in TypeScript and felt like I was writing a lot of repeat code, but it got the job done better than it would have without it. Ultimately this project ended up being put on the backburner as my team turned to Flutter in
Read more

Reviewing WPF and MVVM

-
Image
 I've been working in WPF (Windows Presentation Foundation) a lot lately. WPF is a great way to build a Windows desktop application, it's been around for many years and is very mature compared to UWP (Universal Windows Platform) which is a similar tool for creating desktop applications. It's not the newest, shiniest tool but it is definitely a great tool to be aware of. A while back I built a simple WPF program that worked with a .NET function library that did very simple distance calculations, and I decided to review that before really getting into more advanced concepts. When the program runs, it looks like this:   It's nothing too fancy, but it will show travel time, rate of travel and distance traveled over time. It also allows an excel spreadsheet to be inputted and it will run many calculations and then update the spreadsheet. The layout here is primarily built using the XAML grid, a staple of any WPF application. The grid specifies how many rows and columns the g
Read more