Building your first React application in 75 minutes or so

1. What is React?: Hi, Maurice here. Welcome to this introduction course or react. So what is react as to react? Website says. Reacted is a JavaScript library for building you for in faces. So with react, you can build user interfaces for Web applications. No shell native applications using a thing called to react. Native. We're just going to look at Web applications, so we're going to use react to build a weapon application. You. Why? So who else is using react? Turns out many companies are first folders Facebook, which should hardly be surprised because when you dive into wrecked, you'll learn that Wrecked is actually developed as an open source project, but with the core team at Facebook itself. So the Facebook website is developed using Rex. But it turns out the Facebook website was not the 1st 1 When Facebook acquired Instagram. The Instagram website was actually the 1st 1 developed with react, so they were leading the back with our many others. Netflix, Airbnb, Twitter, what's up? And many many other large companies are using react for their weapon applications, but don't just large completes. There is a long, long list off applications built using wrecked. If you want to see this list, you can go to the wrecked website. Here's to react website where you can get more information about react. One of the things you can do is go to get a proposal tree. Now I don't recommend to dive into the react source code itself. It's not the simplest off good basis to get started with, but what you can do is go to the wiki page and hair see side choosing, wrecked. And here you can see a long, long list off applications built with react all the way to the bottom. Now this is by no means complete. Their lots off mum public on probably public websites is well built with reacts which are not in this list. I've worked on quite a few react applications, and there's none of them are actually public Taurel in house applications, some quite large, but they're not on this list. But why not make your application public and put it on a business as well? Kind of cool, Right? So in this class, we're going to have a little class project. We're gonna take this site, the movie database. This is not actually built with react, but that doesn't matter because they've got this really nice a p I. And using that a p I. We're going to get the list off the top rated movies at the moment. Of course, that list constantly changes, but we're gonna build our own react front and to show this list it's looking to be exactly the same. Was this but more about that in another video? So join me in the next video, where I'll tell you a bit more about who I am, how I got into development where I live aan den. We can get into the meat off building react applications. See you them. 2. Personal introduction: hi English here. Welcome back to this introduction course or wrecked So before I'm going to tell you all about react Time for a little personal introduction. It's always kind of nice to know we're talking to. So I'm based in the Netherlands, Europe and the Netherlands is a beautiful country, especially in spring, with all the tulips are out, We've got some lovely beaches and, of course, great windmills. And all of these pictures were taken within 20 kilometers from from where I live. So pretty good place, I think I'm also happily married twits a wife and a son. But that's probably not why you're listening to this video. So let's get back to chauffeur. I've been an independent. So for developer and instructor Shins 1995 In fact, I've been developing so far longer than that, and I started way, way back on one of the first be cease using Turbo Pascal have been doing Web developments ever since around 2000 so almost 20 years I've also being a Microsoft most valuable professional for more than the decades now. I'm also the altar off to React newsletter, weekly newsletter, with all sorts of news about react and pointers to good articles. You can subscribe to it to stay up to date and read all about react news. So to subscribe Goto Bit Dog Leash Last React newsletter. Make sure to get the capitalization right. It needs match exactly filling your name and email address and you'll get the newsletter every Wednesday. So you want to get in contact with me? You can use Twitter or email or go through my website. And I had to recommend you do because I really want to hear from you. Tell me what you learned in this course and tell me what other things you want to learn about reacts about to react ecosystem or maybe something else from Web developments. JavaScript view angler, Tell me about it and I can tell you all about it, but just let me know what you want to hear. So join me in the next video when I'll explain to you all about why you should learn. React. So see you then 3. Why learn React: hi res here. Welcome back to this introduction course Old wrecked. In this video, we're going to talk about why you should learn react in the first place. So react is the JavaScript library for building user interfaces. But I could say the same about a little of other libraries or frameworks like Angler View or even Jake weary. So why bother? Learned react? Well, it's used by many companies. Off course. It's used by Facebook. They created after robe and use by Instagram, the first website where it was actually used. But it's also used by large companies like Netflix, Airbnb, Twitter and many, many others. So you're a good company using wrecked. So I would argue that using react, make sure better programmer. So some of to react advantages. Well, it's got a large community that's always good. It's small and fast. Well, who doesn't like that? It's stable, and there's a simple and predictable A p I. Another great feature, and you can trust that it's stable if the reacting changes to react. AP I They are responsible for implementing it on the Facebook shorts coat so they don't want to change the AP. I just for the sake of change. They need a good reason. It supports your oversight rendering, which is great. If you're worried about church engine optimization and the likes, it's open source so you can get to the source and even contribute if you want to. And it's got a dedicated team for Facebook who are working on it, but not just working on it because they like it, but also being paid to work with full time. But there are also some traders with reacts and whether their trade of some note might actually look point on your point of view. But an important one reacted is created by Facebook for Facebook. So it's driven by the Facebook needs. And if they differ a lot from your needs, react might not be the perfect choice. But for lots of applications, it's great. Another thing is to mark up inside of JavaScript. Writing J Sex coat is actually pretty good, but not everyone agrees with it. There are some people who dislike that. I want separation off markup from JavaScript. That's okay. If that's your thing, reacts Probably note for you. Results are run thumb concern, the way react is so fast is by comparing some stuff, which means it keeps some additional stuff in memory, which, of course, is big over memory pressure. It's not much, just a bit, but that might just be a bit too much for you. Another thing. Reactors. Not very opinionated again, You might like that you might not. The problem might be that you want a lot of guidance, and react doesn't give fuel that science. It's pretty open. You decide how you want to solve problems and they don't really care. They leave it up to you. I like that lots of other people like that. But it might not be for you. Just keep that in mind. So Reactors Poplar. This is to get a proposal to for wrecked, and you can see there are more than 88,000 stars. So how does that compare to some off the competitions? Well, here's Angler five framework to successor to the popular anger on framework. It's quite popular, but it's just has 33,000 stars. Now, 33,000 stars is nothing to be ashamed off. That's pretty good, but it's nowhere near as much as react us. So if you is another popular you. I library. It's got 83,000 stars, so it's almost s popular as reactive. Get up millions. So how about counting downloads? Because there are lots of where you can get popularity. So here is to NPM page for Wrecked. You could see on the right insights that there's more than eight million downloads last month. So how does that compare to the competition? Well, if we look at angler in this case, have taken a look at the angler core library, which is always downloaded. When you download Angler, it's a two coma, six 1,000,000 downloads last month. Nothing to be ashamed off, but nowhere near what reactor. So how about few? Well, there even lower. Almost 1.2 million. Still pretty impressive for library, but nowhere near as many downloads as reactive. So however you look at these figures wrecked s pretty popular and urine goods company infusions. So see you next time when I will tell you all about what you'll learn in this course 4. What you will learn: hi memories here. Welcome back to dis. Introduction course will react in this video. We're briefly gonna discuss what you will learn. So the main goal of this course is to teach you how to get started with wrecked. I'll explain why I reacted so awesome and why you'd wanna built Web applications would react in the first place. I'm kind of assuming you already know javascript terrible. But as lots off react, developers use more than style. JavaScript will cover some of the more more than Java script syntax, which you might not know yet. Another important thing is what you will not learn. We're not gonna look at every possible way to create components or things like that. So we'll leave that for another course. We're also looking to use a lot of external libraries like reduction or react Writer, will you? Some. But most of it will just leave for another course. Most are not gonna take a look at unit testing. And in fact, I'm gonna leave out some best practices just to keep things simple. So see you in the next video when I'm gonna explain some off the modern JavaScript in tax 5. Modern JavaScript: I'm Alicia. Welcome back to this. Introduction course will react in this video I'm going to talk about from off the modern JavaScript constructs were going to use. So we're going to talk about glasses, raid Aled map fete, arrow functions, templates, strings. Constand led to define variables importing and exporting functionality, object restructuring and the Asian Kuwaiti works. So let's dive right into the coat. So here, after the shorts array off people to people in there and the consul cloak to print them, if I run this coat, it's just gonna print outs those objects as this. So let's create a people print or class to print those out. So we created constructor. It takes tow collection of people. Safety is on property on the object using the stolt, and then we add a function to print them. Now we can construct an instance off the printer objects with the new keywords. Once we have the object, we can call the print from Kill it, and the output is exactly the same as it was before. No human. We don't want to print each personal objects, but just the first name we could map the people collection into just the first name strings . So the map function takes a function is parameter and will be called once for each objects in your A and we return whatever we want in the newer right. So in this case, the first name you can see you were just printing the first thing. If all we want is a simple function like this, we can actually use a shorter syntax. Yuzhin Febrero functions so removed to function key works and food. In fact, they're on there. And if all we want is just to return something we don't actually need to go block and overturn in there, we can just put the expression in there, which will be the results. So they will receive the first names being printed. How human We want a full name. We could use drink concatenation to take the first name of space. And then the last name that works just fine. This is a great place to you. String templates. You create strength templates with the back dick. So that's normally on the left top off the keyboard in the inside, with dolar and curly braces. You can put expressions in there, So here we've got strength template, which returns exactly the same result. These can even be Bolte lines, so I can add a few lines in their run them and you'll see the slash and character being printed for new line. So in this case, we don't actually want new lines. This is just fine. So another nice case off the fifth Arrow function is that it preserves to this. He worked in a function. So to see the behavior, that's just great little helper function that takes it from from reference and goals it. And that's gold at with the printer that prints I remember right now that just prints the full names off the people. But if we call it this way, it actually returns an error because inside off the function, it doesn't know about the disc e work anymore. So it complaints about people so we can solve this with the fifth Arrow function as well. So in this case, the print better function because it's defined as a feathered arrow function. Actually, remember, store what this points to when it's going to be called, and it does help. If I at the gun full, don't look as well so we actually prints the output. It's run just fine, but we didn't see in the output. And there we see the full links again. So this is commonly used to react when we buying toe event handlers and the likes. So one thing with this printer, we're never gonna change it. So he said the far would be used to newer Coast. That's shows is that we're not gonna change it. We can do the same with the people array at the top. The coach will behave exactly the same. But if you try to change one of these variables, it would actually go to run time error because we got reassigned. Printer. Another nice new capability is being able to export and import data. This case we've got the people file and it exports five different people so we can import them here using the import statement import people from and in this case, we're going to use relative bath with thoughts Slash to indicate it. It's a local foul and not something imported from MPM, so the goat runs the same, but that would prince five different people. Another frequently used mechanism these days is opiate restructuring which works both on the race and little objects. So suppose we want to get the first person from the array of people and then the first name from that first person and printed so we could do to traditional way like this. We see your first name off the first person, Hilda, but we can use a radi structuring for this and opiates restructuring in this case because toe variable name first name was to say Mr Property name. I can do that with a shorter syntax with the curly braces run to variable name. It will also do the same with and the rate. So by adding the square brackets running time saying, Take the first object from the ray, take the first name property from that and print it. Or I could say, think this first name from the second person in this case, the first person would be assigned to the underscore that we take the first name from the second person, and they can also get the other people from the array. So, you see, we print the first name of IRS, and then we went to lost three people in the people array. So another nice capability is a Shing Wait here. We've got a simple function which would reefs Chuck Norris quote and the hugest to fetch a p i, which returned to promise. So the first return to promise with responsible objects. Then we need to call the Jaysh in functional nets, which returns a promise with the data. And then we need to have a catch from Shalom there in case off in the earth. So let's rewrite this with Asian Kuwait's. In this case, we're going to call the fact function and we're gonna wait the results, which is to response. Then after that, we're going to call the response delegation to get the data again. It's returns for promise. So we used that weight and that we can print outs. That's joke. So because we're using a weight, we have to change this function a bit declared as an asynchronous from Shin with the Asian keywords. And you see, it works perfectly fun. I was human Greece in error here so doesn't return vantage ation if we just run, an error occurs between ever see there, So we need to add some error rattling. We can just wrap everything in a normal try. Catch just like singleness coat, and there will see the error being printed. Let's fix to your well so we actually get jokes back now. Another nice thing with this syntax is that we can use regular control statements we've been just using. If statement here to see if the response was OK and only then gets a J. Shin and print a joke. All of this is much easier to do than with the promise school backs in Texas. So let's do a quick recap. We use glasses because it's familiar. Opiate torrent. It's in tax. We know. For most other programming language used the new key work to create instances. Arrayed old map issues to turn an array into and a new array off a different shape. Each item is mapped, usually map function. Fete Arrow functions are a nice way to declare those mapping functions or other function. For that mother template strings are easy way to compose strings. Using different variables. Use constant let's for variables. Ghost won't let you change it quite often. What you want. Use important exports to combine different functionality, much better than using a traditional global variables whose object de structuring if you just want to get a few properties from? Nope, yet another common thing in react. They use a sink await with the fetch a P I or, for that matter, with any promised based A P. I really nice. So see in the next video, when I'm gonna explain all about the class project. 6. The class project: I'm re share. Welcome back to dish. Introduction course will react in this video. We're going to take a quick look at the cloths project we're going to do for this course. So we're going to use the data from the movie to be to create our own movie application. So it's gonna look like this. We'll have a nice layout with material design as to guideline guard for our different movies. And if you click on the learn more button, we'll get more details. We can also shirt like here. I'm searching for Star Wars at the right hope off the screen. You could see the search criteria. You want to try the application here. It is a working version. We can click on this link and it will start up. The application host will now look over how to host the application there as well. So here you can see the details off the Good Godfather, or I could search for Star Wars. Take a look at one of the movies there, so see you in the next video. We'll start by creating a new reactor project 7. Creating a new React project: Hi, Maurice. Here. Welcome back to this react introduction course. In this video, we're going to take a look at creating a new react project. Most people start a new react Projects by Yuzhin Creates React app Great React, A piss utility developed by the Facebook team and makes it really easy to get started with the new React project. That's great. React App is a note application you need to make sure to have noticed old toe your development machine. This is purely for development purposes and not needed at runtime at all. So let's get started and scaffold out our application. First, make sure that note is installed with the correct version, so I've could note 8.9 point one, not delay just but good enough. Next, we need toe use, NPM toe a stall, create react app, and we need specified a desk G for global flag. I've already done that, so I'm not going to do it again. Using creates react up, weaken scaffold out the new project Really simple. Just go create react app. Specify the project name for movies in this case and press enter. It will create a new folder with the project name, create some forced files, start installing packages and that's gonna take a bit of time because the development packages are quite large. And once that's done, we can actually navigate to the folder and start the application using MPM. Start and there are applications. Starts up in the broad for congratulations. You've just got your first react application running in the terminal window. You can see that's it. Opens to porch local host port retirement and on the local I p address sport three thousands. So see you next video where we're going to explore the project we just created. 8. Exploring the project: Hi, Marie Share. Welcome back to this introduction course from Wrecked. So in this video, we're going to explore the project we created in the lost video. Remember the video where we used create react up? Well, that's what we're going to look at now. So if we wouldn't take a look at the coach and later edit it, we're gonna need some kind off editor. I'm going to use visuals to deal coat. You can use it as well, or you can use another one. It doesn't really matter. React doesn't really care what other to use. I just like visual studio code because it's really powerful and easy to use. So that's a life into the coat. Here we see the generated project at the top. You see the public folder or tree file stared FF Aiken Index told H Mill in the manifesto. Jason. The index dot html is to Marco for our application. A seal line 28 an empty year, def. With I D route, which will actually be used to render our react application. There's nothing in there yet, but there will be when the application runs. There is also a manifesto. Jason were which is for progressive weapons, don't need to worry about that now. The main part of her application is in the source. Full or so here we have toe indexed. Yet Js, which is two and three points to our application. You could see the react jumbled render which will render our application that element there into that roots diff which we saw before. There is also this register service worker. I'm gonna commented out surface workers are pretty awesome, but support by different browsers is still so what buggy. So for now it's best no to youth. And so where does it app that come from Will that lives in apple chess? And here you could see a close up extending the reactor components which has a render function which returned something that looks like mark up. This is not actually mark up. This is what they call Js x Intacs. And in the next video, I'm gonna exploring more about J six. For now, just ink over There's markup which will be rendered where in our application runs. So there are a few more things to take a look at the rest is no more jewels folder which contains all the coat we don't noted from NPM. Most of it is needed that design time only at the bottom versus Pakistani Jason, which contains the dependencies. You could see reacting React Dome, both first and 16.2, which is the current version. At the moment, you might get a later version. Those are the two dependencies needed for run time. There is also a dependency colt React Scripts, which is used at development time. It's not needed for run time, but it will make sure that we've got a development surfer, false or bundled up protest and whatever else is needed below. You see four different scripts. You see the start script, which I used previous video to start the application. There is a build script will use at the end off the course to build runtime deployed version, and their two scripts test in ejects, which we're going to ignore. For now. We'll cover does in another course sometime in the future. If you're interested, so that's basically older is to it. If you want to read more about it, trust is read me If I open the preview, it's a little more readable. You see There is lots of information here about what create racked at the US and what it doesn't do, including how to deploy it. We're going to look at most of this, but at the end of the course, we're going to deploy the application we built. And will you show more off the information from this fell for now, If you who On the radio. Go ahead. Just open it in preview mode and its readable the marked on Schorsch itself, iss readable, but not quite as readable s to preview. So that's the project. And in the next video, I'm gonna explain all about two j six cent tax and how we used to build react applications , So see you there. 9. What is JSX?: So in this I'm race here. Welcome back to this introduction course. So in this video, we're going to talk about what? Js exes. So Js X is just syntactic sugar. It just happens to be used to load with react. So it's an important bark to take a look at. So react elements are created using a call to direct create element function. Well, that's easy enough to write. Js X makes that Tulse index just a little seizure. Here's an example of where the component would look at run time. We've got a class app extending the component cloths from react and inside of to render function. We return calls to react, create elements issue called to a diff there and ness. It's is an H one and a new order list Elements, which contains a list elements were Truell Display Star Wars. Now it's not hard to read this, but it's not the easiest Syntex, either. The JSX, which actually produces this, is much easier to read. It looks like a Tchmil. It's almost HTML not quite, but it reads the same way, so this J sex is transpire oiled into two previous JavaScript. So what's different between J. Sex and regular HTML. Well, it's embedded insight off JavaScript. So we're still inside of a Kloss, which extends component, which has Orender function, which returns this JSX Index. You see regular def elements H one elements in order to list list item. All of those elements look familiar. There's one little all thing, though, where you normally see a CSS cloth attributes. Here. It's a class name. This is because class is reserved key works in JavaScript, so Direct Team decided to use class name instead of close. You also see those curly braces with new date to date String. Everything between curly braces is a normal JavaScript expression, so it's just JavaScript with executes and will be rendered. In this case, it's just gonna rendered a current dates as string. Nothing special to with no restrictions look like some off the template languages where you can only do very specific things inside expressions. No, this is just JavaScript. Anything you can do in JavaScript Goche. So join me in the next video when I'll explain all about babble, which is too, too. We used to transport all JSX into regular JavaScript so 10. What is Babel?: Hi, Marie Share. Welcome back to this. Introduction course will react in this video. We're gonna talk about Babel. So what does babble Babble is JavaScript compiler. It can basically compile modern style JavaScript, which is not understood by older browsers in tow. Older style javascript, which every browser in the fence. But it can also compel the react chase Extell code. So let's take a look and see this in action. Remember the project we created? Well, we had this app component with J s X, which looks like this. Let's copy this and go to battle. So this is the Bible website they could see. It says here Babel is JavaScript compiler, their dogs hair. And it's a very good site in general. But one of the neat features is we can try it out here so it can actually based our coach in the brochure right here. You could see it compels it on the fly and on the right hand side we see the output. So you see the calls to react create elements just like we saw in the previous video. So why do I show babble to do this? Well, when we created an application using, create, react at it is told babble of sparked off the whole tool set. So it uses babble behind the scenes to transpire all. All are far JavaScript into JavaScript. The brochure in the sense, including the Jays X. So join me next video when I'll show you how to start creating react components. 11. Creating a new React component: Hi, Marie. Sheer Welcome back to this introduction course from react. So in this video, I'm going to show you how to create a new react component and use it. So let's dive right into the coat created so I don't want to clutter up my short fuller with everything. So the first thing I do is create a components folder toe, hold all my components underneath the source. Fuller, make sure this is underneath source and there I'm going to create a new fell. This is about movies, So I'm going to create a movie cart. Don't jazz in here. So the first thing you need to do is import the react library from reacts. Next thing you'll need to do is create a new class. We'll call this movie card, and this is gonna extend from the base class reactive components. So this class requires wrong methods surrender, and it will return some mark up. In this case, we're going to keep it real simple. We're just going to return the fact that this is movie card. Finally, we need to export this close so we can use it somewhere else. That's using export default. Now we still need to use to new components. So let's go to the app chest up components. Let's get rid of all the content in there. We donate. It will only get in the way. Don't need to slow go anymore. Is that let's import our movie cart and let's render it s part off our component. So when importing something from within the application, always make sure to use a relative path with imports so amusing. Don't slash components slash movie cart. So include the movie card components in surrender and see we're rendering a movie cart now . Any time we make changes to the movie card you I will automatically update it. So if it changed, do this is the movie cart through. Application is automatically updated in the browser. Cool, right. So see you in the next video, where I'll explain how to use props to past data for one component into the next. See you then 12. Using props to pass data: Hi, Marie. Sheer welcome back to this introduction course will react. So in this video, I'm going to show you how to use props to past data from one component to a child components. So let's start Friday into to go from here's trap component and have already created a new variable called Star Wars, which holds movie object. There's an idea of one and the title of Star Wars. Now that's what I want to pass into the movie guard. So the movie card. It's about displaying movies. So I'm going to use your property called Movie. And in that I'm going to use toe curly braces to boss in the expression off Star Wars. Now, inside the movie card, I want to use that data. So at the top of my render, I can extract those from a property on the current objects called Props So Close a movie is distal props, which returns the movie from the props and then inside my day. If I can actually use it, I can display the title. So there, this are you. I show Star Wars. If I go back into the app and changed the title to something, Els start wreck, for instance, it objects to you. I immediately cool, right? So join me next video when I'll show how you can work with a race off data into repeating elements. See you then. 13. Repeating components: I'm race here. Welcome back to dish introduction course from react. So in this video we're gonna talk about repeating components, so let's dive right into the coat. So here's our previous project with one slight change instead of a single movie. Star Wars of Good, a collection of movies with Star Wars, Star Trek and Late Runner still rendering the first movie dough. So no change there. So how do we render all of them? Well, we could repeat the movie card component, but that's not really useful, because she'd have to know when that funds how many movies were. Yes, that's we're going to use your Java script expression. We're going to use that ray map function to map over the array of movies and turn into to a movie card for each item in the array. Boss in the movie The debug and We're Good to Go, except if we open the debug here could see an error about a missing key property. So every time we were repeat elements, we need to make sure we've got to keep property, which is unique. So in this case, we've got the movie I d. I will use that s the key, and our error is going. So just a quick recap we're gonna loopy using Rehmat function. We met each movie in the collection to a movie components, and we said to keep property so react knows which movie is associated with which can phones . So see you next time where we're gonna talk about state management. 14. Managing state: I'm Orisha. Welcome back to additions. Reduction course will react in this video. We're gonna talk about state management inside of reactor components, so let's dive right into the coat. So here's our previous project just changed inning off the original movies collection. But other than that, it's the same thing. So the first thing we need to do is add a state property to our components and specify the initial state in there. So in this case, the initial state is just gonna be on empty array off movies inside of to render function. We want to use this so we usedto object de structuring syntax to get to movies from the state object. So now our components is gonna render with an empty or a of movies. So next we need to update of states to show this list of movies who used to component that mount lifecycle function. For that is this trigger Just after the component has been mounted after the first render, it will use to shed state function on the component to more. The Friday state modifying the stage will trigger the component to be re rendered, so it will be rendered twice now once with an empty array and ones with the filter right, the component did mounts. Lifecycle function is also a great way to start a shingles behavior. We'll fake it for now with the set time out. So I only changed the state with the movies after a few seconds. So we've seen empty page, no movies, and after a few seconds they're actually loaded. So let's new a short recap we needed to add the state property to do components we used to component dit Mount lifecycle function to Trigger Nation or this behavior used to set state function toe update estate, which goes to component to rear ender and inside of to render function. We read the data from the state, so join me next time when I'll show you how to load data from a share of or illusion in Ajax School 15. Loading data using an AJAX call: Hi there, race here. Welcome back to this. Introduction course will react in this video. We're going to take a look at how to do a deck schools and low trim data from the sheriff for so the sheriff for work on the use is the movie D B. It's a great website, which lists popular movies among fellow things. But the important thing for us is it's got a nice A p I. So here's the actual websites. This is the list were interested in the cooperate of movies, so you only to create an account on this site. And once you've got in the country can go to your settings and the inside of the settings. You'll find your A P I key. Roll down the bits. Here, you'll find the A P I key. You'll need to feed three version. Copy that and go to the developer site. Here we can learn all about the documentation for all sorts of things we can ask for. But in our case, we're interested in the movies. So the top rated movies we can actually try that life from this site based in your a P I key and scroll down obits and execute to request. And here we could see the response with the list of movies in the results. Property. Let's go, Pete, is your L. And let's go back to our application. If the application instead offsetting movies to a fixed list, we're going to do an age actual question. So we're used to fetch function and well based in the Euro, and we'll use back ticks so we can easily inject the A P I key, which I imported from the FBI. Keitel Js File. You'll need to pay sure on a P I key in there. You fixed because the fetch function ization Guinness it's return for a promise. We need to make this an aging function, so we prefix component did mount with a sink. Now we can use that weight on the fetch to wait for the promise to result. This will actually return a response object which tells us all about the response. So one thing on the response s education function, which we can use to retrieve to data it returns another promise. So we'll have to use a weight again this Jason Day that is today that we just saw when we test, it's the euro on the website. So it has a results property which contains actual movies. So we'll use that for the set state. Now, if you go back to the brow for and look at the replication, we can see that it actually lists the movies. We just so at the movie to be pretty cool, right? Really easy to low date on this way. So what that would just do. We used to fetch function to requests Ajax data we created on a sing function and used to wait for the promises to resolve and the ones we had the day that we used to set state function again, like before to re render the component with the list of movies. So, see you next video. We're going to take a quick look at material design, which will use to make our application a look prettier. 16. Material Design: I'm race here. A welcome back tuitions reduction course will react in this video. We're going to take a look at what material design is and how you can add it to your application. So what this material design material design? Issa Design language from Google. It's a unified system to combine. Resource is, and you are components together to create a nice U. Y. Application. It comes with CSS and lots of guidance on how to use it. It's really designed around paper how paper would be used in a more traditional way and create layers on top of each other's. But it adds a lot off interactivity. As you'll see in the moment. It's very interactive, in part because of its mobile heritage. One of the things it could see itself is card components in the card component is a really nice way to combine an image which will text and maybe additional bottles like react come back that that will use that to display our movies. We could use material design SS, but in the react world, it's easier to use material you y the most popular way to create material design application with react. It consists off a number off react components you can use. So let's take a look at the website. So here's to material you wai website. As you can see from Little Banner version one point I was coming. If you don't see that, told Banner, by the time you watch this video, it might already be out. But right now for you, one is still in beta. You can also tell right here you can see that the current version is 0.20. As the one point over gin is quite different. I would have a recommend skipping the 0.20 version or whatever it might be at the time, and go to the one point over gin if that's not final yet. So for click on the link, we get to the news Oh, versions. We could take a look at some off the components. Let's take a look at a simple button, and here you can see flat buttons you can see if I hover over them with the mouse. They sort of light up. Also, if I click on them, you can see this ripple effect, which is kind of nice. No soc different buttons here still the ripple effect here. The card components. We're going to use a really simple card. You see, it looks a bit like a sheet of paper on the table with some text on it. Or in this case, a card with an image have are some text and a few bottles, which is kind of like what we will be doing. The at bar component another component will be using showed a title off the application optionally with a hamburger menu and maybe another menu option here to Logan. Kind of nice and easy to use. So if you want to get started, you'll first need to install material. So let's copy this and go to the control window on PlayStation. Do we stole it? The other thing will need to do is install the Roboto formed because he here the link to the Google AP eye sight to install it. So let's copy this. Go to the editor open the index rotates to Mel and below the APP title Weaken based. There's in. It'll download to the false automatically from ghoul FBI site. Well, we're here with my just will change the title because we never got around to doing that. So let's call this top movies. So in the meantime, material designed installed and we could rerun the application, but there wouldn't actually be anything to see. So let's skip that part for now. So see you next time when we're going to use the at bar components as a top of our page and really start using the material designed components. See you then. 17. Adding the AppBar: Hi, Marie. Sir. Welcome back to just introduction course will react. So in this video, we're gonna add the at bar component from material designed to our application. So this isn't at BAR. It's a simple bar. Kind of a toolbar. That's it. So the top of her application and it's a central place for some actions, like logging out or searching. You know, go implement Does were just going to implement a really simple at bar and put the application title in their sort of for branding. So let's dive into the coat. Here's your application component, and right now all of us is just show a list off movie titles. So let's make this a little nicer and add to at a bar in here. If you go to the material you y documentation. We could see the at Bar Andi. If we click on these button, we concede actual force coat. If you see there are a number of things being imported, so let's copy those imports. They have really simple style. That's copy that one as well, Then they haven't at bar component. Let's hope yet. That's actually includes that. If that's paste is in Onda let's add an additional close and if and we need to do one more thing when we export well, you have to use that which styles higher order functions and note the simple at bar but our components. So let's see what this looks like. We don't actually need this road close. Gets worried, though. That and their sharp at bar component it looks white on guy ever quite like that. They actually changed a default Golar hair from whatever it would have been primary to default. I prefer the primary, so it stands out a bit more. We get this bluish color, the view, nothing I'd like to change right now if we scrolled. That bar actually scrolls out off the view. So I left sets the position from static toe another value, I think find those values right here at the bottom. You concede ap a definition for a bar, we can go there. They conceded there are two different values for position. So fixed, absolute sticky or static, right, that would static. So let's make it fixed, which you'd fix it at the top two in the smaller. Now you can see if I scroll that bar station application. Only thing is, the top movies are behind it, so we will have to add a little padding there. But we'll do that when we start creating cards. There is a special kind of toolbar. It adds Brendan to the application, makes it easier to see which application or in it adds a nice location for global actions like searching, looking out or navigating to other parts off the application. So see you next to see you next time where we're going to create movie guards to hold older individual movies. 18. Creating a movie card: Hi, Murray's here. Welcome back to this. Introduction course will react in this video. We're gonna change the simple list off movie titles into nice looking movie cars. We're going to use a design like this. I will show a little image, the title off the movie, the small description and we'll have for Button, which won't do anything yet in this video. We'll do that in the next video, but it will lead to see the movie details. So let's dive right into the coat right now. This is what our application looks like, and the first thing is we've got the list. But part off the list is actually behind Ah at BAR, So we need to make some space there to show the movie list below the apart. So let's add some sees has to do that, so that's better. Now, at least we see the first movie. So next thing we want to grab a movie card, let's go to the material design sides and let's take a look at the source coat right here. We can see the markup required for this cart, so let's just copy that there's a big cleanup. We need to do. This class name doesn't exist, but we will need to class there. So let's at the close off movie cart. Actually, that's the movie image Digits the movie cart and in here instead of saying Lizard, let's put the movie title there so we see a list off movie titles. Layout isn't very pretty yet. We don't have an image that spits. That's fix that first. So in order to display the image we need to take a look at returns Jason Data. So here I have an example. A consider is a property back drop off, which contains that file name off the actual image, but it's not the full buff it wouldn't get to The full path. Movie database is a different AP. I call where you can get the configuration and it will show the base. Ural in the difference allowed sizes and by combining dose to wits the actual backdrop image file. We can get the complete buff, and a backdrop will look something like this. So let's copy this. We still don't see an image, but that's because the default IMA tchite is hero pixels. Do we need to specify a specific? I'd so If you take a look at this image, we could see a three on the Dwight. The actual limits height is 196 pixels. Let's use that enough Removed from the extra quotes who didn't need There are images. They don't look very pretty yet, because by default the card is going to take up the full weight off the screen, which is a bit too much. We want a car to be 300 pixels white, so let's add some ceases to do that. That's better. The old trailer pixels. It's still one long list, so let's go and change that. In order to do so, we have to tell the list off movies that it shouldn't just render the masses. But you'd rendered a musician or flex wrapped and that we've got a nice stable of movies, and depending on the screen size, the number of movies will increase or decrease. But, like on the small screen will just have a single list. But on my laptop we'll get a lists or four movies together. Nice. So let's changed the description to be the right field. We've got a nice list off movies, including the old text if we over over it. We haven't wired up the learn more button yet, but we'll do that next lesson so materially. Why? Carts are a great way to showcase information like this, either repeated or single items. But in this case with good repeating list of movies, they're great for adding images, action buttons. That's that France needed, as we did on this occasion. So see you next year when we're gonna take a look at this playing the move details in a pop up window. See you then. 19. Displaying movie details: hi memories here. Welcome back to this introduction course from Wrecked In this video. We're going to take a look at displaying more movie details, so let's dive right into the coat. So here's our application components, and right now in the state, we only have the list of movies. But we're gonna add the selector movie to it when we click on the movie to display more will change this selective movie year state. So in order to do so, we need a select movie function which changes to state. So we used to set state function to update the selective movie in the state. Remember, never changed the state directly, who also need to be able to clear its shell, will add a clear movie to set the selective movie back to no. Now we need to pass this select movie onto the movie cards components so it could be you show for their. So in the movie card, we create a new function select movie, where we grabbed this like movie from the props together with the movie we call the Select movie with that movie. So in the card actions, we've got the button and we Adam Click handler and call the select movie on the current components there. Remember to use own click with camel casing. No, when we click to learn more button, the state is actually updated, but that's we're not checking the states doing anything with it. We can see that So a nice way to display it is using dialogue so we'll use it. Formed. I look from material You. Why? So let's copy the code from there and create a new components movie. Die. Look. It will based all the source coach in there, so there's a few things we don't need. First, let's change the name to movie Die. Look, we don't need to states the handle. Click open order handle closed. We can get rid of those State is managed at the application level. So in the Render Function Regret Movie, which will be passed in which will be the currently selected movie, have also grabbed the handle close to function, which will pass in later. Now the dialogue is going to be open if the reason movie selected. So we used a double bang operator to turn an object or no into a true or false so Let's go back to the APP components and includes this movie Die. Look in there, we'll import it and then will render its with selected movie. Also need to make sure to pass in the handle closed function, in which, where we clear the movie, which will also closest to die. Look again. For now. If we click will learn more, we see a nice motile die look pop up. If we click outside of it, it disappears again. So let's actually display the movie title. If you just used the movie title as ISS, Hair will actually get a runtime error. This is because the movie is sometimes no so movie. The title would be DVF rinsing a property on the No object. So we need to do this slightly different. She will create a title variable and will defaulted to know which is valets as a reacts component instance, and only if the movie Opie Act is actually set to an actual movie will create the title components. I would use the curly braces in tax to render the title there so either no or die look title and I would render us your name or to go filed are depending on which movie real Ucat , So we can do the same with the content, the full to know. And if we have a feathered movie, render content components. You also don't need both off the bottles. So let's just have a single button there, which is called Closed and Course a close handler. So let's display some more details from the movie that's put the movie overview. That's the text there. And let's update this text fields to display the movie release date. No, we see the movie description and release that, but release date was still undateable. So let's make this text field disabled so it can be changed. Bullets ads the movie image bloat Overview. Will ATS the actual movie, uh, boaster image. Make sure to import a correct classes, and we only need Kark me, your notes, the other parts off the guard, just like before we'll need some CDs has to actually give the image to right size. It's updates the image to show the poster instead of the back drop and give it a different class name because it has a different size. We have some repairs. CSS with the correct with and height, and here we see the poster for The Godfather. So let's add some more text fields to display more details about the movie. No, just a release dates, but also the popularity and the vote averaging count. So quick recap. We used the application state to track the selected movie. We updated the application state with the callback function. We passed into the movie card, and we used to materially Why Dialogue class to display the movie details. So join me next time when we'll take a look at how to search for other movies. 20. Searching for movies: I'm Aries here. Welcome back to this. Introduction course will react in this video. We're going to talk about searching for other movies, so let's dive right into the coat. Here's our current application, and adding a search input fields to the right top off the screen in the APP bar would be a good place to start. So here's our APP component with the at Bar. Let's add a form inputs after the title. We'll use this for our shirts in boot. And when we submit the firm, we want to start church ing. So we'll add a known submit handler, um, doing Ajax School from there. So searching is very similar to loading the top right of movies. We will need to use the event ours because by defaults, HTML will submit the page and reloads the application. So we have to prevent the default behavior. You also have to change to your L a bit. In this case, we're going to search. It's less movie. We'll need to provide the shirts text. So let's inject that we don't have actually half that can't between added in a minute. So the search Texas gonna change, so we'll get that from the States, we'll initialize. It's as an empty string in the state, so let's put an input fields in the form. I won't pre prepared, so you don't have to watch me type it. You'll see its value is the search, Tex. And whenever it updates, it will call a searched, exchanged. So let's get to search text from the states and that's implement that searched exchanged gold back. So in this place, we want to change to search next in the state based on actual value off the input. So the event are actual. Tell us which inputs ISS using the target property and that as a value, which is the actual value in the textbooks. So let's make sure to include two required import statements for the input and the import adornment. So they're staying put. It's right behind top movies on the left hand side note on the right hand side yet, However, if we try shorting, we get an error at the Paris I made an error in the euro. I forgot to include the queria parameter, you know, with the query parameter there it works better, and I could search for Star Wars movies, so let's move to church books to left. So by setting the Flex property toe one on the title, it will take up all available space, moving inputs to the right. That's better rich on the right. We also want to add a bit of an adornment to make sure that it's clear that this input easement for searching. So let's add that in the span who will use a Magnifier Aiken Much better now. If you search for Star Trek, we will see the older Star Trek movies. So let's do a short recap. We used to controlled input components to end for a search text. We used a Form two submits the search Texan doing Ajax School, and we changed the movies on the state with the results off the search goal. So see you next move, everyone will actually deploy our application to the Internet 21. Deploying the application: I'm worries here. Welcome back to decisions reduction core from wrecked. In this video, we're going to deploy the application we built to the weapon. So here I am at the MPM page for Create Wrecked Up, and if you click on the user guides scroll down a bit. You could see options for deployment, and one really nice one is using Now. Now we see service from sites, and it makes it really easy to deploy a react application or many other applications, for that matter for free. So this is the actual site. So let's deploy our application here I am at the command problems in our application. The first thing we need to do is create to release version offer application. Using MPM Run Built will create a production version off the application this Warren Foster , so it's highly recommend it. So this has created the built folder, which contains two deployable application. Well, let's install now it's a global is stole so we can use it for my anywhere. So NPM install now midterm minus G for global, which is pretty false, so that's now installed now could deploy the application using now with the dash dash name option. Otherwise, it will take the current folder, which is called Builds, and by adding that stash public, it's not gonna ask us whether it should be public amusing to free version off now. And that will always be public. However, I get an error. Raising is the maximum size for a free application is one megabytes and even there are application isn't very big. It contains a map foul on the map. Fall is relatively large, so let's delete that Andi re try to deploy. So now our deployment went to look better. We could see the your EL in the console if Akopian pace to your well into the brush or we can see our hosted application. So here it is running on the Internet, just dysfunctional as it was before we could see the movie details we conserved for movies . Great, so let's make sure this can be done more easily. We can do show by adding a new command in the script section. In our practice allegation, you'll have to know command there, which will first run and build, then CD into the bill directory. Then we'll delete that map fall and now usually too cold room wrath for that which have already installed which will do it on every OS actual os que months differs between Mac OS , Windows and Lennox. I want some map files deleted its calls now with the right name to deploy it. Now we can deploy the application by just doing NPM run now, and it will issue all the required two months. Who dare? It is Euro is actually the same in this case because the application hasn't changed. Love the application again to make sure. Yeah, everything's still fully functional. Great. And still search for movies. Great. So you don't need much to host to react application. The application might actually need more, but in this goes our day that comes from nobody. Application using site makes it really easy to deploy the application. So see you in the next and last video. When will do a quick overview of everything we've covered in this course 22. Summary: I'm Ray share. Welcome back to this. Introduction course will react. This just lost video. And in this video, we're just gonna have a quick summary off everything you've learned, which is quite a bit. So we started by taking a look at what react is and why you should learn it. Then we took a look at creating a new react application using create react app. We also have to look at the Jays action tax to create wrecked components. We looked at surrendering single or multiple child react components. We have props to pass day down to child components. You state to manage to stay there for application. We used to fetch a P I to do Ajax schools to retrieve data from the server. Used a search party, components materially y in our case to make the application look pretty. And we deployed our application to Xitong now, which was really easy. So now it's your turn. Do something great with react and let me know what you built. I'm always interested to see what people do with react. So thanks for attending to score. I hope it was usually for you. And let me know what else you'd like to learn about react or reacts related subjects so I can create other courses around those subjects by.