Using APIs in React - Create a Weather Application - Part 1 | React tutorial for Beginners

hey guys how's it going okay so in this video we are going to go ahead and build this react weather application that's going to fetch data from a weather API and display it right here on the screen okay so before we dive into it I'm just going to give you a quick demo of how it's going to work so right here in the UI I've got a couple of input tags the first one has the name of the city and then the second one has the name of the country so if I type in Manchester which is where I am and then attack the UK and if I press this get weather button I receive this live response from the weather API so in this case I've got location which is Manchester JB a Great Britain I've got temperature which is 0.27 the humidity 93% and the conditions which is misty right now okay so it may seem like a very basic application but there's actually quite a bit coming on in terms of react components if you don't know what react components are don't worry we will go into details but for now just know that react components are just small chunks of UI code put together into one single components that we can render out to the web browser okay so in this case we have a title component which contains these two titles next up we have a form component which contains these two inputs and the button after that I've got this brother component which shows the weather data and then I've got this main grappler component which contains everything that's inside of this app okay so how do we actually build this project well if you have not worked with react before then before you even begin working with react you need to put some basic configuration settings so you have to first set up a vet pack file and then you have to set up something called Babel and Babel is what transpires the react code into normal JavaScript code that the browsers can read and the process of configuration is a bit tedious and this is why I'm going to skip the configuration in this video and instead I'm going to use something called create react app to build this application now create react app is a command-line utility that's been developed by the folks who created react and essentially it allows you to get up and running with react as quickly as possible without worrying about the configuration so as you can see right there it says create react apps with no built in configuration so how do we actually work with create react app well before we go any further I want to let you know that I expect you to be familiar with HTML CSS JavaScript and NPM before we built this application so first of all you need to install this quick react our package on your machine ok to do that open your terminal and I'm gonna shut down the current process I'm gonna say clear I'm gonna CD to my home directory and the first thing that you need to do is you need to type in and p.m. install create - react - app does G what this is doing is it's telling NPM to install this create react app package globally on your machine and this is what this G flag stands for it stands for global so install this package globally on the machine so you can run it so you can run this command anywhere in your in your machine or from any folder okay now I already have this package installed so I don't have to do it but once you have typed this press Enter let us do its thing and then you'll be good to go so to check that you have correctly installed this package just type in create - react - app - - version so if you get given some sort of a number there yours could be different but as long as you get a version number that means you have correctly correctly installed it okay so how do we actually initialize a create react app project well first thing I'm going to do is I'm going to navigate to my desktop so CD desktop and then I'm gonna say create - react - app followed by the name of the project so I'm gonna call it weather - app but you can call it whatever you like and then press Enter so as you can see as soon as I press ENTER it places a folder right about there and now it's just grabbing all the necessary dependencies that it needs for the configuration okay so once it's done right about there is telling you to first navigate to the project folder and then type in yarn start so let's just follow the instructions and see what happens so CD into the weather rap and then type in yon start it could be NPM start in your case so just type in NPM start it doesn't really matter and let's see what happens okay so it launches in a live server which in my case is localhost 3000 and there it's a logo and a heading that says welcome to react and then a line that says to get started added source approaches and saved to reload okay so let's just go ahead and followed this instruction so what exactly is inside of this folder let's find out so I'm going to go ahead and open this into my text editor and i'm gonna use sublime text for mine but you can use whatever you want so right there i've got some some folders that create react app provides us with so first up north modules folder non module folds note modules folder create contains all the dependencies necessary for a project to run so in this case there's just millions of them so i'm not even going to touch them next up public folder and i will come back to this in a moment next up source folder the first one app dot CSS and i'm going to wipe this clean because i'm gonna add my own personal styles so you can leave it there you can delete it it's entirely up to you but in my case i'm just gonna clean it because if you're going to start with a clean slate next up ab dot yes again i'm gonna select everything and i'm gonna delete it because i'm gonna start from a clean slate so i can explain each and i are aligned to you step-by-step okay next up Aptos yes now this is something to do with testing but in this video we are not gonna go into testing so i'm just gonna leave it there as it is okay next up index dot CSS and again it just contains some basic settings or there's basic styles for the web page so i'm just gonna leave them as it is next index j s and i will come back to this in a moment because i'm not going to delete this we need these files there but i will come back to these in a moment so just close it for now and let's move on okay next up logo to SVG and this is what you saw on the live server that logo that was spinning around but we don't need it so i'm just gonna go ahead and delete it okay next up register serviceworker and this is something to do with progressive web apps I'm just going to leave it there as is because you're not going to touch it and right there the only file that we are concerned with is package JSON and this contains all the dependencies that this project is using so in this case is react react Dom and react tom is a library that because react can be used outside of the web as well so this react native that we can use for mobile applications there's react via that we can use for creating virtual reality applications so in this case we are letting this project know that the only need react Dom which is react document object model and this is just letting this project know that we are only going to be using what the version of react that runs within the web browsers okay now next up AB Doge is this is this app Dutchess is probably the main file that we are gonna be primarily working with and a bunch of other components that we're gonna create shortly but in this one let's just go ahead and actually create a react component and this react component is going to be the wrapper component that's going to contain all other tiny components that we're gonna create so the first thing the first thing that you have to have to have to do in a reactor file is you have to input react from react this statement is telling this file to import the react object from this react package that lives in package JSON ok so once you have imported reacts you need to initialize the components so how do you initialize a component first you type in the keyword class then the name of the component and I'm just going to call it app followed by the keyword extends and then react the component what this line is doing is it's the class keyword is a reserved keyword in JavaScript this app you can name it whatever you want you could call it banana if you want but well don't call it banana but just call it something appropriate but you can call it whatever you want now this class this is creating an instance of app and that instance is extending react component and react component is an object that lives in somewhere in dog modules and yeah that's all this line is doing and then you open up the component with a pair of curly braces okay so we have initialized a component but how do we actually display the data that's going to go inside the components well you use the render method the render method is the built-in react method that comes inside of react components and this render method is going to return something called JSX JSX is not HTML even though it looks like HTML it's basically just JavaScript code running in the background and this is why we need babel see this code this looks like HTML but it's not HTML this is in fact JSX and then babbled behind the scene convert this into JavaScript that the browser's can understand so react and babble are doing a tremendous amount of work behind the scenes just to convert this thing into normal code okay so Randa that render method returns JSX now one thing to note about JSX is that you can only return one parent element you cannot return another div or another paragraph anything that you want to return has to be within one single live so let's say that within this div you have a paragraph that says come on hello and then maybe a h1 that says so this Emmet is a pin in the ass to work with and react files so H 1 that says yoke and yeah so this has to be within one parent component you cannot put this outside like this because react is gonna be angry so make sure that you only written one parent element and within that parent element you can put in whatever you want okay now if I save this and i refresh this and I look back at the screen I get this big fat error in that success expert defaults imported as app was not found in up what this is saying us is back in index yes we are first importing react on reacts then importing react Tom from react then we are importing this index or CSS file and now right there we are trying to import react sorry we're trying to input up the app components from this add file yes we have created this component there but in order for other files to import this component successfully we need to first expert this right here at the bottom so I'm gonna say export defaults so now I'm telling this app I'm telling this file that you need to make this component available for other files to import and I'm doing this by saying export defaults followed by the name of the component so now back here in index ah yes I'm importing that component from this file lives in the relative paths of app.js and one thing you need to note is that if you are importing a JavaScript file that you have written then you can leave off the GS extension so you are importing the app components from this app file and then right there you're using react Dom render method so react Dom don't render what this is doing it's telling this file to render out this component up to this root element which is document or get element by ID and then root and in if you go back to index.html you can see that this div indeed lives right there so it's grabbing visited and it's telling this file that reactor render render out this element to this div so reactant render is essentially a method and the first argument it takes is the name of the component and the second argument it takes is the name of or the location of the div or whatever you want to insert your component into and most of the time is just one major wrapper div so you can just leave it there like it is and you'll be good to go so now if I go back to the browser I should have hello and you well you might be thinking that was a lot of effort just to put out hello on the screen but believe it or not this is the underlying concept behind react this is how react works okay so if you remember in the beginning we talked about multiple components that we put together into one major component so in our case the major component is app how do we actually go ahead and create our tiny components that we can put inside right there and then rendered them out well if you remember we had a titled component a form component and a rather component so let's just go ahead and create them but I'm not going to go ahead and create these three components within this app dot J's file because doing that is just going to kill the whole purpose of react the purpose of react is to have multiple files that contain the UI code and then you can import those files into one single file and then that one single file is what gets exported onto the main index dot HTML and then that index dot HTML is what you see in the web browser okay so how do we actually create these components first thing within the source folder I'm gonna type in I'm gonna create a new folder called components within there the first thing I'm going to do is I'm going to create a title component and that is going to contain the titles for this verb with this application so again like I said before you begin before you even do anything in your react file you have to first import react from yet excellent okay so now next thing class titles extend react component okay and then react components there's going to be a render method and the render method is going to return a blob of JSX so right there I'm gonna say I'm gonna create a dip and within the day it's going to be a h1 and this is gonna say whether find her and then a paragraph tag and this is going to say find out temperature conditions and more okay so again yes we are creating this components but in order for a plot just to use this component we need to first export this and then import this into a process so I'm gonna say export default titles now in that block Jas I first need to import this so import titles from and then relative path and it lives in I need to drill down to components and then titles so titles OTS and I can leave off the day extension so I have imported it but it's still not going to show up because we've only imported it but we haven't rendered it out so remember whatever we render out is what we get on the screen so if I want this titles component show up I first need to render it so to insert a component you type in a self closing HTML tag and then there you type in the name of the component so if I press save now I get failed to compile title is not defined oh its title is actually my fault okay so I get by the finder and then the subtitle there as well excellent okay next up I had a form component as well so I'm gonna do I'm gonna create a form file form yes and again input react from react and then class from extends react component render return and for now I'm just going to return a dip and I'm gonna say form component so again I'm gonna export this export defaults from and input this into the appliques input form from components slash form and I can leave off the extinction so now I need to render this out so right there I can save form and there we go form components okay the last one that we need is the rudder components new file weather is so I'm going to go ahead and just copy this and paste it there so the T so I'm gonna change this to weather okay so back in approaches I'm gonna say imports weather from components and then weather and then last thing I need to do is I'm going to go ahead and render this out so now I should have all the three components that I need for this project okay what next well let's do something more meaningful now we need to make an API call to a URL and that URL is going to come from this open weather map website so before you even do anything you need to first create an account and you need to obtain something called an API key API key or API tokens are Ave for websites to know that you are trying to access the data from from their database so then you make an API call to this website it will get associated to your email account and then when you make the call this website is going to use is what this website is going to use your API to figure out who you are and what kind of data you are trying to access that is the whole purpose of using API keys so once you set up an account and then you sign in so I'm just gonna sign in no this is create user I need to sign in okay so I'm gonna type my email my password and come on okay so if I go to API keys you should have yours ready over there as well so please don't copy mine just take just grab yours it's very quick and it's free so copy this and for now just paste it to your code editor so just make a constant API underscore key and place it right there okay now what's the URL that we are going to make the call to the URL is this one right there so as you can see if you try to access this URL you get an object and this object itself contains a bunch of more objects that contain a bunch of data and this is these properties are what we are going to use to grab the data from this weather API so so as you can see it has the temperature property the humidity property the country the name of the city and Ola and this is what we're going to use to grab the data from the website so I'm going to copy this URL okay so in react components there's built-in methods as well as the methods of your own that you can create so I'm going to go ahead and create my own method and I'm gonna call it get weather and I'm going to set this to another function now arrow functions were not allowed inside of react components until react 16 arrived but arrow functions basically allow you to use the this keyword independently so in previous versions of react you would have to first set up your function like this and then you would have to set up a constructor and then within the constructor you would have to bind the your method so you have to do something like this dot get weather equals this dog get weather bind dot this and you still need to do this if you are what if you're using any version of react that is below 16 but since the advent of reaction 16 you can leave off the constructor altogether and you can just use arrow functions now arrow functions like I said they allow you to use the disk keyword independently so wherever you use this this keyword it's going to mean that it's bound to this function so this keyword there always gets cold it's still going to be bound to the component okay so how do we actually make the API call well first of all I'm going to create a constant called API underscore call and now I'm gonna use something called async await async await is a great great great way of making HTTP calls and it just makes making web requests extremely easy so watch how easy it is right before you declare the function put in the keyword a sink and then when you are actually going to make the call type in a weight and in this case I'm gonna use the fetch API to make the API call fetch API is one of the newer version newer method in JavaScript so all you need to do there is you type in the fetch keyword followed by a pair of parentheses and then in there you just throw in the URL that you want to make the call to now in this case I need to inject this API key as well as the values for the country and the city so I'm going to use something called template strings template strings are just normal strings but they allow you to inject the variables that you have defined within your files so I'm gonna piss my URL in there okay and I'm going to this a PPP ID is where the API key goes so I'm going to go ahead and delete all this right about till there and I'm gonna replace this with this constant so a PP ID equals dollar sign curly braces and then this one right there okay but this is not going to do anything just yet because we are only creating a variable that makes the call that that contains a function that makes a call to this URL okay the very next thing that we need to do after we have made the API call is we need to convert the response to JSON format JSON stands for JavaScript object notation and essentially it just converts the data the data that we get back from the API to a readable format that any programming language can understand that's all Jason does so to do that I'm going to say Const data equals a weight and then whatever we get back from this API is going to get converted to days on with this method so API call JSON and then parenthesis so you might be used to seeing something like JSON duck parse or json stringify and this is still useful but watch how easy this is in fetch API all you need to do is you need to pass in the variable and then you just call in and you just call the JSON method on it and boom you're good to go okay so again we have made a constant that's taking in a function that's making the API call and then we are converting the API called the JSON format and we are assigning that to a constant called data okay but what do we actually do with this data let's think about it so currently all I can do is like in this console dot log this file this constant but it's not going to do anything because we are only declaring this function there we are not actually calling it anywhere so how do we actually make sure that this function gets called hmm well this is a bit of a problem then isn't it now I'm going to introduce YouTube props but before I do that I need to fill out this form component so return a form and I don't need the action so I can just delete it and right there I'm going to create a couple of inputs so input oops what's that done Oh input type equals text and then I'm gonna give it a name attributes the name attribute is what we are going to use to fetch the values out of these inputs so the first one's gonna be the city placeholder equals city and then I'm just gonna go ahead and copy these and paste them right there so this one's gonna read the country and this one's gonna be the country as well and the last thing that I need for this is a button because I need to submit it somehow so button get weather okay brilliant so let's see if that's showing up it's not showing up so import weather from weather dot J's constant okay so what's broken there okay unexpected token so this is on source app digest line number seven apt yes line seven oh okay there we go that should fix it okay so I am getting the input back and the button but it's not gonna do anything just yet so how do we actually make sure that when we press this button this function gets cold well I'm gonna use something called props props are pretty much like HTML attributes so you can name them whatever you want in my case I'm gonna call mine get weather and I'm gonna pass this on to form component so the form bill so this form component will have access to the props in this form J's file so the props name is gonna be same as this get rather and it's going to get set to a JavaScript expression and this is gonna say this this refers to this app component so this dot get weather so all we are doing here is we are setting up a probe and we are setting its value to this function and since we are setting this up in this form component that means we have access to this function now in form okay so that means we can now use this method using something called this dot props here I can say on click or on submit actually because when we press the button this quote this form is going to get submit so I'm gonna say on submit equals this dot props dot get weather okay so now again we are defining a method we are making the API call and then we are trying to console dot log whatever we get back from the API and then in the in the form component we are setting up a prop called scat weather and we are setting its value to this function and then back in from dais we are setting up a attribute they react attribute called own submit what this is going to do is it's going to call in this thought props get weather which is this one right there so let's see if that works I'm gonna open up my console and if I press this button I don't get back anything just yet and the reason for that is watch what happens as soon as I press this button keep an eye on this far back on right there so if I press the button they go through a full page refresh so the object appears for a while the response from the API appears for a while but then it disappears because we go through a full page refresh now to prevent a full page refresh it's very simple give it an argument called E and this is nothing it and this is nothing specific to react this e is just event object in JavaScript so you can say e dot prevent default what this is going to do is it's going to prevent the default behavior of this component when we press the button okay so now if I press the button I get this object back okay and in this object there's a bunch of method there's bunch of properties that you can use to get the data out and that is exactly what we are going to do and this is very important what we just did you don't prevent default because IDO prevent default signifies single page applications and we basically use react to create single page applications so yeah we are all good to go now so now that we are successfully getting back this data in the console what do we do next because we don't need this in the console we need this on our UI on the screen so how do we actually make sure that whatever whatever we get back from the API gets displayed to the screen well the first thing that I'm going to do is I'm going to change these hard-coded values to dynamic values because we don't always want this to be Manchester and this to be UK so how do I do that well if you remember in form Jas we set up something called name attributes in the input so we have the city name and then the country name and we are gonna use this name attribute to access the values of this input so back in our chest I can use this event object to grab the value so I'm gonna set up constant count City equals e dot target the elements dot name and then the name for the first one is City and then its value and this value is whatever we type into the entered okay so I'm just going to go ahead and copy this and paste it right there when I say can't city and I'm gonna change this to country so cou ntry country okay so now how do I actually put these values into this URL so right there it says a query string and then the first one is nameless city so in this case it's Manchester so I'm going to replace this with a variable city and the one next to it is the name of the country so I'm going to replace this with country okay so now let's see if that works if I type in the name of the city Manchester UK let's see what we get back we get back cannot be property city of undefined so target elements named city dot value okay so what's happening there hmm let's go back to fun name equals city name equals country and in Apogee as a target dot elements dot name of a I shouldn't have had a name because name is what we are using to access the values so my mistake just forget the name okay so now we should be alright for that so my chester UK get weather and if I expand this object you can see it's Manchester there but we were we were getting bunch of already so let's try something if something different I'm gonna type in London there and I get another object so right there you can see it says London and there is as much a stir so that means that our inputs are working perfectly fine okay so like I said I don't want to display display these values in the console I want to display them on the screen so now I'm gonna introduce you to something called state state is an object that lives within a component and it's responsible for keeping track of changing of changing data within a component so that change could be the result of the user interaction maybe a user clicking a button or a user submitting a form but generally it's just some sort of interaction with the application that causing that causes the data to change okay so how do we actually initialize the state we say state equals an object now if you have worked with react before then you might remember doing something like this like setting up a constructor and then passing in their props and then saying super props and then they start state equals to an object but this is this has been deprecated in react 16 like I said in react 16 you can this ditch the constructor altogether and you can just begin working with state or your methods right away so state is an object okay and this object contains key value pairs so let's think about it for now what do we actually need we need the temperature which is this right there we need the name of the city we need the name of the country and then we need humidity as well and we also need these this description okay so we need five pieces of state to describe the state I'm gonna say temperature and this is something called the initial State okay this is the initial state of the object and the state is only going to change once we press the button okay so for now let's just say undefined next up let's give the state property cold city this is going to be undefined as well next one let's give it a country this is going to be undefined as well next up humidity again undefined description undefined and let's give it an error property as well and we will come back to the error in a moment so right now just follow along and yeah so this is our states that that we need so temperature city country humidity description and error okay so now that we have all this defined how do we actually make sure that this state contains whatever we get back from the API so right here in the function I'm gonna set the values of this states so now you may be tempted to do something like this dot state temperature equals blah blah blah whatever you get back from the API but no don't ever do that don't ever directly manipulate the state okay bad bad bad practice use a method called set state so in react there's a built-in method called set state so this don't set state and this contains an object and bit in there you can describe your state values so in this case temperature now what do I want to set it to well if you go back to let's just do a quick console.log if you go back to the console where does the temperature live so this main object is the data object because this is what we have declared right there so to access anything we have to start with data dot and then anything we want to access so what do we actually want here well so data dot and then the temperature lives in this main object said data dot main temp okay data top main temp so now we have successfully updated the value of our temperature state once we press the button okay next up city where does the city live so data dot mmm it's just named data dot name okay next up country so data dot says dot country okay data that says doc country and this is just the basic bare bones of working with AP is all you need to do is you just need to find your ways of the properties and then you need to work your way through that's all it is to api's okay and next up we have description humidity and this lives in data domain humidity data domain humidity next up description so description equals right so data dot weather so this is a bit different because this is returning an object and this is returning an array so we need to select the index of zero and then within the index we need to select a property called description so data dot it's the weather object so weather and then the weather object contains an array so that array is the index of zero so data talk weather zero dot description excellent okay and for now we can just leave the error undefined or an embrace ring it doesn't matter and like I said we will come back to this in a moment okay so now that we are actually getting this response how do we actually make sure that the value of all these states is displayed right there on the screen now this is where we are going to use the brother components currently it just says brother component and I'm going to get rid of this so how do we actually pass these values to the rather components well if you're thinking that we're gonna use props then you're right so right there I'm gonna say temperature equals a JavaScript abstraction a JavaScript expression this dot state dot temperature okay I'm going to split this up into multiple lines because it's gonna be a bit of a long one so temperature next city equals this dot state dot city next up country this dot state dot country okay and next one's humidity so curls a JavaScript expression this state humidity next jobs description equals this dot state duck description and let's also pass in the error so this duck state the error so now that we have defined all these props that means that we have access to these probes in the weather day as well so right there if I say this Tod props dot temperature let's see what we get back currently we don't get anything that because as I said in the beginning the values of these states is undefined so nothing is going to show the values of these states change only then we press this button so if I say Manchester UK and I press the button get whether I get this temperature displaying right here on the screen and this is fantastic okay so let's just do the same for the other values as well so they stop drops the temperature this dot props that city actually let's just do it in a more symmetrical way so the first one is going to be this property and then there's docprops/custom.xml the Swagger's back so one sister UK get weather so Manchester Great Britain 0.31 one hundred percent humidity and mist okay so be your correctly getting all these back let's just go ahead and change this component a little bit so I'm gonna say this is location and this is gonna be just one single line so this start props are city followed by the name of the country so location and then this is gonna be temperature so and then a JavaScript expression and this is gonna get set to this this is going to be humidity so and paste it there and the last one is description so I'm just gonna say conditions and paste it right there okay but now we have a problem because we are getting these empty keys without a value but we only want these to display once we press the button how do we do that well first of all let's just turn these into paragraph tags so we know that what we are doing okay so P tag P tag just so they they show up on a separate line so that's the only reason I'm doing it so last one P tag and so yeah these are still showing up I don't want these to show up until I press this button so how do I make sure that this doesn't happen well you might be thinking that we could do something like if this dot props temperature equals true then render out the paragraph but know these if-else statements and all these pure JavaScript things they don't exist in react they're not allowed in react so to do this we have to make use of something called and operator okay or conditional operators so we can say starting our sentence create a JavaScript expression we can say if this dot props dot city and this dot props dot country only then do we want to display this paragraph so what this is doing is it's saying that if this dot props at City returns true if this dot props our country returns true and only then do we want to display this paragraph so if you are familiar with the and operator it means that all of the conditions have to be true in order for it to execute so in this case we are getting the city back when we press the button B again in the country back when we press the button and when these two conditions meet we get this paragraph rendering out okay so I'm going to do the same for the temperature as well so starting with a curly brace this dot props temperature and render out the paragraph so if this dot props temperature exists blend it out the paragraph okay same for this one this got props dot humidity then render it out the paragraph last one this dot props and then actually I think is this props description yeah this dot prop start description then render out this paragraph right there so now if I go back I can see that all of those paragraph have disappeared so now if I type in the city and the country and I press get weather and this is what we wanted to do so this is working brilliantly rip breathe Lian sleep okay sorry is literally three o'clock at night and my brain is a mush right now so pardon me for any mistakes but we have a problem what if the user tries to press this button without entering the values let's do that get rather there we go our application breaks it says cannot read property of undefined and the reason it's saying this is because as you can see right here at the beginning the temperature is undefined and then right there we are trying to fetch the data that of something that's not even been cold because if if the city and the country don't exist then it's not going to be able to know what we are trying to get back from the API and that in return it's going to give us an error okay and we don't want that so to get rid of this we can say we can make a check so right about there just before we set the state and console dot log the data I can say if city and country then run this code what this is doing is we are making a check we are making a check that if city so if city if city's value has been answered so if this returns true and this returns true as well only then do we want to render out this code otherwise do nothing for now so if these values exist then it's going to return true and if it's an empty string then in JavaScript and empty string which is a false so if this if these two return a false then this code is not going to work so now if we go back to our code and we try to access the weather without entering any values as you can see it's not going to work it's gonna give a error in the console but otherwise it's not gonna work the application itself is not going to break okay excellent now next up if this is working if if we get the return from these values then we want to return true then we want this code to run else let's just make use of this error state right there else I'm going to go ahead and copy all this paste it there and I'm gonna get rid of all these I'm gonna set it back to undefined this one this one because if we are getting false data then we don't really need to access all these values back should not mean so this one's gonna say please enter the values so how do we actually share this error on the form on the weather so if you remember we passed this error as a prop to the brother component so right there I can say if weather if error exists so if this dot props the error then render out this plot props dot error okay let's see if that works so if I try submitting his phone without any values I get this error back so please enter the value excellent okay now if I try to go ahead and fill in the values and the press the button I get the correct response location Manchester Great Britain temperature is very cold at the moment 0.31 humidity 100% and condition is still missing let's try it another one London okay so it's not working again cannot property temp of undefined so did I press in the right location London UK I probably miss type something okay so London UK be getting this back correctly so if I type in New York and right there are say us come on right there say us press get whether I get the weather for you New York okay and this is fantastic so this is pretty much all that we needed to do so again let's just do a recap of how we worked with this application so first up we created a react component called app we rendered out a few dummy components to start with and then after that we created a methods called get weather and we did a bunch of stuff in there we first made the API call we converted it to JSON and then we grabbed the values of the input forms that we have and then we set the States of the state defined above there so after that we made sure that the values were entered correctly if they weren't entered and we are going to render out this error okay now right there in the form we passed in a prop get weather and we set its value to this function so this function is going to run every time this button is pressed its back invalid yes we are rendering out these tiny paragraphs based on the presence of these props so if this props exists only then these paragraphs are going to get rendered now there's a bunch of things we could improve about our application so the react components can be of two types there's class-based components which we have used in all the files and there's stateless functional components now stateless functional components as the very name describes it they don't contain state so stateless functional components they don't contain any state so how do we actually work with stateless functional components so in the app components we do have state coming on so we need it to be a class-based component but those components that do not contain any state they don't need to import all these class properties they don't need all this functionality just do render out some UI on the screen so to make this simple I'm going to cut this out and to begin a stateless functional component you type in Const followed by the name of the component and then you initialize it using the arrow function and then right there you say return and you just paste it right there and there we go like I said this is not necessary this is just to make your code a little you know a bit more decent so you don't have to input unnecessary functionality in your files but we have a problem currently this is not going to work and let me tell you why so it gives us a big big big fat error cannot read property city or one defiant now if you go back to whether yes you see we are using something called this dot crops now first of since we have deleted the class keyword that means we cannot use that this keywords anymore okay not in the return statement at least so how do we fix this I mean we have this keyword as well as this props I mean there's this props coming from there's no mention of props in this function so we need to fix this so first of all let's just go ahead and get rid of this this keyword okay so to do that I'm just going to go ahead and set multiple courses so this and then there's there yeah it's gonna be a fair bit of this I do apologize okay so nearly there right second last and then last so I'm gonna go ahead and get rid of all of these but we still have a problem because we are still trying to access the props within the component and it says the props is not defined so in order to make sure that this works we have to give it an argument called props so if I say props there and if I and if I save there we go it's working back to normal so another thing that we can improve is if in arrow functions you are only returning one single element which in this case is the div now don't mistake these for multiple elements because at the end of the day we are only returning one single root element which is this one single dip right there so if you are only returning one single element you can actually explicitly return it by getting rid of the return keyword and the curly braces and replace it with a pair of parentheses this means that you are explicitly returning something from the error function so you can paste it right there and there we go yet another thing if you are only returning one single argument in an error function then you can even get rid of these parentheses so watch how neat this is this is a lot more readable than what we have in the than what we had in the past so going back to the app making sure that it's working as expected yes it is so let's just go ahead and convert the rest of the components into state less functional components okay so informed OJS do we need do we have an estate nope so I'm gonna go ahead and cut this out delete all this and I'm gonna say Const form equals props and then I'm going to explicitly return this one single form element so I'm just gonna put it there format it back and there we go next up titles do we have any state in there nope so I'm going to go ahead and cut this delete all this and I'm gonna say Const titles equals in this case we don't really need any props so I'm gonna have to put it D I'm gonna have to put the parentheses there so right there I'm gonna say there we go okay so cannot read property get weather of one define so form the on submit equals oh I forgot to exclude the dis keyword so there we go now it should work so again testing it out first of all let's just try submit the empty form so again this returns an error and if I press if I enter the values and I press this get whether I get what I want so let's just get rid of this console dot log as well so yeah there it is okay so this is all that we need as far as the logic of this app goes so we needed a input to work properly we need the state to work properly and we needed the props to work properly and these are all working just fine okay that's all that we needed to do now in the next video I'm going to go ahead and add the star link to this to this application so by starting I mean I've already defined all the styles I'm just going to go ahead and add some class names to is this dibs and all these elements right there so if you wanna watch me do that then come ahead come with me to the next video if not then I hope you learned something from it I hope that solidified your react understanding and you can make this app more functional you can grab a bunch more values from the API and you can work with you know you can add more functionality to this app so the main reason of this video was to show you how to work with APs and react rapid and is creating a simple to do this application so I hope you learned something from it and if you liked it just let me know on the DM on Instagram and if you want to watch me create something more like more of these tutorials that let me know what you want to create next with me and I'll be happy to do that so again thank you very much for watching and I'll see you next time bye

Channel: HamScript

Views: 244,847

Keywords: javascript, react, react.js, js, react for beginners, web development, web design, web app, app, web applicaiton, API, js api, programming, html, css, react tutorial, javascript tutorial, react tutorial for beginners, api tutoria, react api tutorial

Id: 204C9yNeOYI

Length: 71min 0sec (4260 seconds)

Published: Sun Jan 21 2018