React Class Components

-

     To further practice React, I worked on a small, simple project from this PluralSight course by Samer Buna. I decided to throw that project into an actual React app, rather than using his great Playground tool. The project is just a simple form where a user can type in a GitHub username and it will be added to the list with their profile picture, name and company.

    This simple project uses a few components, and it shows how to pass data down to child components, how to update data in a parent component from a child component. It also shows how to communicate with an API using Axios, a very common library for making HTTP requests to the browser. Class components reminded me a lot of Blazor components, we simply create a component which will have a render() call to display our HTML, and when we call that component we will pass data to it which will be available in our props object.

See Below how the CardList component is called and given data:

 

And how a component then accesses that props object:

 

     Our CardList is actually not a component class; this is the other way to write functions, and it's a bit simpler, since our component is only a single line. It actually builds a list of Card components, which will contain all the data from our API call. However, you'll notice from our code that the list of profiles we are passing down to CardList and then to Card come from our API call, which is in our Form component, so how are we passing that data between siblings?

    Really we aren't. React components play a game of telephone to send data up or down, but never side to side. The Form component is passed down a function reference, onSubmit(), which can then pass the profile data we pull from our API back up to our parent component, and down into another child component. 

 

    The result is a simple project where the Form uses axios to search for a username, send it up to our App and then down to our CardList and Card components, where a GitHub profile is displayed, and it looks like this!

 

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