Modern React Fundamentals: Build a Quote Generator

1. Introduction: In this class, I'll be teaching you the fundamentals of react, what it is, why I think it's a great library to get to grips with and how to implement the newest and best practices into your web projects. React is one of the leading frameworks or libraries in creating seamless interactive UIs. So it really is essential for any front-end web developer to have some experience in. Throughout this class, I'll teach you how to work with React functional components, JSX, props, hooks, state management, how to debug and test your application. Hard to add styles and much more. All of which are crucial parts to know when building great UIs with react. By following along with me across all these lessons, you use these newly acquired skills to build your own quote generator. Each step of building this quote generator will cover so many important skills you will need to be a complete and confident React developer. Hey, I'm David and I'm a front end web developer from Northridge in England. I have many years of experience creating digital applications for a variety of international clients. Enjoy helping fellow web developers like yourself to improve their skills, which will help them further their careers and ultimately help them become the best or random developer they can be. But I do hate talking about yourself. So let's quickly move on. This class is I under students who have some basic knowledge of front-end technologies including JavaScript, but would like to learn react. Even if you've come from a different coding language background, you could still be able to follow along as long as you know the basic concepts of functions, arrays, and objects. If you are a complete beginner to react, That's absolutely fine. All you need to create your class project is your favorite IDE. Vs code will be my code editor of choice used in this class. But any others that you are comfortable using yourself are absolutely fine. When you finish building your core generator, you'll be deploying a product to the web using Netlify. They worry, I'll show you how easy it is to do that and it's all completely free. With the skills you'll gain from this class, you'll be able to offer so much more as a developer, whether you're a freelancer or if you work for a company, react is still the most popular JavaScript library used in the world. And so many web applications are built using React. Once you require these new skills, you'll be able to demonstrate your knowledge to any company looking for highly skilled and solid front-end developer. By the end of this class, you'll be able to create slick and highly performance, use interfaces using the latest react features. Without further ado, let's get started. 2. Project Introduction: In this class together we will be building a random quotes generator all inside, react. When you press this button and new random quote will appear instantly. This will be a single page app, which will include an area to populate the quote, a simple footer. And I will show you how to manage the state of your application. If you're following along with me, which I strongly encourage that you do, you can also build something like a random fact generator or a similar application that looks at some text data and randomly populate a random text string. The text itself was not too important. It will be all the React techniques that we'll be showing you in each lesson which are important. Now I've chosen a quote generator as a project to build as this is an ideal web app that we'll cover many important concepts of React. This includes working with state management paradigm child components, working with props, working with hooks and height data Kennedy used inside react. First successful project. Try to use all the concepts that I will show you in this course. If you're feeling particularly confident for bonus points, haven't read through the official React development docs and include more contexts that are not covered in this course. You can also try to include additional components like a header or even additional pages. Also try starting your court generated differently to mind using your own layout, fonts, and colors. The students should be using their favorite IDE or code editor to build their class project. I'll be using VS code, but any IDE will work just as well. Now you'll need to use a terminal which is available on most operating systems. But I will be using the terminal which comes bundled with VS Code. Any will do, of course, you use the terminal to create the project and also to help you deploy your final project using Netlify. Don't worry, I'll show you how easy it is to set this up and push your work to a live webpage for all to see. And we can do this all in under a minute. All my work will be on GitHub at this URL. So you can see my final project. I would use this for reference if you do get stuck. And I will include this URL in the course notes to when you have deployed your project, it will be great for you to share screenshots and link to your completed generator. You can do this by uploading your work to the your project section on Skillshare. This is a great way to get feedback from me, from the other students and really to priority show off your work and your new friend react skills. Of course, if you do have any questions, please let me know. Now, let's take a look at what React actually is in the next lesson. 3. What is React and why use it?: So what is React and why learn it at all? Quite simply, as stated on the official react website, React is a JavaScript library useful building user interfaces. With React, you're able to design simple views for each state of your application. React to so efficient it will know to only update the correct components when your data changes, instead, reloading the entire page. This makes it ideal for the single-page application we will be building in this class. This means your React application will have great performance and be super speedy. Each component is encapsulated, which means each component manages its own state. Componentized, work mixed, easy to manage all your code allowing you to reuse components throughout your application. To react is now used on over 10 million websites worldwide. This also means there is a strong community with great resources out there to help you on your journey. There was also a much smoother learning curve compared to its counterpart Angular. And I hope to show you just that in this course. Shall we set up our project? Let's do that in the next lesson. 4. Setting up your React project: Now let me show you how to create your React project and how to get it up and running. So I've already opened up VS code here. So this is the code editor I'll be using. So please do the same, open up yours and just follow along with me. The first thing I've done is create an empty folder called quote generator. Course what you want and save it where you want. There are no files in there just yet, but that's what we will be setting up. Now to create a React project, you will need to make sure you have Node JS installed. If you don't have no JS already downloaded, go to Node js.org. You'll be presented with this page. Now, as you can see, it's already detected that I'm on a Mac iOS and you want to download the latest or current download files just here. Now, I already got Node installed, so I don't need to do that. But when you click on this, you'll be presented with an installation wizard. And you just need to go through the steps until you have node on your system. And then how do you check if you've got node? I'm just going to open up a terminal. And so if VS Code in new terminal, if you're not using VS code and you don't have a terminal inside your code editor. You can't just use any terminal that is bundled with macOS or Windows. So I've just opened a terminal here, but I will just close this because I'll be using the total inside the S-curves. So I hope that makes sense. Anyway, to check that I do have Node installed, I'm just gonna be writing node dash V, which stands with version. And he can see that 17.9, so that is installed. If you see these numbers here, after writing node b, then you have node correctly install. What exactly is node and why do we need it? Basically, it's a server environment and it's completely open-source, cross-platform. Now what this does, it allows you to use JavaScript to write command line or terminal tools for server-side scripting. And this is exactly what we need to create this React app. How do we create the React app? We write n px, create dash, react, dash, space. And then you can either write the name of your folder or application. But I just wanted to use quote generator, which is the name of my folder up here. So to do that, I just use a dot instead of a name and hit Enter. I need to install, Create, React app. Okay, to proceed, yes, I hit Y. And here is crammed the React app and all the necessary files and folders. Just give this a second. May take some time depending on high phos to a machine is sorry, I don't have to spend our entire installation process because it was taking a little bit of time. Here we want to store full, correct. All looking good. As you can see on the left here, we have this folder structure which it created. So we have sauce with various files. App.js as the base root application. Many other files here. We'll get to those in a minute. Now to start up this application in your browser, again in the terminal, let me just clear everything. If I write npm stopped, not MPS, NPM, which stands for Node Package Manager, which gives you various scripts which you can run it. So I just wanted to stop this MPM space. Stopped Enter. I presume it's a little goes through fine. It should open up a tab or a window. And if it doesn't, or you need to do is go to local host three times and there we go. Now, if you can see this page, then your replication reacted when setup. Starting. All fine. Now if you don't see this, you don't see this in local host 3 thousand. Then I must have been an error somewhere. And then it's worth checking what your terminal is saying because it will probably give you some error messages, which we will explain exactly where the issue is. Okay, now we know that this is up and running. Let's just tidy up some files inside app.js, which is the parent file for the application. We won't need half of this, so let us actually get rid of everything inside the div, the header. I'm just going to include an H1 to say. Jen. Just to make sure we know what this is. This updates in real time, as you can see, we've lost the animation and it has the new text. So there's no need to keep refreshing this or to keep starting the server. It's all looking good updates in real time. We don't need to import the logo anymore either. Save that. Inside source as we're here, let's set up a folder structure. Now, this is the way I like to do to keep things neat and tidy. You can cause copy me or do you think differently? But we will need a folder for our components. This is inside source, by the way. Also inside source, let's have a folder for our data, our text data. And then we're going to do the same for styles folder. For styles. That's all looking good. What else can we get rid of here? Get rid of cool web phi tools whenever we're doing any testing this and get rid of setup tests. That's all good. Which means it's index js. We can get rid of what we've deleted there. And also this part of the bottom. There we go. Compiled successfully. Index js holds our app.js, which should simply have the court January to also get rid of this test. Yeah. And a half to do this, but has been not using this files. Let's keep it neat and tidy, nice and simple. With the school loading fine at this stage, let me just show you some useful extensions that I'm using in VS code just to save some time. So throughout this course you'll see me using some keyboard shortcuts and things just to kind of saving time and effort. You might find this useful to show you this in. So components, I'm just going to create a component for the footer just to test these things I happened to show you. So we'll call this footer dot js. Usually is the normal convention to start js component with a capital letter. First useful shortcut is to create a React functional component. I'm simply going to type II and tab and it's created component structure here. What's doing this is an extension which I'm using code snippets, DX7 snippets and updated. So this is giving me a load of keyboard shortcuts just to save some time. So keep an eye out for this exactly extension. Another useful extension that I'm using is called prettier. If I was to just move this around so that doesn't look very good. If I then highlight the school and use the keyboard shortcut, Bennett formats it into place. Now this is using pretty Act. So if we go to Extensions time, again, I'll have this already installed. Since you're prettier. It should be this top result here. Code whole matter. You can see that this file is using protein dying in the bottom right here. I didn't quite see that is prettier here. Let me just move that up. Just so you know, this is running in this file. That's a great time-saver. Another one, we were to change this opening tag. If I change this to a one, let's say, you can see that the closing tag also updates and get your extensions. This one is called auto complete tag. Yet there we go. So this top one here. Again, very useful, especially if your files are growing in size, then you don't need to find this lower closing tag right at the bottom of the documentation. You know, if you update this, then the second tag well, the closing tag updates as well. With that, your application is all set up and ready to go. Let's look at some more code. And that's actually create the app itself. 5. Components and JSX: Let's talk about components and JSX. First of all, on the screen we've got the cost component and a functional component. Throughout this course, we'll be working with functional components by just wanted to show you the difference between the two. When react was first made, it was quite common to use cost components. This would involve the rocking, the word class, the name you can component. You'd have to extend React dot component. You'd have to include a render to return the actual HTML code. And if you are changing state, you'd have to include a constructor. You'd have to include super, have to use this, the, this keyword to change a state. Functional components. We're only really used to if you are rendering a component or some code. If you were working with changing state, you'd have to use a class component. But this is all changed now. You can use hooks to manage state inside functional components. I find function Comparing. It's a little easier to understand. But this may be different for someone from an object oriented programming backgrounds such as Java. But I find that function components use up less code. And like I say, with the introduction of hooks, you can now manage state. There is less code. I think it's neater, so we will be working with functional components throughout. No, functional component is basically just a JavaScript function declaring the name constant Hayek or fitter. And it's just a simple arrow function. And then we're returning the HTML code. Now there isn't actually any need to import React from react anymore because this application already knows that this is a React file. The only time we'll be importing it this way is when we start to use hooks later down the line. But for now, we can remove that. It makes the code even neater. This might seem weird. Putting mock-up inside JavaScripts don't show you will get used to it, but this is essentially what JSX is. Now, all the logic and work for the footer willing will stay inside the footer dot js file. And it's easier to manage markup and logic in the same file. React is focused on separating concerns more than anything. Down here, this is where we export the footer. And we're saying that this footer is the default thing to export. You could return other components or functions in here. We're just saying there is the footer that is the default to explore from this file. Now inside the return here is the markup, which is essentially HTML. So if you're already familiar with HTML, you can write it in the same way. However, there are a couple of cases where some attributes are named slightly differently. For example, if you wanted to add a class, say distalless for the class is a reserved word, as I've just shown you earlier. You can use class-based components in React. Class becomes className like this. And already my candidate, is it telling me or suggesting the class name, Here's the right thing to use. So remember to use className and not class. Also, if you were working with Forms, let's say creating, say a label for a form smoothest time to another line. If you are linking this to an input, normally you would have four and then the ID of the input. Four is also a reserved word. You need to remember to include HTML Full with camelCase like this. Just useful to remember that this is removed. We won't be adding any styles just yet. But whilst are in the footer. Let's just change this to a footer tag. Then I'm going to put the text inside a paragraph like so. And then let us update this further to say something like co-generation to David JC Lee, that's me. And then we'll add a copyright symbol like this, ampersand copy. Remove those characters. I'm saying copy semicolon 2022. Another thing to be aware of is in this return, if your HTML is starting to get quite large, which is here, you can, of course, mu is M on two separate lines. It like so, but just remember to include parentheses around everything in parentheses like this. Using prettier, I'm just going to format this on the press Command a to select everything. Then I'm going to hold Shift option F to Format. And then we'll save that much neater. That is essentially our footer complete. Let's move onto another component. You can select the components directory. Let's create a component for the quote. So the quote ab.js, because this is just really a JavaScript file. And then using my S7 extension shortcuts or the ICF tab, actually removed the input because it already knows it's react. Quote. Okay, great. We've already got parentheses for multiple lines on the return when it's returning the mockup. So that's handy. Let's just space this a little bit. Inside the div. Let's actually use a blockquote tag, and then we will just hard code some query. This is a great quote I'll do for now. And then for the name of the person who said the quote, let's put it in paragraph tags. Let's just put your name. Of course, when I'm working with real data down the line, we will make this dynamic both the quote and the name. But for now we're just putting the base component together. Again, I'm gonna hit Command a shift option F, lovely at formatted. And that is our second child component. Now, when I say Charles component, that means they both the photo and the quote, needs to live inside a parent component. Now apparent component is the app.js, which should've been created when you created your React app. Earlier. We've just hard code it in this one quote generator. Whilst here, let's just change so the mockup. So actually we'll leave that Davidson, but we'll put it in a section, wrap everything in this section like this. We will eventually have the quote area here. Comment that they're in-between the div, The section we will eventually have the footer here. Let's just comment that math for now. Below the query, we will need a button to randomize each group. So let's just create a button there. And I'm going to write the text generate for the button. Now you can see nothing is changing on the right. That's because we need to start the server. Just do npm start inter. Wait for that to load up. Starting the development server, they're compiled successfully. And then we can see our Generate button. Before we bring in the quote and the footer, just like to point out a handy tip while it's already tip is something that you must know. Inside our return, we have got essentially one wrapper. So it's the section. If I was to put a second one here. Second section. Second section, you can see there's red lines everywhere. It's complaining, it doesn't like it. If we hover over the text, you can see JSX expressions must have one parent element. What happens if you did actually need two siblings like this two sections? Well, you need some kind of wrapper. It would work if you had an outer div. Is both of those. But if you didn't want to include a day of just for the sake of it, you can use a React fragment and all that is is an empty div like this. You can see an empty table here and an empty closing div here. These are React Fragments. Luckily, we don't need a second section. I was just showing you that as an example so you can get rid of that. Get rid of this opening fragment, and save that. Then. Let's import our quote component that we made ever head. Below this input of the CSS. Again, this app dot CSS was bundled with his Create React app. We might not actually need that, so let's delete that for now. To import a child component into the parent, we can do input quote from. Then as a string, we need to go into dot slash components, slash quote. Okay, great. It says quote is declared but its value is never read. All we do here is have I self-closing quote component like this. Only bracket name of the component slash closing bracket. That Let's save. And then on the right ear we can see we have our heart care did quite right. Let's do the same for the footer. Footer from sorry, dot slash components slash. Better. Doing same footer. Close that save. And that is our footer. We've imported child components into our parent component. Now, the great thing about separating out of these components is you can use them everywhere because they are componentized. So this is essentially quo component. We could doublet, triplet, save. There we go. We've got three of those. So this is quite component can be dropped in anywhere inside our app and it works independently. Each comparing them, manages its own state, its own styles and everything like that. So it can just be dropped in everywhere whilst we're here. Before I forget, if you did want to stop your server, you can see this is still running inside your terminal or you do is do Control and C. And then you can see that has stopped. And then if I was to refresh this page, there's nothing there because we have stopped the seller. I hope that all makes sense. Now let's move onto working with prompts. 6. Props: Let's take a look at working with properties or props. Now, first let me just start up the server again. We'll do npm stopped, hit Enter. Props are rating useful for passing dynamic data from the parent proponent to its various child components. What can you pass down? Well, almost anything really. In this example, you don't need to follow along with me. This is just some examples before we start working with our actual data. So what I'm gonna do first is let's say we wanted to change the name in the footer. So here's our footer in the parent. We can add an attribute, let's say name. You can call this anything that you want. But we changed the name. And then let's change this name to say, Jim, Let's save that. Are inside our footer. How do we receive back text string? Well, the parentheses here, the parameter needs to be props. Props, game pulled in the same. It's declared that its value is never read. How do we update this text here? Let's delete that. And then what we need to do is to open some curly braces. And this is how we use JavaScript inside this JSX. We can write any kind of drugs within here, but we're gonna be working with the props variables. We use props and then stopped and whatever we named the attribute here, which is named approximate dot name. We'll save that and it's updated to Jim over here. We can also use this multiple times over the second photo and let's change the Dave, is that the honest thing named Julie will hit save. And there we go. We've got the same for two-component, used three times over, but it's accepting three different types of props. Now you can also pass in variables, hit the inside our app. Let's create a const. We'll call this name one. Will save as a string called Jamie. Name one can be used inside here instead of Jim, but it's not a string. So make sure you use curly braces. And we'll put name one in there. I say Save. And there's Jamie. Remove the footers. What else can we pass in here? Let's get rid of our name one, Let's let us pass down some kind of Boolean. So we'll have a true or false. And what we can do is, let's say to the footer will show up or hide this date. Let's call our constant year score. And we'll set this to false because we're going to hide it in the footer and let's remove this attribute. Let's say we'll call this. This is called a year. Then in some curly braces we're passing down our variable above. This is called year, so that means in footer, we need to just change this back to my name. So hard carry back. How do we show and hide? This year? Again, we need to open curly braces. And we're just going to use a shorthand conditional. So we'll pass down props, props dot, just called year. I think we're just passing down. If props dot year equals true, then we'll show the string of 2022. Otherwise, we'll just have an empty tree, empty strings, so we'll just hide back. This is just a shorthand. The question mark is basically an if, if true, and this codon is basically an else. Let's see, We'll save that and has indeed it in our year. So if we go back to our parent, let's change that to false. Sorry, change that to true because we do want to show you over here. We'll save that and showing the year. This is really handy to show and hide things such as text content or even change class names because different styling. Let's just reverse this back to when we had name here. Yeah, approximately name over here. We'll change this back to name, would change this to name, and then let's change our variable name. Changed the name to Keith. Keith has created this query generator, well, donkey teeth. My next example is you can set default props. For example, we've got props dot name here. But if Keith is no longer available, we can do double pipe, which means all props dot name, or pooling. That hasn't changed, that's still says teeth because Keith is declared up here. If this was an empty string, Let's say the props are no longer available. So remove that. Then we've got pooling here because name is blank. We're passing down a blend prop. Inside of props, props dot name is not available. So we've devoted to pulling. That's also useful for backup if you don't have any data or there might not be any data getting passed down. Okay, I hope that makes sense. No, we can make this even neater. Imagine you have multiple texts. Then you're having to write props over and over again. We've used the word props four times there. But what will we need is name. Now, we can what's called D structure these props. So we can just get name and do that. Delete prompts again in curly braces, we can just write the word name. Just get rid of these multiple names. And that means we just need your name like fat. That's very much needed. You're just savings and texts that. So remember to use the curly braces to get hold of any of these prompts that are getting passed down from the parent. Even though we've been using the footer here and we don't actually need to pass down anything to the footer. So let's get rid of that. Let's reverse this back down to my name. It will be yourname. Of course, if you've created a photo of yourself, Say that again. That's back to normal. I think we've done with a photo for now until we start styling it. So we're more concerned about the quote generate to the quote component. So this code is hard-coded and this name is hard-coded. The course we want to pass down actual data inside the app. I'm going to create your object and we are going to call this data equals, and this is going to be an object. And the reason this is an object is because we're passing down. Well, I need two things here, the quote and the name. Let's say name equals Joe Bloggs. And let's say quote is in the string. This is an awesome court. This data is what we would like to pass down to our quote component. Let's call this data. We're referencing the data object above. Inside quote, Let's start with a name here. Let's delete this, some curly braces. And before I forget, we must bring in props up here. It's accepting props and M, we need to reference props dot data. And then in our object, we've got name, name. Let's save. And there we have. Joe Bloggs would use the same for the quote to need the hard-coded text, open curly braces, props, dot data, dot quote. This is an awesome quote. Great. Okay, I'm gonna be really annoying and just add some quotations there so it looks like an actual quote has better. Remember, we can destructure this. Let's get rid of props to make this neater curly braces. We'll call this data haven't. Which means we can get rid of prop dot data, dot data dot name should remain exactly the same. We will be working with multiple quotes because the idea is we press Generate and then it shows a random quote. For now, let's just hard code, let's say five different quotes. So that means this isn't going to hold one object. It will hold five objects, which means we must include this in an array. So square bracket, square bracket makes it easier and clearer space the side and all I'm gonna do is hit a comma there and I'm gonna copy this five times over. And then I'm going to change the name and the query for each one. So use whatever text you want to use, whatever name you want, wherever you want, you don't just have to have five, you can have three where you can have 100. Just make sure it follows this format. So make sure you use your own quotes wherever you gather information. You can't just write this act, but I'm just going to speed this up. I'll do this very quickly and then we'll be back soon. Great. If hard-coded five quotes there, five objects inside the data array format. That's, that's all neat. Now you can see this is not populating here. And that's because we're now working with objects inside of an array. So it doesn't know what I've just pass down. Essentially I'm not passing down an array. Therefore end quote. This no longer makes sense because data is an array, so it doesn't know which query to pull from this being an array. Let's just pull the first quote down. So let's just do data square bracket 0. For now we'll say this is putting through our very first quote. Again. I will soon show you how to change this. So this is dynamic and sharing random quotes and names. No, to do all of this, we're gonna start looking at hooks and hooks our set before are quite great way to manage state and change the effects of things. Let's go through that next. 7. Introduction to hooks and useState: Let's now talk about hooks and then we'll delve into our first took US state. Now just explain a few things and then we'll have a look at some code. What are hooks? As you can see here, hooks do allow you to use features that were found in class-based components. We can now use them inside of functional components, and it is functional components that we will be using in this course. These features include stateful logic. So it does mean that you can add states to each component completely independently and reused from component to component. For me, using hooks in functional components, the code seems to be so much shorter, simpler, and neater, whilst they're having all those features that were found in class-based components. Because the code is shorter? Or do you think that hooks have a shallower learning curve compared to the equivalent in the classes, which is great when you're first learning this kind of stuff in React. Hooks were only added in React 16.8. So yeah, Kind of Kind of new-ish in the life span of React. One quick tip. Don't use hooks withinside loops inside conditions or nested functions. You would just call hooks at the top level of your component. As kind of touched on. And hooks do avoid a lot of the overhead that classes require, like creating class instances, like binding events and creating a constructor as well. Now if that doesn't make sense and that's absolutely fine, we're now gonna show some code. So first, I'll create a class-based component, and I'll create this counter. So when you press a button, increase the number on the screen by one. Then what we'll do is we'll create a functional component using the US State hook to achieve the equivalent thing. And then you can see a comparison with the amount of code and the difference in the code to achieve the same thing using the US State hook. This is what a basic class based component looks like. We'll just be creating a simple state function. So when you click on this button, it adds 12. Well then Amazon there at the moment, but I'll show you how that looks in a second. With classes. First need to import the component, will need to use the class keyword, the name of our component, and we have to extend component. So this is already longer than the first line of a functional component. If we're updating state, we need to include a constructor and super. Then to set state, let's say ever default number, we'd need to use the, this keyword, this state equals. And then an object we can call our variable, let's say count, and we'll set that default of 0. We'd need a function to increment the number. Let's call it increment. And then to set the state again, we need to use the this keyword and we'd use this set state. So this will change the value inside an object. Our variable of count would need to be updated to this dot state, dot count plus one. So we're taking the original value and updating it by one each time. To use the increment function on the button we use onclick. Then we need to call this dot increments. Then to actually get this increments function to work, you have to bind it as well inside the constructor, which is easily forgotten. So yeah, this is included or needed in class-based components, you'd do this current equals this dot increments, dot bind dot this. When you're first learning things like this, especially in class-based components, this is quite confusing. There's a lot to take in here. And it doesn't immediately make sense why this is needed. But it is. Again, I'll show you how this differs inside a functional based component using hooks. And then to display a number, the number is now this dot state dot count. Let's just save that number is now one at one. There we go. It's changing the state each time. Okay, so quite a lot included there, about 20 lines of code. Now let's take a look at our hook. What I'll do is I'll just comment out the class and I'll comment in the hook. Okay, The number is nine minutes blank. Okay, so how do we achieve the equivalent result inside the functional base component using the US State hook. First, we need to import US state. Third from React. Need to import you state like this. And then what does use state look like? Initially, we would need to declare a constant, which would equal you state brought in above. And then inside the parentheses is our default value, which is 0. So we know this. And then what happens before the equals. So as I said, it's a const. And then we need to destructure what you state gives us. There are two parameters we must include. In fact, it says it hit. It expects a value or return to stateful value and a function to update it. So those are the two things. The value is called count, we can call this whatever we want. And then a function to update this. Usually the conventional syntax of this function would be the word set and then the variable name, or in CamelCase in this current, in this case it's set count like that. You can't count set current, use state. Inside our button, we need that increments function or onclick, at least onclick equals. Then what we need to do is we use an arrow function. Every time you click on this, it triggers the function and we can just use set current here. So set count. We can do count plus one. Then the number is now current. We don't need to use the, this keyword anywhere we can jumps reference current. There's no binding of the function. We can simply do it all in line. So theory, pressing one updates the number without updating the page. And look how much neater this is compared to our class-based component class. We have to include comparative. There's no need for that. The function name is so much simpler. We're not extending react, we're not extending the component. There's no use of constructor here or super. We didn't have to bind the function. We just use one line of you state here. There's no need for this additional function. We don't need to use the, this keyword here. We can just reference count as we've done here. You can see how we've saved so much coding here, just using the US State hook. Okay, so we will be using the US statehood in our actual application, but we'll get to that shortly. Let's just look at a, another useful hook, but we'll be using cooled user effect in the next lesson. 8. useEffect hook: The US effect Hooke. Ladies and gentlemen, we'll be using the US effect Hooke in our application. We use to fetch our local data, so our array of quotes and ease. In fact, Herc is great for that because it lets you perform side-effects within components and that is a side effect. So that's data fetching, like setting up a subscription and manually changing the DOM inside React components. Let's look at some code now so I can show you some practical examples of the use of effect hook. Okay, So this is very crude app. What this will do is we're going to update the title here of the tab. When you click on the button, it will set number up in the title and the document title. And this can only happen after everything has loaded, after the comparative has minded. It can't be done straight away because we're accessing the document. Do we use effect so similar to US state, we can bring it in appearance of important effect in these curly braces. What does the bees effect look like? You can write these effect. Then we open some parentheses and then empty parentheses for now. And then we'll just use an array function and open that up with some curly braces. Okay, so I've said we want to update the document title after everything has my document dot title equals, and then we'll change the message to something like clicked. Then we'll just interpellate the current. So using US state, which I showed you in a previous lesson, to update the counter by one. You clicked count however many times the default is 0. You can see it's updated on the topic clicked 0 times. Then in theory, if we press increment, you see that number changing up there. Now this would not work outside of the US effect Hooke. And that's because as I said, this is a side effect. What we're doing here, we're updating the document. We need to wait for everything to load before this happens. Now we can pass in a second parameter here, which will be some square brackets. What this tells the component is basically like this. By default, this use effect side effect runs both after the first render and after every other update after any rendered on the page. So I didn't square brackets means this will only happen the one time. In this example, that's not actually useful because we can see I'm hanging increments. It's not updating anytime anymore times because all I'm saying is just get this information once and never again. Scenario where this is useful is when you're fetching external data or any data actually which will show you an example very shortly. In that scenario, you just wanted to gather information the one time when everything lows. But here we want to update this many times. We can actually specify when we want this to render or to change. I'm going to put every time that count changes. This will ignore any other time the page renders, but only if count updates then do this theory. If I press increment now, it's updating again because it's recognizing the count is changing. What about external data? So if we wanted to get some data from an API or does use effects come into play then is a get external data component. Here we are just listing art of to-dos. So this is just basically placeholder text box. This information is coming from this external API. You can see here with our US state, this is a load of to-dos. So the initial default value is just an empty array. Sorry, Initially we don't have the data, but we know it's going to be an array of to-dos or an array of text. So in our user effect, here, we just fetching the data and this is a function I'm calling down here. As you can see, I'm using the empty array. This just gets cooled once on the first render because we only want to get this information when everything lows, when everything is mounted, just the one time I'm using async await. Eventually you can this data, which is Jason. And then when we have the response, which a pivot variable here, setting the to-dos. So our US state to be the response. The response is a load of information inside an array. And that means to do's. Now we cause the response mapping through all the to-dos because it's an array. And then in a paragraph tag, I'm just listing out the item title. This variable here can be called anything we want. We can call it to do if we want to import item, then I'm just accessing item title and it's displaying this information here. Because this information, this data could be a massive, massive file, will find hundreds and thousands and thousands of entries, which means it can't get access to this immediately. We have to wait for everything to Mt. In the side effect. It could take a second to load this data. And that's why we're using these effect. And then when it's ready and it's access to all the data we can display. It does use Effect apply to our application and our data. Where I'll show you that in the next lesson when we start to hook up all our hooks and use our data. So we'll be using US state and you use effect in our application in the next lesson. 9. The data and hooking up our...hooks: Now we've learned about the basics of hooks. Let's actually use US state and use effect and work with our actual quote data here. So the first thing I'm going to do is actually move this data to a data file. We created this data directory inside source data that's just create a data dot js file. Please follow along with me if you can. I'm going to copy this arrived data. See if that actually break because data is not defined, let's paste it in here. And let's not forget to export the data itself format. Okay, that's exported. We just need to import date and I import, don't forget curly braces. Data from slash data. Slash data is working great in its own file, so easier to maintain. Again, if this was a, a 100 lines or more than it would just make more sense to have it in its own data, a file. So at the moment we're just hard-coding in the first quote from our array. And we're doing that by passing tag dated quotes for opened the quote component, you can see data and then the first one is 0, and that is the first quote. But we would like to change this when you click on the button. Will be updating the state, which means we need to bring in use state, new state. And then you can see that it says you state snippet, I'm just going to hit Tab and is populating almost what we need. So I'm gonna call this quote, then set quote, that needs to be CamelCase. What we can do the equivalent of hard-coding the first in the array is just do data. Then 0 state is not defined because I've not important it up here in Fort straight from React. Great. And then what we need to then do is instead of just passing time, all the data, we just need to pass down quote, quote is declared here and pass it down here. Let's breaking because inside are quite competitive. Pricing down all of data against this needs to change. To quote, it's not worth quarter. Note, we are calling data my mistakes. I changed that bytes of data, but we no longer need this array deleted form the quote and the name. There we go. Okay? If I was to change this default value to one, then it's ideal. Other quotes, Judy Smith, if we get to our data, then yes, it is the correct one. The next one in the array that is hard-coded, that's our default quote. But then on the button, of course we want to on click. Just use that set quote to change the value. For now, we're just going to hard code a value like let's say to the data, to the next one in the array. So in theory it should change it to me. Hit Generate. There we go. This will always be backed. Third one in the array because this is what we've set it here. What we really need to do is randomize this number here, because the idea is you hit Generate and it picks a random quote from our data already. So let's work out a random number. Let's put this in a const and we'll just call it random number. Just using standard JavaScripts, we need to utilize math dot random, which picks a random number between 01, so 0.10.2, etc. But then we need to times this by the length of the data. So we have five quotes here. We can do data dot length. This means that even if we end up with a 100 more and we keep adding to this, then data dot length will always be the length of our data. Because we don't just want a decimal, we want it to be whole number. We need to add Math dot floor. Okay? This is our random number theory. We just log random number. And let's just inspect what's happening in the console. We getting 23340144. We're getting random numbers here. Now our explain and soon why this is happening twice because we only want it to happen the ones. And then what we need to happen is instead of hard-coding this, we need to randomize the number onClick. So let us create randomized function. We'll call randomize. I'm just going to be an arrow function. The function was simply going to use the set quote. You state values here where getting hold of the data. But then instead of a hard-coded number, we're using random number here. Then instead of on pattern calling set quote, we can just use randomize like this. Let's see what happens. Why is that not changing? Of course, we need to use US effect. Bringing in you use effect here. Just delete some of these values. Delete the value in the square brackets. So we'll leave this empty because we just want to get the data. The first load. What we're gonna do is call randomize inside use effect. Now do you have one issue? When I click Generate is not continuously populating the quotes. The reason is when we set our random number here has only happening the ones. Of course, we want to get a random quote. Every time something changes on the page they're on first load when everything's magnitude and onclick randomizes getting cause is getting cold and use a vector which is correct, but we just need to get that round number be populated on each click and after every single theory for agenda right now are getting the different quotes. Excellent. And one thing that is useful to do is if this was a huge data file of thousands of entries, this may take a little while to load when you first load the page. So it's useful to have some kind of loading text and loading file you use to tell the user that the data is coming. Majorly effect what we're doing here because there is normalized data to work with. When you're working with larger applications. This is useful to know. We can do this with you state as well. So up here, we'll just create the US data snippet and we'll do recall this is loading and then set is loading the capital I. And then we'll set this to true. Because it will be true initially when it's trying to get the data. It will be loading the data when you first load this, but then when it has got the data and we can say is loading back to false because the data has been received. But what do we do with this is loading value. Well, we can use it as a conditional to show or hide certain text or content. This is a Boolean to true. Then we set to false when it gets the data. So we don't want to show this quote until the loading has been completed. Underneath the H1. To use some JavaScript, we just opened some curly braces. Then we can do is loading. So if this is true, then what do we need to do? Let's show a paragraph that says quote, loading. This is fine for now. Else, if not true, if it's false and learning has been completed. That's where we want this quote which can sit in here. Even if I refresh this page, you'll just not going to see that because it's so quick. Let's set is loading to false here, exclamation mark. Refresh the page and you can see it says quote now learning, so this is what it would look like to reverse this back. There, we basically have our hook setup. We're using new state to set a quote, to set if it's loading. We're essentially using user effect for the side effect, where are we getting a random number and then setting it to the data. So this all happens after everything has loaded on the page. We can then use the conditional is loading to show and hide different content. Passing down our quote to our quote component, onClick, we're randomizing the random number and we're randomizing the quote to get from this data which is in its separate file. That will make sense at all, nice and neat, just using the symbol hooks. And actually because we are using this user fact, we can delete this default value because huge effect on node is already randomizing this quart. Every kind of note that brings a new quote, Great. 10. Testing: Testing, testing 123. Okay, here's what we're gonna do. Now we basically completed the React part of the work. We can test the data, we can test our components. And the best way to do that is if you're using Google Chrome is go to the Chrome.google.com slash webstore and search for React developer tools. This is the official dev tools because it's offered by Meta, which is the new Facebook, who make react if you didn't know that. You can see I've already downloaded this to my chrome because it says removed from growing, but yeah, make sure you get this. What this gives you. Let me just close this. I'll show you how you get two. And you get to that. We're on an app before your time to inspect. Open your normal dev tools where you're probably familiar with. And then you can see these new tab, sake opponents and profile. Click on Components. And he is our application. So we've got our app, which is our parent component. And you can basically see the hierarchy, Sir. You can see that the app has to child components, quote and Footer. Click on those, also highlights it on the front end as well. And it's also great if we go to quote, we know about on our current component, we're passing down the quote data. You see helix, maybe it's across. We've got props. We can see the approximate getting passed down to this core component. And it is indeed data that we've got a name and we've got a quote. If we update this, generate, then updates in real-time, you can see how that's changed. We can even test our proxy so I can write anything I want. And there we go. It's updating on the front-end. Got to. We can also see there's the state which we are declaring in our parent app component, which indeed is this was realized spelled exceptional wrong plants, not very exceptional of me. Ignore that, please. We've got our state here. We've also got a second state. So this is our loading state. It's currently set to false. If I was to tick this, there's a checkbox all the way to the right here. You can see in our quote now loading. So it's a good way to test things you can interact with your actual data and prompts within here, turning this on and off. And you can then see also in the hierarchy hit hides the core component, which it should do when it's loading is set to true. It turns out the false and it's back again. Another thing to quickly show, this isn't part of the reactive tools. If we go to elements, we can see that footer has a class of Footer. Remember that class is a reserved keyword in reacts. If I just go to my code, you'll see that in footer we are using class name correctly. And then it just shows that it is compiling the correct word of class here, which is good to know. So when you're having a play around with URN app, yeah, definitely download this and have a click around and see what data you're passing. Also, it's a good way to debug your hand if you're not getting the data, if you're not getting the correct props passed down, if the state doesn't look right, this is the best place to see what is going wrong and where you might need to fix something. 11. Adding styles: Right? Well, but more or less finished with the React part of this course, which is the most important thing. In this lesson, I'm just going to add some styles is completely up to you if you want to follow along or watch this lesson at all, I will literally just be adding some CSS styles. But if you're happy to add your own and you don't need to follow along. Feel free to skip this lesson, right? So anyway, for those sticking around inside our styles directory, inside source, I'm just going to create a styles.css file. Let's get going. In the body. I'm just going to set a nice font family. Let's go for something like Gilroy liked that font-family. We'll just do Helvetica sans-serif to finish that off. What we can do is inside App, let's import slash styles slash styles.css, him after styles. Okay. Let us create some styles for the page. We haven't created this class yet. We need to add that to our markup. But for now let's just add some styling to choose a nice green background, 70 BC to AD, yep, y naught. Then let's get back to our app. Let's add our class name to our section. Don't forget its class name and not class. Page K There is our green. I'm going to change this class name of app to container. And then what else should we change? Our is loading text, we can stall that as add a class name. All just learning is fine. Our quote, and let's just put this onto a new line so we can see that a little bit better. I'm going to actually wrap this quote in a div class name of quart container. Just run fact. Was our footer looking across name of fertile, That's fine. Then how about our queer comparator? Did block word paragraph for the name. Let's actually add a class name. Name here. This point, I would encourage you to just have a mess around with the Oregon College and we already in funds and make this application you own your style, David's own way. So it's slightly different. Mine. Inside the page, I want everything to be stacked on top of each other just to make sure that it's happening. I'm going to set display to flex side-by-side, but then we can change direction to column better. And then I will set the height to be a 100% of the view height, okay, green everywhere, exactly what I want. Next, what should we look at? We've got a container. A container. We're also going to do this display flex. And again, let's put this into a column, flex direction column. I want to put everything centered, justified content center. Then the height of the container. Let's just do 95 view height. Now in the center. Make sure send to properly with margin 0, the top and bottom or two in the middle. That's looking good. We'll do a max width of 1200 pixels just for larger screens. Then let's set a width of 80 per cent because I didn't want to go all the way across. There we go. This is check. There we go. You can see the max-width working nicely there. Let's look at our H1 header. H1. Going to make this a slightly dark green, so a hash 2676. Let's do a font size of 5050 pixels and quite big. Margin zeros 0100 picks a little gap at the bottom. That's how our quote contain an x. I want to do is add a bit of a margin. Management bottom 50 pixels. The quote itself blockquote, centered. We'll make sure it's white. So hash FFF, font-style to make it italic. I hope you can see how useful this is for this to be updating in real time. So we can, in real-time affect the styles and see it actually working and how it looks, which is really handy. Margin and we'll move that. Imagine zeros on the left. We will do a font size of 90 pixels. Nice and big. Massive, but quite like it. Alright, so the name down the bottom, Joe Bloggs, class name. I am going to set the color to hash CA 755 C. Yeah, good kind of orangey color. Almost like I've pre-prepared these colors. Amazing. Font size to 20 pixels. Way to make it bold or 800. Be good. Actually, I will make text transform to be uppercase. Yeah, Nice. Okay, We're getting close. Next, take a look at the button. Background color. I'm going to set it to a dark green 267, a border. Let's get rid of 0. Text color and make it white. Let's make sure the cursor is pointer when you hover over it. Nice. Font family for the button. Actually let's steal or you've got here font-weight, bold, 800. The width is too big, so it's a max width. 150 pixels. Needs some padding of 5015 pixels around gaps and good, and we will do text transform. Uppercase. Nice. Just like to add a hover state to this button, button colon hover. I'll change the background color to be white. And we'll change the text color to be the dark green. Basically just reversing everything to 66 F. Look nice. I think we've just got the footer down the bottom here. I didn't actually add a class of footer to that. Let's use that class of footer. Text color. Let's make this gray. Yeah, that is fine. And we'll make sure text align set to center. Yeah, that's fine. That will do this looking for our loading text. Let me just go to the app. What we'll do is we'll set as learning to false. Here's an exclamation mark, coordinated loading and see, my paragraph has got cough name of loading. So let's go to styles. Certainly doesn't need to be to Francine. Constantly learning color can be white. And we'll just do a larger font size of six deep pixels here. Absolutely fine. Just reverse that back. Save. That is looking pretty decent. Yeah, nice one. That's our code generator. Nice and simple. But working, looking pretty good. 12. Deploying your work: Now it is time to deploy your fantastic app, but you've just built so the whole world can see it. And I'm now gonna show you how easy it is to do using Netlify. Netlify are a great team and have a great service at various tools for building and deploying apps. Yeah, I've got quite a lot of features including analytics and split testing. Deployment is really great. And that's why we'll be using Netlify deployment service to deploy your app. We're going to do this all inside the terminal here. Open up your terminal. Inside your app. Make sure you build a production ready application. To do that, we're just going to run npm run build. As it says in the terminal, creating an optimize production builds. So this is going to compile all our files into these very small size files, which is great. And if we look to our folder structure, we've now got a Build folder. And this is exactly what's going to be uploaded. So essentially it's created an index HTML file with all our work. There's also a static folder with our styles and JavaScript. This is production ready, build up our app. Just click once on the screen. Then we just need to install npm, install the Netlify client, which is Netlify space CLI, and we'll do space dash g. So it's installed globally. If you run into any permission areas like I have, just write the whole thing again, but put sudo in the front. This gives us admin permissions to install the Netlify client. Sudo npm install Netlify. Cli, space dash g. We have the Netlify client installed. Let's just clear it was in the terminal and then it's just a case of writing Netlify space, deploy. Hit Enter. Make sure I spell it right. Missing a T there. Next lo-fi, I spelled it wrong again. Net lift phi. Deploy. Again for having permission areas do the same with sudo in the front. Netlify. Don't notify deploying. And then this will open up a page that looks like this and you need to log into Netlify. You can use it depending on what you have is you have GitHub or Bitbucket, or you can just use your e-mail. I'm gonna log in with my GitHub. Already populated for me. We just sign in. We've got two-factor authentication. Let me just sort that out. Then we'll authorize Netlify. Then again, we're just getting through the security steps, authorize. We've just go back to our terminal. I'm going to select these two oxygens. I'm going to select Creighton, forget a new site name as optional. Let's just go freelance, undefined. And then it's asking me what directory to publish. Well, it's our Build folder. I'm just going to write build here. There is deploying our work, just waiting for the Go Live is pretty quick and deployment is live. In theory. This URL which has been provided in our terminal. We go to that night. That is our app. Working as expected. This is all free as well and we were able to deploy this pretty quickly. I hope all that terminal stuff made sense. This is how you can deploy work to Netlify and it is free, which is great. Chart to follow these steps, follow the terminal instructions. Make sure you create a build folder that is the target that you need to tell Netlify to look at. Then as a final quote generator at the URL provided in the terminal. Now I would recommend that if you have got to this stage and it's all successful and you've got a link to share. Please make sure you share your work on Skillshare. Or you could also include a nice screenshot if you'd like. Would be great to share your URL. So myself and other students can see your amazing work and I didn't get feedback to. And whilst do that, why don't we take a look at the other student's work. Nice one. You've just completed building a quote generator or no react and has been deployed to the web as well. Well done. 13. Where to go from here?: Might say, you've made your app, you've learned the fundamentals of React. You're awesome, but how do you become more awesome at react? Well, these are just a few suggestions from myself about where you can possibly go next if you wanted to do some further reading, but with regards to react and then it's more intermediate, advanced kind of stuff I think you should do is have a look at some other hooks. There are more hooks other than you state in use effect. Here are a couple. Use href and use context. We'll get to those in a second and many others. So take a look at the React documentation. Then next I've listed react router because it would be great for you to know, understand how you can work with other pages. So we just build a single-page application. What happens if you have other pages you need to get to grips with the routine system, then you could utilize some frameworks. And Next, JS is a very popular React framework and has some really handy features to simplify your process and for optimization to make more of a more complete and optimize React app. Other hooks use ref I mentioned, and this is a great way to access DOM elements. In this example, we've gotten use href here. Initially it's null. We've added this to a constant called input element. And on the input itself we're using REF for input element. So this input element is now a referenced. So when we click on the button, on button, click up here, this is the function. We've got inputs dot element, the reference dark current, dark focus. So we're adding focus to this element. We've accessed this DOM element with use ref, use context. So as I've written here, it's used to create common data that can be accessed throughout the component hierarchy should be highlighted because that's the most important thing without passing the paroxetine manually to each level. So imagine you have got children five levels down. So when our app, our app, sorry, we had one parent and two children on one level down, but imagine if there's more children, their grandchildren, great grandchildren, the levels keep going down. You don't want to keep passing Prop school all the way down. I will get quite annoying. You can do you use, use context or create context, the context at the parent level. So in this example they're using themes, system hey, or color system for light and dark. And then you would wrap the app with this theme, constant contexts provider passing through your values and then with the child. So this can be any level down instead of passing the crops all the way down inside the child, any child, you can use these context. We picked in a constant called theme, and then you just have access to that context or background. Think of foreground. This theme is being accessed from the parent. I mentioned routing. Take a look at the official documentation is here. The URL is just a collection of navigational components which can be used within your application. So take a look at this if you want to work with multiple pages in your app frameworks, I've mentioned Next JS. Again, take a look at the efficient Dr. orientation. It has many, many great features, static and server-side rendering for good performance, smart bundling, full TypeScript support, rude prefetching and the routing. A particularly like in next and makes it so simple. It's almost just like a drag-and-drop system in the sense that you would have a directory for pages and you would drag in, you'll compare them or pages into that directory and source either rooting for you more or less. Yeah, Nice and easy. It also comes with the image optimization and many other features. So once you've got your head around reacts annual comfortable, next-gen x would be worth a look. 14. Summary and reasons why you're awesome: Well done. You've done an awesome job of getting all the way through this course and creating your own quote generator using the latest techniques you've learned. Certainly important features of React including JSX, props, hooks, state management and testing, just to name a few. Being a front-end developer and having knowledge of modern React fundamentals is such a useful set of skills to have no matter what level you're at, whether that be junior, mid-level, or senior. React is still the most popular JavaScript library in the world. So the fact that you've made a single-page React application puts you right at the top of the front end web developer space. Congratulations to you. Now can you take these skills and use them in your future work? Finally, I just wanted to say a massive thank you for not only signing up to this course, but also for completing it. Without your support, teachers like myself would not be able to create content like this. So really, thank you so much. If you did enjoy this course, and I really hope that you did, it would mean so much to me if you could take the time to leave a review. I read every bit of feedback that I get and I take on board any comments that you may leave. So you can keep on improving my lessons and keep making the courses that you find useful. So with that being said, thank you again so much, you're awesome. Night go forth and code.