CodePath WEB102 Spring 2025 Week 5 - Christina Hughes on Using Real-World Data Pt. 1

Summary

Highlights

• Christina Hughes walks through the importance of APIs and their role in web applications 🌍.
• A deep dive into Fetch API for making HTTP requests and handling asynchronous data flow 🔍.
• Introduction to Axios for more efficient HTTP request handling 🛠️.
• Explaining promises and their resolution states in APIs 💬.
• Utilizing async/await for cleaner asynchronous operations 🌟.
• Conditional rendering in React to manage UI dynamically based on API data 🚀.
• Explanation of URL parameters and their practical applications in web development 🔗.

Key Takeaways

• APIs are essential for integrating real-world data into web applications, enabling dynamic functionality 🌐.
• Understanding and handling promises is key in asynchronous JavaScript to efficiently manage HTTP requests 🔄.
• Axios simplifies making HTTP requests compared to JavaScript's Fetch API, making code cleaner and more readable 📚.
• Implementing conditional rendering in React allows applications to display content selectively based on data states 💡.
• Async/Await provides a more streamlined approach to handling asynchronous operations compared to traditional promise chaining ⚙️.

Overview

Chapters

• 00:00 - 05:00: Introduction and Setup The chapter titled 'Introduction and Setup' begins with some technical difficulties as the presenter tries to share their screen. There are back-and-forth confirmations between the presenter and participants on whether the screen is visible. The presenter addresses an issue about the screen sharing being paused and attempts to resolve it.
• 05:00 - 10:00: Discussion on API Concepts This chapter is a discussion on API concepts. It starts with a check-in on how everyone is doing and a reminder to rename themselves with their pod number. The conversation experiences a brief technical pause, indicated by an interruption in the flow.
• 10:00 - 15:00: HTTP Requests and Fetch Usage The chapter titled 'HTTP Requests and Fetch Usage' begins with the speaker arranging their setup and addressing the audience, asking for patience. However, the content of the chapter isn't directly related to the title based on the provided transcript. This may either be an introductory or transitional piece before diving into the core concept of HTTP Requests, and how Fetch is used in making those requests in web development contexts.
• 15:00 - 25:00: Understanding Promises in JavaScript The chapter titled 'Understanding Promises in JavaScript' begins with an interactive session where the speaker engages the audience, asking about their well-being and previous experiences, such as a career event that took place the prior week. Although some initial technical issues were mentioned, the session proceeded with an encouraging and positive atmosphere, emphasizing engagement and feedback from participants.
• 25:00 - 33:00: Async Await Paradigm The chapter titled 'Async Await Paradigm' begins with a brief discussion about final exams. The speaker mentions that exams have been passed, describes them as amazing but slightly boring, and acknowledges that this is sometimes the case. They then express excitement about the day's content, which is expected to reveal the full potential of the internet for web applications. The speaker advises participants to turn on their cameras, rename themselves, and answer a prompt in the chat.
• 60:00 - 70:00: Lab Instructions Overview The chapter explores the concept of creating one's own version of popular websites. It challenges the reader to think about which website they would choose to recreate and what unique features or changes they would incorporate. Suggestions include a focus on personal interests such as food-related sites or platforms like Pinterest tailored for artists.
• 70:00 - 80:00: Lab Time and Survey Completion This chapter discusses the use of web APIs and the importance of integrating various tools and data sets. It highlights the excitement around building integrations and encourages a community mindset where individuals remain present and engaged with available technological tools.

CodePath WEB102 Spring 2025 Week 5 - Christina Hughes on Using Real-World Data Pt. 1 Transcription

• 00:00 - 00:30 okay I'm just getting my I don't think can you see my screen can somebody unmute and tell me not yet see me you can see it I cannot see it yet can wait no no no no I can't see it yeah you're right okay okay let's see I don't know it's telling me like my screen sharing is paused I don't know let me try that again
• 00:30 - 01:00 okay in the meantime how's everyone doing I we had a prompt for this week but before we get started um don't forget to rename yourself add your pod number at the beginning of your name so that we are a wise of course it's always something um let's see I don't know why it wants that to be paused oh wait here we go how's
• 01:00 - 01:30 that now we can see it okay beautiful okay I'm going to try to get a couple more things lined up here be patient for a moment please me see okay there this chat over there um I going to do this okay well anyway it that's not
• 01:30 - 02:00 working right now but it's fine okay so um actually okay there we go got all right cool so welcome everyone how are you all doing let me hear in the chat or say out loud what's going on how is life you had your career time last week how was that that was great good wonderful informative thank you everyone wonderful
• 02:00 - 02:30 final exam passed amazing okay a little boring that's all right sometimes it's like that okay wonderful well I'm really excited to dig into today's content because I think you will see that what we're going over today is what really like unlocks the power of the internet for your web application and there's a lot of power there so let's do a quick intro um reminder please turn on your camera rename yourself as discuss and then we have a prompt to answer in the chat if
• 02:30 - 03:00 you could build your own version of a popular website what which would it be and what would it be like what would be different feel free to think about that for a minute trying to think what I would do I don't know I think something related to food probably I'm I'm not sure but feel free to think about Pinterest okay Wordle yeah it's there's a lot of different tools out there that are a available Pinterest for artists I
• 03:00 - 03:30 love that YouTube yeah I would maybe do like something without ads be like that's the obvious answer but um wonderful okay well just to get your minds going about all of the tools that are out there and all of the different pieces of information or data sets that you might be excited to build an integration to um so today we're going to be going over um web apis in general but as another quick reminder as a community we always want to be present
• 03:30 - 04:00 physically and mentally to the extent that you're able actively build Community Practice curiosity ask for help when we need it and keep those cameras on all right so let's get into it today our agenda is going to cover a few different topics uh we'll kind of see how these things tie together over the course of class uh so I won't go into it too much right now we have some feedback from last session glows as always lab groups I think I'm going to be saying that every week which is wonderful
• 04:00 - 04:30 um and then just learning new things everyone had a different little topic that they were grateful to have been learning about um and we hope to keep that up this week uh grows like opportunities compared to last week the pace might have been a little bit too fast I know we didn't get to go into a demo example for a couple of things so we'll make sure that we touch that for every topic this time and then a few more examples and Par programming exercises um probably would have been appreciated so so um with that said
• 04:30 - 05:00 we're just still wrapping up our intro here it's just a few more slides so um The Prompt here is basically asking us to consider when we go to a website like Yelp and you don't have to do this I already have one pulled up here and we'll just go through it together um like this is a restaurant in Austin and what we might notice when we're on a website like Yelp is that there are screens available to us for example this one here and I'll just plug in
• 05:00 - 05:30 a location for getting directions um when we do something like this in Yelp you can see that like everywhere it says this is powered by Google this is Google Google Google it's everywhere all over this section so we want to ask ourselves you know how is it possible that Yelp is able to display this information which you know Yelp doesn't know how to get turn-by-turn directions from two locations and you're absolutely right the answer is that Google has built an
• 05:30 - 06:00 API which is available for other websites to use to integrate with those tools and services for a fee I'm sure so today that's what we're going to be going into and so we have a couple of slides here that can provide some definitions API being a construct with a set of functions that allow program I'm just reading the slide that allow programmers to access specific features or data of an application in a predefined format so
• 06:00 - 06:30 um this is maybe a little bit of a confusing definition but when we kind of hone in on what is a web API we can think of that as this slide says as a service that like facilitates communication via these standard web protocols and sends data from or receives data from a given server so we've been working on a lot of front-end stuff so far and today we're going to be learning how to tie that front-end information into a backend which in the real world when you are the real world
• 06:30 - 07:00 in your professional career you will be doing this pretty much every time you build a web application for your company and you might be integrating with your company's own backend for example if I'm building the Instagram front end I would be interfacing with the Instagram backend or you might be interfacing with all kinds of other websites like we just saw uh Yelp doing with Google so another way to think of this that's a little bit more visual is you can imagine a a restaurant where you have a client or a
• 07:00 - 07:30 customer who wants some particular you know plate of food or some information or something like that that information is sent via a request and you can think of the waiter or the API as kind of being the facilitator for that information being available the request is sent is ultimately delivered to the back end or the back of the house the kitchen and then the response is coming back to the customer again via that API so this is just a quick overview of what
• 07:30 - 08:00 an API is what we use it for and now we're going to get into how we do that mechanically so one of the many protocols that are available for communication for facilitating these messages is HTTP and you've probably heard of HTTP many times you might see it in the URL every time you navigate to a website and so HTTP requests are again just a protocol like a standardized
• 08:00 - 08:30 schema for sending messages across the internet so um an HTTP request is made up of several different components um so one of those components will be a URL uh you might imagine this is a very important part what is the address that we are trying to communicate with it's also going to include a method that's what's we that's what we have listed here so the options that we're looking at right now on this slide are get post
• 08:30 - 09:00 put and delete so these are basically what type of manipulation would you like to do on the data that you are accessing at that address we also might have headers and a body uh but we won't be getting into that today today we're just focusing on the simplest case which is HTTP get requests so a get request is basically just going to send information say I want a piece of information from a server so I'm not trying to change the data I'm not trying to delete it or modify it or create anything I just want to receive a piece of
• 09:00 - 09:30 information so I'm going to show you really quick instead of going through the slides today I'm going to just jump right into a demo and talk through the slides information over here so you'll notice me skipping through some slides we're not skipping any content we're just doing the lesson More in the coding side today so um this is a little JavaScript playground you'll notice this doesn't have anything to do with react this is just basic stuff in JavaScript that you might have already been exposed
• 09:30 - 10:00 to um and so I mentioned one of the important things that we have here is a URL this is the address that we need to access so the way that we're going to go about making our first HTTP request is with the fetch function so this is built into JavaScript and its whole thing is for fetching information or updating you can use any HTTP method with this particular function um but what we're going to do is call fetch on the URL
• 10:00 - 10:30 that we specified so um we're going to be going into the details of what's going on here and what I'm about to type in the next section so it's okay if you're a little bit confused right now but the point is when we call fetch we don't actually get back the data right away um so what we need to do it's basically when we call fetch we're saying okay please give me this information and then there will be some time laps between whenever it comes
• 10:30 - 11:00 back you can imagine if I'm communicating with a server on the other side of the world it'll take a little bit of time for that to get back so what we want to say is okay we're going to call this then function on what's what's returned from fetch the then function is basically like okay once we have the data what do we want to do and so what I want to do in this case is just convert the response into Json and um you might ask why do you want to do that well that's because trying to get
• 11:00 - 11:30 some Json like readable form of the data that's being returned we want just like the the actual data there's I mentioned headers and all kinds of other things that might be in the response we want to get the body in Json format so um just to again quickly reiterate What's Happening Here we are oops fetching a URL and then once that response is available whoops we are passing in this call back
• 11:30 - 12:00 function what we have right here is essentially a call back function that is going to get executed once the information is available okay then what we going to do well this you might say well what are we doing here but bit just oops I didn't this is actually a function um once that is available I know you might say well why can't we just look at response. Json you'll have to trust that this is again going to be something that isn't immediately available but once it is available we can do something like
• 12:00 - 12:30 log the data to the console uh let's see that's easy okay so here we go so in this case we're using this joke API and it is returning a joke for us every time we call it so uh you can see that the joke is made up of like several different key and keys and values this is an object and so we have like was it was there an error what type of joke is it the options in this case are going to be like two-part where there's a setup
• 12:30 - 13:00 and delivery or just a plain joke and all these other kind of pieces of information that are available and this is kind of what you can expect whenever you make a get request and so you know you can imagine once I'm able to get information from another server of course this is a joke but you can imagine there's all kinds millions of data sets out there that are available you are able to now manipulate that data or present it to the user via your front end so um yeah
• 13:00 - 13:30 so I hope that makes sense does how like does that kind of make sense anyone have any questions please feel free to come off mute if you have any questions about this I did you say something in the chat so maybe I'll just review those really quick um um are the data and response variables built into JavaScript um so these are actually variables that
• 13:30 - 14:00 I'm making up the name of so I can call this anything I want to I can say joke data and then in that case I would just need to change this here but this is basically whatever is returned from the prior function call is going to get passed in and assigned to this variable name I can call it whatever I want so um let's see um okay so I see you have yeah there's a
• 14:00 - 14:30 few more questions um and we're going to go into a few of these a little bit more but okay so I'm going to go ahead and continue a little bit um so this is kind of the basic built-in tool the fetch function that's available to you anytime you want to be requesting data from a back end but we also have some libraries that can help you do this in an easier way so that's why I imported this axios um Library
• 14:30 - 15:00 earlier on that I had commented out to start so this will basically facilitate the communication in a way that's just like a little bit cleaner I don't have to do some of that kind of confusing well dot then this and then that so we only have to do that one time in this case so if I call get which this is the HTTP method that we're interested in on this URL I only have to do this one time
• 15:00 - 15:30 so I can say response and then I can go ahead and like have access to for example logging the response uh right away so here we here we can see we already have that available so um Okay so we've gone through a couple of different options available for retrieving data from a backend with an HTTP get request so I mentioned earlier I kind of alluded to the fact
• 15:30 - 16:00 that we might have um we might have like a delay between when we send the request and when we receive the response from that request so you can imagine like for example I worked at I'll show you a picture really quick um I used to work at a company called diligent Robotics and we were building this um robot named
• 16:00 - 16:30 Moxy which I thought there was like a photo okay here we go so this is our robot that we built named Moxy and Moxy drives around hospitals and supports the clinical Care staff with chores and like moving uh supplies from the supply room or dragging laundry to the laundry and things like that to take that burden off of nurses and other clinical Care staff so we actually in some cases would be submitting HTP requests to Moxy in order to initiate a task that the robot does and the response wouldn't even come back
• 16:30 - 17:00 until the robot was finished completing this task so this is another example of like you can imagine there might be not just a few milliseconds delay but like several seconds um between the time that you submit a request and you receive a response so how do we go about continuing the execution of our code whenever that happens you can imagine if if this is something if if we're executing this instruction and we're waiting until the response comes
• 17:00 - 17:30 back we could be waiting for a really long time and we're not doing other really important things like rendering or you know detecting button clicks and things like that everything's just at a standstill so the way that we go about facilitating this is with as exactly with asynchronous uh programming so asy JavaScript allows you to execute code in a way that doesn't prevent you from continuing with execution when you're
• 17:30 - 18:00 waiting for something else to happen so I'll go ahead and show you really quick again we kind of gone over all of this I I didn't mention this but you would need to install axios because this is a library an external Library that's available uh in order to use it so what are we talking about with synchronous versus asynchronous JavaScript so this visualization kind of maybe makes it a little bit uh clearer so in syn synchronous coding you can think of it
• 18:00 - 18:30 as I don't move on to the next task until the first task is done so the example given here is laundry like I can't put them in the dryer before they're done washing like I have to wait until that's done but in an asynchronous task we might have the ability to execute several tasks seemingly in parallel so uh you might in your coursework be exposed these concepts related to threading um so you know in some cases you might have an
• 18:30 - 19:00 asynchronous environment available with the use of multi-threading so I'm actually running because how can you do two things at once really on a computer right in that case I might be running separate instructions on separate cores of the computer CPU but JavaScript is actually a single-threaded language so in this case we're not doing that and JavaScript has some really clever um tool or like underlying technology available to essentially um put things on to the list of tasks that need to be
• 19:00 - 19:30 executed and remove them um in a way that allows it to continue with the execution of other tasks while we're still waiting on the response from something else so when we talk like about how this mechanically occurs one of the big Concepts is going to be that of promises and we can actually see if we come back here and I'm going to switch back to us using this fetch section for a second
• 19:30 - 20:00 let's say I didn't go through the trouble of these Vin things and I just wanted to say okay fetch the URL um and let's say I want to say like I just want to use the data could I do something like this and then let's see what we have there well okay it's not the data this doesn't look anything like that object that we saw earlier containing actual joke data in this case we see that what's returned from the fetch function
• 20:00 - 20:30 is actually called a promise and the way you can think of a promise is well kind kind of like the name insinuates it's saying I don't have your data for you right now but I am going to get it to you as soon as it's available so when we when I hover over this I hope you can kind of see on my screen we see that the type of my data is a promise which will ultimately resolve to a response object like an HT GP response in this case a
• 20:30 - 21:00 promise could resolve to any number of other things any other types of data but in this case it will be returning a response because that's what that's how fetch works so um so when whenever because okay when we think about synchronous versus asynchronous programming we need to in order to move on we need to have something returned from that function right so this is why we have promises it can return right away saying I am going to to get you something of type response even if it is
• 21:00 - 21:30 still waiting for that whole transaction to occur to the server and back so this is kind of like how that works it's saying okay here's what I'm going to get you you can continue with your execution of other things um and then whenever the time comes whenever that promise is made good and resolves then we are able to go ahead and execute those call back functions that we were talking about earlier so um let me pop back to the slides for a
• 21:30 - 22:00 moment okay so we actually so promises have as I mentioned kind of this initial state it returns right away and it's in a pending state with no actual data or value ultimately returned yet and then once the time comes where that data is available it can resolve into two different states so it can be either successful or failed and so I will show you I hide this okay um how that
• 22:00 - 22:30 works um okay so um okay so earlier uh let me just actually use the axio version so earlier we saw that we have this function being passed into the what the promise that's ultimately returning um which is the call back
• 22:30 - 23:00 function for handling the response of this data now what I didn't mention earlier is this is actually specifically for the case where the the promise is resolved successfully like we saw in that diagram just a moment ago so we get our promise if it resolves successfully it's going to execute this first function that's being passed in but there might also be an error so instead of getting a successful response there could be something wrong so I can show you here like let's say if I change
• 23:00 - 23:30 there's any number of things that can go wrong um but as an example an error you might need to handle is the case where the backend is simply not available anymore so I just changed the URL to be something like an address that isn't real it doesn't exist anywhere and in this case it's trying to get the response but you can see like nothing is being output here because this function actually isn't being executed in order to get that we would need to pass
• 23:30 - 24:00 a to our then function call and that and call that so in this case um let's say I just want to log the error so now we are seeing some response because when this is run it's not executing the first function it's executing the second one so here we can see oh there's like some kind of network error and we would be able to dig into that we know it's because the URL is not real but it could be any number of server errors so the server like in this case we're not making contact with a
• 24:00 - 24:30 server but we might make contact with a server and it says I don't I don't have the information you're looking for or you know you can't do that like you don't have permission or or something like that so we might receive a lot of valid errors from the server that we absolutely will need to handle in our code in order to create a workable and informative environment for our users um Okay so let's see we've gone into promises a
• 24:30 - 25:00 little bit um we've reviewed that promises are the way that we interact with the asynchronous nature of JavaScript the asynchronous like availability of JavaScript um how does everyone feel about promises I would love to hear a couple questions if somebody would please if you have a question if you could unmute and ask me it's just a little easier than the chat right now
• 25:00 - 25:30 anyone have any questions about promises or fetching data I have a question yeah I have a question about the response and then the aroc console.log response.data can can you explain like so when we say when that operation is happening is the response variable the same as the response that like response and response like can you I guess can you explain what's what's going on in that line this line right here with the different response the different variables that we have the response and
• 25:30 - 26:00 then aroc console.log response.data okay you mean this section right here right yes okay okay yeah so basically um I mentioned earlier this is a call back function so this is like an anonymous function I could also do something like um process data if this is just a little easier to maybe like see what's going on
• 26:00 - 26:30 um we can also do just something like this right so this what I'm passing in here is a reference to this function and what's happening under the hood is basically the whenever the way that the axios doget function is written you know like I mentioned it's returning a promise and since our code is continuing to execute outside of this like waiting for the promise to occur the way that we hook into the time
• 26:30 - 27:00 when that data is available is we need to pass like some kind of a call back function so I'm just creating this variable so this is basically the promise as it's getting to its resolution it gets the data back and it says now okay now I want to execute whatever function the code this the engineer passed me to handle the res resolution of This Promise which is
• 27:00 - 27:30 happening right now so it's calling the pro the promise code is calling this function process data and passing into it the actual data that was received from the server so in this case I'm I'm choosing to call that response and so this variable that I created whoops will be um will be assigned whatever data actually came back from the server so does that help
• 27:30 - 28:00 yeah I think I I think I see it now yeah thank you okay great you're welcome I asked I had a good question okay yeah does the does the dot then function have a second parameter where it specifically catches errors yes it does and that's go on so can you also put like process data in the second uh parameter as well sure yeah absolutely yeah I think there would be no problem with that so in reality we may want to do something different in
• 28:00 - 28:30 the case that there's an error but you could definitely pass the same function in here and you can see here um well in this case it was successful because I fixed it let me break it again okay so in this case yes we are using the same data to do that so yeah you can absolutely do that got it thank you yeah you're welcome okay all right so I'll continue for a little bit so next we're going to go into the async await Paradigm which I've seen a couple of
• 28:30 - 29:00 questions floating by about that in the chat so you might be wondering is this kind of the same thing as async A8 which you may have been exposed to so async await well let me let me explain what it is first so essentially you know we have this been exposed so far in this lesson to the concept of fetch being like an asynchronous tool that's available to us so you might wonder well can I make my own asynchronous tools and the answer is absolutely yes you can so so the way that we do that is by declaring a
• 29:00 - 29:30 function as an async function and when we do that which I'll show you what that looks like in just a second when we do that we have the await keyword available to us within that um function that we made so essentially let me show you kind of what that might look like like an equivalent so let's say I wanted to uh do something like this and wait right so so it's an async
• 29:30 - 30:00 function um and we want to call this in there so I kind of showed you earlier like well what if I just want to use the data right away and I don't want to uh do this whole like promise resolution thing so basically what we can do here with the use of the await keyword is like wait for this to respond before we continue so I can
• 30:00 - 30:30 say um something this might be kind of hard to read but something like this um and then wait hang on Sor instead of using the then uh tool we would be using sorry I have to actually use a weight in order for that to be helpful um we cannot have access to the data
• 30:30 - 31:00 here so let me just on typing for a second okay so me fix that so in this case Okay I want to call get data okay so here we can see that we have created an async function and instead of using the VIN syntax in this case we are just awaiting the response of this in sort of like a synchronous fashion so then I have access to this right away so you need to
• 31:00 - 31:30 use you need to declare your function as asynchronous as a sync in order for JavaScript to know that it it needs to be handling this sort of stuff in an asynchronous way your your your code that you've written so that's critical and then you have the option to use the await keyword to kind of skip over the do then style of execution and um just access the code in maybe like a little bit more of a straightforward way so this is again kind of like a
• 31:30 - 32:00 synchronous way to do what promises do asynchronously if that makes sense um okay so let me jump back over really quick so we've gone over um the option to use fetch the fact that it is an asynchronous tool and we need to use uh be aware of promises and how they are created and then resolved um let's see what should we get into
• 32:00 - 32:30 next um just making sure I didn't miss anything here uh yeah we can use okay okay so um wonderful so that's the end of this section I think I'll just have a couple more minutes if anyone has any more questions if you're welcome to ask them before we jump into conditional rendering and how we would utilize that in Rel to external
• 32:30 - 33:00 data anyone have anything out loud they want to ask no does that AP does that like uh API specifically only uh output one joke at a time or a random joke at a time or well actually that's a really good question I don't know so this was already kind of included in the in the instru instuctions but the way that we would go about finding the answer to
• 33:00 - 33:30 that is we would look up the API documentation and I'm glad you asked that because that's actually a really important part of choosing which apis you want to work with in the first place is making sure they do have good documentation but we can see here yes that it is well let me yeah okay um returning well okay so this is actually this is kind of helpful this shows you the full HTTP response here so this is what is actually being returned returned um like from a protocol standpoint
• 33:30 - 34:00 whenever we make this request so you can see I mentioned earlier there's like some data there's also a status code which will be something you will work with a lot in your professional career uh 200 means everything's a okay everything's great um so that's wonderful we have some headers um and like different things are available here so um in this case the data is the actual data that was returned from the server so yes in this case it's returning just one joke when I make this call to this particular path of the API
• 34:00 - 34:30 but it's possible there might be other paths available that return collections of jokes or things like that also also I noticed when you made the constant process data function um you did not include the response. data um as compared to when you did it in the a axus doget yes and you did then then you did and then dot data so that gives you specifically only the data part not like entire yeah so so that's kind of this is kind of one of the differences between
• 34:30 - 35:00 just using built-in F Fetch and using axios so um yeah with axios we have access to the Json data just with this um so here if I if I just did the data so this is yeah how you the axio response might look a little bit different from the built and HTTP response potentially but um for axios we would be accessing the data portion for the for the fetch option we
• 35:00 - 35:30 were kind of doing this be via that Json um call on the data that's returned so we were that's how we were getting into the actual data okay got it thank you yeah you're welcome okay um great so just looking add a couple things okay so wonderful let's carry forward now we're going to talk about
• 35:30 - 36:00 conditional rendering and use effect so now we're jumping from the world of just plain JavaScript over back into our react World that we're starting to get familiar with and here is a basic you know react starting point for um doing a demo we have a simple component here uh called app and we have some stuff that's being rendered so what do we mean by conditional rendering conditional rendering is
• 36:00 - 36:30 essentially using some variable or some external condition in order to decide what we actually want to include in the Dom like what we want to render to the user um instead of just having the same thing all the time so what we have here is not utilizing conditional rendering it's just showing you here is what we have happening right now and I'll show you a couple of different ways that we can go about using conditional rendering but you can imagine basically we might have for
• 36:30 - 37:00 example like a Boolean variable um maybe to kind of play off the last example maybe whether there was an error or not and we would use that variable to decide what to show to the user so let's say we have a function C called uh is error and in this case it's false whoops so there's a I mentioned again a couple different ways we could do that we could say if is
• 37:00 - 37:30 error um then return something like this except it's says instead of just hey it's like oh no oh my God what my mouth doing right now hang on okay so in this this is oop okay and then if there's not an error then we
• 37:30 - 38:00 would return something different clean this up a little bit okay so I hope this makes sense this is kind of the basic concept of conditional rendering we are choosing to render or you know ultimately display to the user different things based on some condition that we have awareness of so I should be able to switch this to true and you can see down here on the right it's changed from welcome to oh no there's an error so this is like a
• 38:00 - 38:30 pretty practical example of how you will use this in the real world you will be ultimately having to handle a lot of error cases um instead of just always following the happy path you have to say Okay what if this goes wrong what if that goes wrong so when you're thinking about that you can use this but there's many many many other things you might use conditional rendering for you might for example want to display different um tools to a user based on like I mentioned this in a prior class their level of authentication if they're an administrator they might be able to
• 38:30 - 39:00 see everything that's available but if they're not they might only get to see a couple things or only have you know readon access and so um I mentioned I'd show you a couple different ways so let me really quick show you kind of another Nifty uh tool that you can use which is the and operator um so for example I can use my Js X to include right
• 39:00 - 39:30 here is error I'm going show you ver and I'll explain in just a second um okay so so here you can see instead of kind of like deciding what to return based on the the key piece of information that we have we can also just include right here here in kind of like our HTML okay and
• 39:30 - 40:00 the way this works is like the and operator will only evaluate this second or this right hand side of this if the leftand side is true so in this this is kind of like a little maybe a little bit more concise way depending on what you're working on that you might have the ability to kind of decide what to add to the Dom based on the information that's uh critical so okay um so this is the basic concept of conditional rendering and so um does
• 40:00 - 40:30 anyone have any questions about this conditional rendering really quick it's pretty pretty straightforward and we're going to get into just a second like how do we tie this together with getting data from the back end all right awesome let's move forward so I'm going to make a new Fresh little react uh demo here and so actually first I'm going to check
• 40:30 - 41:00 back in the slides for just a second to make sure I didn't miss anything okay um this is kind of helpful for what we're about to go into so here's kind of another practical example besides the error case I would just went through of when you might want to use conditional rendering so let's say we are getting um a joke back from the API and I I kind of briefly touched earlier on the fact that this joke can be of different types and based on the type of joke that is returned which we could get
• 41:00 - 41:30 any anything or either of these two options we're actually going to have different keys that are available um in the response data so we and we need to like use that information differently in order to put together the whole joke displayed in like one full uh like area so um you can see for the single type we have just this joke key that we need to access and then for the two-part type we have both setup and delivery so this is an example of like
• 41:30 - 42:00 we might want to have let's imagine we want to make like a joke component which is able to display either of these two types of jokes gracefully so let's do that uh let's make oh my gosh okay hang on um I want to make a joke function and let's see okay um I think I'll just first I'll go
• 42:00 - 42:30 through kind of what the uh the slides show in the example so let's kind of say that well we need to return something so let's say we're going to have this concept of um the joke type being important for what we want to ultimately return um so if the joke type is single I want want to return
• 42:30 - 43:00 a one or a single joke um oops okay just bear with me for wait hang on single of with the joke um and then oops if the joke tip equals two
• 43:00 - 43:30 part uh then I want to return a two part joke and I'm going to Define what those are right here so a single joke is a function that's going to again take in this joke that we don't have we don't have the joke yet but we're going to get we're going to get to that part and this is going to return um just let's see
• 43:30 - 44:00 a just joke. joke I think was what it's supposed to be right so okay and then we can also have I'm G to kind of copy this and paste this instead of a single joke we can have a two-part joke which instead of just doing joke. joke it's joke. setup since we know we need to handle this one differently and then a space and then joke. delivery I think is what it was okay so you can kind of see this is going to ultimately
• 44:00 - 44:30 return our joke um okay and I think we need to see yeah okay joke's not F right okay so um now we need to actually go through the process of getting our joke so now is when we are combining this concept of conditional rendering which is what I'm showing right here um to the integration of that data from the
• 44:30 - 45:00 backend so let's say I want to use a state variable for that so can anyone tell me remind me from our prior classes how we would go about doing that what would I what should I type here yeah that's good start what else is it like a destructured uh something it's like a a bracket with like a a set and then something else I forgot yeah no that's
• 45:00 - 45:30 okay so let's yeah you're you're on the right track so we're gonna have our actual variable for our our state variable and then we're gonna have the setter function for that yeah so um yeah so we've got some um good stuff going in the chat too so like in this case I've already kind of used in the code this joke variable so that's what I think we need to set here
• 45:30 - 46:00 ad I you're M on the right track here um that we want to use uh a state variable in order to do this so in this case I want to set it to an empty object because that's kind of the like empty version of what we're going to be getting back um and I also need to import import it too right from this um okay and okay so we're we're on our way
• 46:00 - 46:30 there so we're doing we have got this function that we want to use in order to uh we've got our sorry our state variable that we want to use um but now we need to populate the state variable with some information right so um in this case we can set up a function that is going to I'm trying to think how I want to show this so yeah let's just um we can just in our example just do a fetch to the
• 46:30 - 47:00 same URL do I have this URL open yes okay so let's say um I just want to pop this in there and remember then we and you could use axio you can use whatever you want I'm just going to use this again uh the fetch version okay and then uh for now let's just uh
• 47:00 - 47:30 console.log our data Okay so we've got the data we've got the thing that needs to show the data and then we need to connect the two so what do I need to put here in order to make this connection said joke that's right all right set joke to the data okay something's happening here we're seeing this just Spam out through
• 47:30 - 48:00 all of the different jokes in the world that are available went through 4,000 in those few seconds I was talking can anyone explain to me why this is happening if you've already looked at the slides you might already know uh what's what's the deal there why can't we do that any ideas it's okay to guess yeah it's rendering every call exactly so we are in this case we are setting the joke which is a state variable which is triggering a
• 48:00 - 48:30 render um of our component and when that happens we're calling this function again you can see this component is just right here saying like Okay fetch this thing every time we render so we don't really want to be doing that we want to just call the joke we want to get the joke one time set the state variable and then that's kind of the end of that so uh one option that we have to do this is through the use effect hook and so we mentioned earlier that Ed state is the
• 48:30 - 49:00 first react hook that we had exposure to and I kind of alluded to the fact that use effect is another popular hook that you might find yourself using so use effect is and I'll just yeah like import it really quick so you can just see like you see how it's written use effect is the react hook for syncing your component or your application with some kind of external system so it's kind of like exists to solve this problem right here but you
• 49:00 - 49:30 there are many other things you might kind of use it for and so use effect is a function that takes in two different parameters um the first one is the code that you want to execute and or it's a function that you want to execute and then the second one is a dependency array and so basically it's saying okay when these things in the dependency array change like I need to monitor these because when these change
• 49:30 - 50:00 I need to reexecute the function that's passed into use effect so the way that we can like kind of manipulate that for what we need to do here is by passing in an empty dependency array so I'll show you what that looks like so we're just going to instead of just calling our our code right here the fetch function we just want to pass in this use effect uh or we want to call this use effect function and it is going to be responsible for fetching in this data um
• 50:00 - 50:30 and I mentioned it takes two parameters so the second one is that dependency array that we have here so let's see if it works I hope it does might not we might have to go through some stuff okay all right well it didn't work but it didn't start spamming everything so that's good um let me see what am I doing wrong here [Music] um let's
• 50:30 - 51:00 see um if anyone sees it let me know I might need to move this down below I think I'll do that just to be safe um okay let's see we've got this there we're kind of trying to render this I don't think I should should need let me I'm going to check my
• 51:00 - 51:30 oops oh no okay well let's check our solution really quick and see if we can find that answer okay okay so that was I wasn't um maybe I'm not sure actually let's see so we've got our use effect function here it's calling our fetch function we're processing the data
• 51:30 - 52:00 setting our joke to the state and then we've got these different types here yeah I'm not that might have been just like a little typo somewhere um but yeah so here we can see that based on the type of joke we've got a two-part joke available here and it is displaying both of those functions that are or both of those different elements of the joke okay so this is kind of how we can get information from the back end tie it in um our state and then conditionally
• 52:00 - 52:30 render different things to the user based on um like what kind of information that we've received so uh cool okay let me see I think we have one more quick section let me review our schedule again really quick so we want to okay yeah okay so let me scroll down so we have yeah these kind of examples here like a
• 52:30 - 53:00 little bit different but we through use effect yeah it's only executed once across re renders just to reiterate the use effect function is only executed once because we passed that empty dependency array um okay so what questions do you have about this what can I answer for you before we move on to our last section of class which is going to be pretty quick and it's going to be talking about URL parameters any
• 53:00 - 53:30 questions can you explain the dependency array concept again yeah sure okay so um this is the dependency array that we're I'm referring to um and you can see here that it's the second parameter passed into use effect and so what react is doing is it's saying okay there might be some cases where when a particular variable changes we need to we need to re-execute this code but not in the event that that
• 53:30 - 54:00 variable doesn't change so this is kind of like an efficiency thing that's kind of necessary for a case like this so if I had a variable that I was using in here um let's say I was using joke here like if I was like if there's not if I don't know uh I don't know let's go here so I don't know joke. type equals like single I don't
• 54:00 - 54:30 know if I was using joke in here I would be expected to pass joke to this dependency array because this is the code that's being executed is dependent on the value of joke I hope that makes sense so like in this case we're using it kind of in the simplest example we're only using the dependency array to to say like this is not not dependent on anything so I only want to run this code one time like
• 54:30 - 55:00 an initialization of this uh like component and then if there were some different variables that we needed to run it again not just that initial time but more times later we would be expected to pass those into the dependency array so that react knows when to call this code and can pass that information in there does that help at all yeah that makes more sense thank you you're welcome
• 55:00 - 55:30 all right I will go ahead and move on into our final section of this thank you everyone you're doing great keeping up with all this I know it's a lot of material and you're doing really wonderful so we have um finally our section this is a little bit might feel a little disjointed from the rest of the lecture but it's just going to be something we're going to add in really quick so this is the concept of URL parameters so URL par parameters I'll actually show you I hope you can see right on this slide are
• 55:30 - 56:00 basically this section of the URL so I'm highlighting this section of our URL after our domain name and our path we have this question mark and so everything after that question mark up until the next like special identifier is going to be a URL parameter um so to kind of go over the definition in this slide we're basically um attaching information to the end of a path which can be used to define kind of
• 56:00 - 56:30 the behavior pass information to the backend that's kind of Uh custom based on what the user's action is that they're taking so here in the slide you can see another example this is two URL parameters it's a little bit confusing in this case they have the same name so I'll just change that one but um so here we have the you know the protocol the domain name the path and then we have two URL query
• 56:30 - 57:00 parameters yeah the question mark again there's two key symbols here the question mark marks the beginning of the URL parameters and the am sign separates the the amand separates between the different ones and you can call this like a query string or a search you know um string um so when do we want to use Query parameters so I can tell you you're going to use this a lot I can give you a specific example from my career um I used to work at a company that built a walkie-talkie app and we
• 57:00 - 57:30 had a lot of customers that were like um you know over like 100 million users or something like that o over all time so we needed to review users logs a lot this was an example of like an internal tool that the company had built so they had built this tool where you could import a log file from the mobile application that we had created and it would basically like call out a lot of interest things for the customer service representative that was helping that
• 57:30 - 58:00 user and it would kind of guide them to what do we need to look at in order to solve this problem for the user so um one of the projects that I did was adding query parameters to this um this application so that whenever I went through and I did a bunch of like searching and filtering in order to hone in on the particular part of the log that was available or that was sorry relevant could pass this information to the uh to another person by sending them
• 58:00 - 58:30 the URL so beforehand the URL would just take them to like the log page initialized clean fresh no extra sorting or filtering or honing in highlighting lines things like that done but after adding URL parameters you're able to pass all of that useful information to another person by just sending them the URL um so here's a few other examples you might decide which page you want to be showing to the user in like a paginated um application you might have
• 58:30 - 59:00 a query you might translate there's a lot of information you might need to send to the backend in order to decide how to get the right information to show this uh set of data to the user in the way that they want um and so we didn't have any uh slides like available on like how do I actually use Query parameters like how do I dig into that I think the the point was just to introduce them to you all at like a a high level but I did want to just really quickly show you how one option uh that
• 59:00 - 59:30 you would have for accessing these so I just opened up my inspect console here um on the right hand side in Chrome I just want to show you that you can simply go use window.location do search in order to pull these up so here you can see what's return from the the same format we were just looking at we've got this question mark a key
• 59:30 - 60:00 and then equals and then the value that it's set to so in this case this is some kind of special ID that they've created for the slides that's telling it which one I have selected so that I could send this to somebody else and they can pull it up to the same slide um you might notice there's also something in this URL after that which this is called a hash and so this is kind of more for just the visual rendering of the um page to the user in a particular way so there might be like a heading or something that we're jumping to but the query parameters are
• 60:00 - 60:30 usually going to be passed to the backend okay it's break time um we're going to take five minutes so we'll be back at 5 past the hour uh thank you so much everyone and as usual I'll be here over break if you have any questions feel free to ask them out loud and after break we'll get started on the lab all right thank you everyone going to stop sharing for a minute the lab now um so this lab is called CAP and you
• 60:30 - 61:00 are going to be building a tool for capturing since cap screenshots from various applications so make sure that you have your lab tab pulled up and your instructions that are all right here as every week you're going to be um basically using an API call to and the a via the async await um tool set in order
• 61:00 - 61:30 to save information to a state variable and like adding query parameters and all these kinds of things so um yeah this is kind of an example of what that's going to look like I think we can access it here so you'll be inputting these different pieces of information like a URL a format you want to save the image as if you want there to be ads or not height of pixels all these different like screenshot parameters um and then you you'll be able to retrieve a picture uh from that website using an API that
• 61:30 - 62:00 is available an external API alrighty well I think that kind of is just the basic intro I'll let you go ahead and just spend your time digging into it with your groups I uh wish you all a wonderful lab time and I hope that um you will ask questions to your TFS whenever they pop in I'll be jumping around as well to check in on people so good luck and uh yeah we'll see you back here in about 55 minutes I believe maybe 50 minutes we're running a little over
• 62:00 - 62:30 all right see you everyone you will be shipped off to your room shortly everyone has kind of gone through that practice it's amazing to keep doing that as often as possible but hope the lab went really well for everyone um so we're running just a few minutes uh we have a few minutes left so I want to go ahead and call out a few important things and then we'll wrap up with our one good thing so first thing is we have this early uh early course survey that we ask everyone
• 62:30 - 63:00 to go ahead and fill out it shouldn't take more than five minutes so I'm going to go ahead and uh let's see if I hope somebody will back me up with dropping this link into the chat and I'll start this five minutes okay it's not actually five minutes it's just a screenshot okay five minutes four minutes maybe we're gonna just ask you to go ahead and fill this out this is again like in addition to the session survey that we ask you to fill out every week even if you've done done it you know before um your feedback is super helpful this is just continuing
• 63:00 - 63:30 to make the program better for you and for everyone else who comes into it behind you so um please do fill this out and if you don't have the link yet somebody say something please I hope you have it already let me find the chat many windows open okay there we go yeah so thank you Janice we've got links to both the early course survey and the session survey go ahead and knock both of these out right now why not I mean it's uh it's again just going to only contribute to and appreciate like the experience that
• 63:30 - 64:00 you're all having so go ahead and do that I'll be quiet for just a few minutes and um we'll check back in in just a couple minutes and then we will um I have an important announcement and then we will wrap up for the day
• 64:00 - 64:30 oh and thank you for the question yeah you do not have to take the early course survey again if you've all already done it thank you for asking yeah if you've already done the early course survey you just have to do that one time which is
• 64:30 - 65:00 different from the session survey that we ask you to do every week e
• 65:00 - 65:30 okay and so as you're wrapping this up I
• 65:30 - 66:00 know some people are going to have to go to other things um just really quick um as you're finishing up those surveys want to have an announcement we have a new study hall session so you all gave feedback on uh the ideal study hall time so now in addition to the Friday at 11:
• 66:00 - 66:30 or Friday at whatever time zone you're in the time we have one on Tuesday as well so please take this into consideration please leverage these resources we all want to support and help you in any way we can so um that's pretty much it last thing is that just a reminder your next project uh is going to be we didn't review the project today in class but you will have access to everything you need on your tab in the course portal that project is going to be due um just before uh by the end of
• 66:30 - 67:00 Friday of next week um so yeah feel free to like drop one good thing that you learned today or something you experienced during the session today something that was positive or uh inspiring for you and um yeah thank you so much everyone for taking the time to come here we're so happy to have you all and um just really look forward to continuing to uh share any knowledge that's helpful with you so thank you so much feel free to go ahead and drop whenever you'd like um and I'll be here for a few minutes if anyone has any
• 67:00 - 67:30 questions um feel free to go ahead and ask but besides that I'll see yall later bye everyone Take Care thank you so much