Become A Web Developer - Part 17: React.js | Andrei Neagoie | Skillshare

Become A Web Developer - Part 17: React.js

Andrei Neagoie, Senior Software Developer + Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (2h 18m)
    • 1. Introduction to React.js

      12:21
    • 2. create-react-app

      11:50
    • 3. Your First React Component

      20:13
    • 4. Building a React App 1

      16:03
    • 5. Building a React App 2

      9:47
    • 6. Building a React App 3

      26:35
    • 7. Styling Your React App

      4:59
    • 8. Building a React App 4

      15:30
    • 9. Building a React App 5

      8:53
    • 10. Building a React App 6

      9:05
    • 11. React Review

      2:34
11 students are watching this class

About This Class

React.js

This is the tutorial you've been looking for to become a web developer in 2018. It doesn’t just cover a small portion of the industry. In this multipart video series we will covers everything you need to know to get hired: from absolute zero knowledge to being able to put things on your resume that will allow you to live the life you want. 

Sounds too good to be true? Give me 5 minutes of your time to explain to you why I built this course and what is different here than thousands of other courses all over the internet.

  1. There is no wasted time here. We won’t be using outdated technologies like PHP, Wordpress and JQuery. Although still useful, outdated technologies like the above are low paying and demands for them are decreasing. In this course, you will learn the specific technologies that are the most in demand in the industry right now. These include tools and technologies used by the biggest tech companies like Google, Facebook, Instagram, etc… It’s geared specifically for people that want to learn employable skills in 2018.

  2. After finishing this course, you will be able to apply for developer roles, or upgrade your job title as a developer and earn a higher salary. We won't be taking any shortcuts in this course. I am going to take your from absolute zero, where I teach you how the internet works, to mastery, where I show you how to build an image recognition app using a Machine Learning API (a subset of Artificial Intelligence).

  3. This course is taught by an instructor who has worked in silicon valley, and one of the top tech companies in Toronto. I have built large scale applications, and have managed a team of developers. I have worked directly with these technologies. I am not an online marketer or a salesman. I am a senior software developer who loves programming and believes that there needs to be a course out there that actually teaches valuable skills.

  4. I know your time is valuable. You want a course that outlines the best way to learn the topic in simple, well explained methods so that you fully understand topics instead of watching somebody on your screen and having no clue what is going on. I have created this course after consuming hundreds of books, tutorials, and online courses while I was learning. I have taken the best pieces, the best methods, that I have found, and condensed everything so that you can learn in the most efficient way possible. 50 hours of videos doesn't mean much if the instructor isn't engaging or focuses on outdated topics. 

  5. We have a thriving online chat community so you really feel like you are part of a classroom and not just watching videos by yourself. You will have a chance to communicate with fellow students, work on group projects together, and contribute to open source. Anytime you have a question you can ask in the chat and someone will surely be able to help you right away. 
  6. The course is designed to give you employable skills so you can get a job. Here is what one student recently wrote after taking the course and being hired right away: 
    "I’m a self taught dev, who has been out of work for ~6 months. I had some family things that came up that prevented me from seeking permanent employment, so for awhile I was Postmates/Uber delivery driver.
    After taking this course, I immediately got catapulted back to where I was before, but better equipped and with the knowledge to take on the next job. I had just finished the React section when I went to a recent interview, and it really helped me excel. As of today, I am officially re-employed back in the field, and it is all thanks to this course. I had a blast creating the final project, and FINALLY got around to learning SQL statements, and getting to use them in a project. I’m really ecstatic that Andrei went with teaching relational databases over something like MongoDB, which can also be fun, but is less practical for use on the job. So thanks Andrei , I really enjoyed the course and will be making sure to share it with others who find it helpful. I’m also looking forward to the new ES7/8 content that was recently added, and going through the DB stuff again when I go to build a personal project."

In this course, you will be taken through online videos and exercises where you will be able to do the following things by the end:

  • Build real complex applications and websites
  • Build an image recognition app together at the end of the course so you can add it to your portfolio
  • Go into a job interview confident that you understand the fundamental building blocks of web development and the developer space in 2018
  • Be able to go off on your own and grow your skills as a developer having built a solid foundation
  • Learn how front-end, servers, and databases communicate and how they all fit together in the eco system
  • Build your own startup landing page. 
  • Go off and remotely work by being a freelance developer and bid on projects.
  • Know EXACLTY what a day in the life of a developer is like and what the day to day technologies and tools will be that you are using. 

By the end of this course you will be comfortable using the below skills and you will be able to put them on your resume:

  • HTML5
  • CSS
  • Bootstrap 4
  • Javascript (ES6/ES7/ES8)
  • React + Redux
  • Git + Github
  • Node.js
  • Express.js
  • NPM
  • PostgresSQL
  • SQL

This course is the accumulation of all of my years working, learning, and teaching coding and all of the frustrations and incomplete information I have encountered along the way. There is so much information out there, so many opinions, and so many ways of doing things, that unless you have spent the last years working with these technologies in a company, you will never fully understand. So this course is the answer to that exact problem. I have gone through thousands of coding books and online tutorials and bootcamps. I have worked with these tools on real applications. Throughout the years I have taken notes on what has worked, and what hasn't and I've created this course to narrow down the best way to learn and the most relevant information. 

I will succeed if you succeed in this course. Therefore, I will be there every step of the way helping you understand concepts and answer any questions you have.

I am 100% confident that you won't find a course like this out there that is as well organized, and as useful, to build a strong foundation for you to start a new career. We're not going to be building simple todo applications and cat image sliders. We are going to learn actual practical skills that will put you into the workforce. Some unique sections that you won't find anywhere else are:

  • React.js + Redux: you will learn the library that companies like Netflix, Facebook and Instagram use to build fast, scalable applications. This is one of the highest in-demand skill in the industry.
  • A day in the life of a developer: What will your day to day look like and what tools will you use? I will take you through a sample day at a tech company.
  • How does the internet actually work. What is the history of these technologies: I will actually have you understand the underlying concepts of the internet, and how the technologies we have now, have come to be where they are.
  • How do you actually deploy a real life app so that it is secure, and won't get hacked: How does a real life app get out to the public?
  • What is Machine learning and how you can harness it's power: Whether you have heard about it or not, this is something that you will hear more and more in the coming years. Those who understand the high level concepts and can harness it will have an advantage. 
  • What is your developer environment on your computer look like: We will be setting up our computers with all the tools necessary of a developer so you can use the same setup when you go into the workforce.

Why do we teach the above? Because in this day and age, just knowing HTML CSS and Javascript is not good enough and you won't be able to grow in your role and command a higher salary. I am teaching you these things because these are the things you should know in 2018 so that you are miles ahead of the rest. 

Make this the year that you took a risk, you learned highly in demand skills, you had new experiences, and you received new opportunities. I hope you join me in this journey. 

This is the proudest work I have ever done in my life and I am confident that you won't find a course better than this. 

See you inside!

Taught by: 

Andrei is the instructor of the highest rated Web Development course on many platforms. His graduates have moved on to work for some of the biggest tech companies around the world like Apple. He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.  Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the course! 

Transcripts

1. Introduction to React.js: good job making it this far things. They're going to get more, more fun starting in this section because we're now learning riel tools that rial companies use and that will get you hard in 2018. And development also becomes a lot faster because we're using these tools to make us build websites faster and better. So let's talk about react. What do we have before react? Well, as I've mentioned before, we had Jake weary Jaqui was, as you remember, very imperative. Writing code was like mixing ingredients sequentially. If this happens, then do this and then do that. But also, if this happens, then do this. And it created a lot of inconsistencies. And if you remember the Dom manipulation section, well, that is really, really difficult and constantly keeping track of what changed and what to change is a huge mess, and it creates for very slow development. And as your website gets more and more complex, it becomes very, very hard to scale, which means it becomes very hard for teams of developers to manage it now. React was created at Facebook. As you know, Facebook is a pretty big app, and a lot of things need to happen for it to work well. And they had this problem, and they created react as a way to solve this issue and be ableto have a tool that allows him to build websites in a nice, predictable way that you can have multiple developers working on it at the same time. And I like to use Thean ology of a bread machine. Using react is kind of like that. You just throw in the ingredients and react as all this magic underneath the hood and puts out a website so it's very reliable and very consistent. And it does one thing really, really well. And that is the view it manages to make our websites the Dom change in predictable ways that is easy to scale and easy to manage, And the beauty of react is that because it's just the view, it doesn't necessarily mean it's on Lee. For browsers. As a matter of fact, react can be used with mobile devices to build native APS. It's used in virtual reality ups. You can build desktop apse with react anywhere that has a view we'll react can use and big companies, as I mentioned before Facebook and Instagram use react and Netflix uses react Whenever you browse through movie choices. Well, that's using react underneath the hood. It's a very, very useful tool and in very high demand. So I'm excited to talk about react and teach you this valuable skill in this section. Now, in order to understand react, there's a few things that we want to go over and these air principles that are very valuable that have been learned over the years by developers. One is the idea of thinking and components. Up to this point, we've just built websites. Everything is just one JavaScript file one CSS file one html five. But wouldn't it be nice if the Web was a network of these small components? Think of them as Lego blocks, where everybody builds a specific Lego block, and you just combine these local blocks to create your website. That is the idea that react established. Let's use this as an example. You first have Adams, which, as you can see here, are icons and little small, indivisible elements on your website, such as images. There's some tax, and you divide these into Adams. From there, you form molecules or combine Adams that have similar functionality, such as the navigation bar. Down here, you combine individual atoms to out some functionality, and then you have organisms again, a little bit bigger than molecules that combines to a bigger scale functionality and then finally have templates. The combination of these organisms to give you an idea of how your app or website shall look. Finally, you have your pages, that is the page of your app. And if you think in components as this image demonstrates, well, you're able to build small little components that you can reuse and put on different parts of the weapons. For example, this back bun here If I build a react component that is the backbone, I can now use it on multiple pages and I don't have to rewrite the code. If I wanted the navigation bar to be used in different areas of the app well again, I don't need to rewrite the code I write at once, and I can reuse it. As a matter of fact, I can even shared with the world. And this idea of components makes react amazing because right here I have a website that has react components built by somebody, and we can reuse thes. And it's not just CSS and HTML, but really functionality such as navigation bars and signing forms. I can just download this react component and attach it to my website. And because of the way reactive structured, it doesn't really need to know about. The rest of the webpage is just its own legal block that works by itself. By reducing dependencies on other parts of the website, I can just plug this anywhere I want. Another important concept with react is the idea of one way data flow. The best way to describe it is by looking at this tree like structure in here. You see that we have a parent, some Children, and then those Children have their own Children, and those Children have their own Children. And the idea with reactors that data flows from top to bottom and never the other way around. That is, if these red let's call them components change Well. In that case, Onley their Children know about the change. The parents don't really care about the change because, well, the direction of the data flow is just always downstream. So we go back to the idea of components. If we had a website build on components and this was the page and these were organisms and then molecules, then Adams. Well, in that case, the red components change. And then on Lee, the ones below it, as you can see here and blue no, off this change. And based on that, they will act accordingly and change as well Now, without actually having a problems. Hard to understand this concept, but trust me, this is a very important concept that react brought in. It creates a lot of really nice bug free coat, and it is an idea that you'll understand more more as we start to code and react. The next thing is the idea of virtual dawn. You know what the Dominus, the document object model. And we also learned that one of the most important things as a developer is to minimize the amount of Dom manipulation that we do because, well, why brothers has to have to work really, really hard to achieve that, and it reduces the performance of the webpage plus increases bucks. I think this image demonstrates what react as really well beforehand. We were the painters. We told the Dom exactly what to do. Remove this element. Then put this in. And then also add this and color this this way with react. We have this react, but and the react bought create something called the virtual Dom. Virtual Dom is just a JavaScript object and this JavaScript object that just describes our website, the current state of the website and we just give it that object to react and their react bought will automatically make changes to the dom and paint the picture in the most optimum way possible. So we just tell it Hey, this is the object. This is what we want and the dom and the reaction takes care of Don manipulation for you. Remember how in knowing it was to do Cory selector all then grab elements by i d. And then doing all these event handlers will react takes care of that. So again the virtual dom is just a copy of the Dom that's in a JavaScript object and then react underneath the hood just changes the view and that's why it's able to work outside of browsers and you can use things like VR and and mobile devices because react is the machine and what the campuses on, Well, we can change the campus to whatever we want. Finally, React has a great ecosystem. It is probably one of the biggest ecosystems and JavaScript right now. And there's so many tools that work with react, as a matter of fact, the developer community so big that any problem you have, there's most likely a chance that somebody else has had it and has posted it on the Internet, and you can find solutions for you can find react packages in NPM. Use it with node. There's *** and Babel that you can use with it. It's just a really good ecosystem that uses the latest job script technology to build websites in a really nice, elegant way. Now, one thing that I want to warn you about in this section, we're going to see code like this, and it's gonna look very strange at first. It's like the same way when you looked at JavaScript the first time, it seemed like a whole new, different world. It will when you first look at this, but trust me, knowing what you know about JavaScript, this becomes really really easy. You have classes that extends the react component, and this is how we build components. We have constructor again that we've seen an advanced object and then each class has a mandatory render function that you just tell it what this clock should render. And as you can see, it looks like 80 mil, isn't it? It's not exactly HTML, but the syntax is very similar. So even by looking at this, you see that this clock component again, this local block just returns a hello world H one tag with an H two that says it is. And then the time again, just to give you a heads up, you're going to hear words like props and state and react components. But these air just language syntax that you'll learn. And it's actually quite easy once you get used to it. So don't worry. This is all going to make sense. By the end of it, you know what? We're going to be building a pretty cool app. It's gold robo friends, and we're gonna build this app that well searches through your robot friends and you can find their contact information. And, as you can see, it updates life. It's super fast. It's responsive. It's gonna be a lot of fun. And we're gonna build this pretty fast just to show you how powerful reactors. All right, I'm really excited to get into this section. You're gonna have a lot of fun. I'll see in the next one. Bye bye. 2. create-react-app: Welcome back. It's time to build our robo friends app to get started. Well, let's open up our terminal, which should be comfortable with it by now. For this section, I really, really recommend coding along and following along. The process is because you will learn a lot better by actually doing this yourself. And like I promised, it's fairly easy and will have a beautiful app at the end of it. But for those that enjoy just watching and working afterwards, I will provide the final robo friends APP files for you at the end of the section. Okay, so we have nothing yet. We're in the desktop. We need to actually create a project folder and we do need to install react. Now. If you remember in NPM, we could install, react and have it as part of our packages in package dot Jason. But there's a tool again because react ups air so common there's a tool that allows us to right away create a react up with all our files already put him to place its called Create React up. This tool is a global package that you want to install from NPM, and it creates a starter project that contains Wet Pack. It contains Babel so we can use the latest JavaScript features. It contains Glinton and debugging that we haven't really looked at yet. It creates all this infrastructure for you, so right away you can start writing the app, and it's a very, very good tool that a lot of people use. So we're going to still create react up. If you remember, we simply do NPM install Dash G, and this will give us create reactive again. If you get these errors, always remember to do Sudo. Now that we have create, react up, we simply say create react app and the name over up in our case will call it Robo Friends. You see that it's installing a bunch of things that we need, who it looks like it's a success, created robot friends at my directory, and it even gives you some good commence and PM start and PM Run, build and PM test and PM Ron eject, but we'll get to that later. Let's see what we have in our desktop folder. We have robot friends that's already been created for us. Okay, lets CD into that, and now if I do ls who looks like we have a ton of folders and files such as Packaged of Jason, that were already created for us and known modules. How awesome is that? It already installs, react and all the dependencies that we need. As a matter of fact, if we go to the desktop, we see the folder here. So let's drag this to sublime text. Open it up and I'm going to change the screens around just so we can see both of these at the same time. Perfect. Now, before I show you what's in the folder, we see that if we go to package that Jason, we see the dependencies. We have react. We have something called React Dom and React scripts, and we also have a bunch of scripts that they have already created for us. We have start build tests and eject. Let's start off with start because, well, it looks like Start reads their react scripts and starts up our server. So I'm gonna say NPM start. Look at that. We have on our local host. A sample react up. So everything's working. We didn't have to do anything except for run just two commands. Really very cool. Okay, let's see what create react up has created for us. We have a read me, which is just information that if you remember, when we put it on get hub. This will display in the Project folder. We have packaged that, Jason, which again makes sense. I'll explain to you what the dependencies mean in the next video, but we see that script were provided for and all of them use react Script. Now react scripts is what makes Cree react up so awesome instead of us installing things like Wet Pack and Babel, Do you remember how much set up we had to do to get? Yes, six JavaScript working And then we also used browser if I to bundle the JavaScript false Well, react scripts does everything for you, and it uses the latest and greatest that we don't need to worry about any of it. So it allows for people to build really, really fast APs and you can use the eject if you end up wanting to customize the react scripts and go on your own. So as your project gets bigger and bigger, you can always eject and customize Europe. It is the best way to start a react project. It's managed by the Facebook team, and it is really, really good. Okay, we also see that there's package locked out Jason File, and this is a file that automatically is generated by package. Like Jason, it makes sure that the version numbers of your dependencies are locked in, so that if I give this project to anybody else anywhere around the world, we make sure that the versions are correct so that it works 100% of the time. We also have something called Git Ignore, and it has a dot in front of it. It's actually called a dot file, and before we run, get and pushed this project on Get Hub. Well, it's check this file, and if it sees anything in here that it shouldn't include, it automatically says, Ignore these files. So remember how I said node modules. We don't wanna push that to a repo because what we have packaged out Jason and it creates unnecessary work and wait to push our project well again. We don't care about known Moges folder. We don't care about the coverage folder, which again is about testing. We don't need to cover that. And we also don't care about the bill folders and a couple of other ones. It just automatically generates this for us. We don't need to touch it. We then have well, obviously our node modules and you can see over here there's a Thanh of them that again create react up just builds for us automatically. We also have a public folder and hear everything should be familiar. We have index dot html. We have something called Manifest Dog Jason. It's a new feature that allows people to download a shortcut to your website and have a Nikon on their desktop. But again, we don't need to worry about it. And then we have fabrikant dot i CEO, which is the little icon that shows up at the top over here. And you can change that with whatever dot i c o file you want. And there's online tools to generate thes for you again something that we don't need to worry about. And finally we have the SRC folder that is the source folder. This is where all the magic react happens. If you look at index dot Js that is the main script file. We're doing a few imports, which you remember. We're just importing different scripts and we're just simply saying this new Syntex that we've never seen before. React, Dom, render app document Get element by D. OK, we know this So we're grabbing a element of I d route and we're saying react on, render up If we go to index dot html file We see here and they have really nice comments that you can read. We see that within the body there is just one Dave, this no script fall is in case a browser isn't using JavaScript again. We don't need to worry about that. It just comes with default because it's good practice. But in the body, we just have this div with ID the root and nothing else. Yet when we go to our up, we see that Well, there's definitely something there. There's the least tax here and at least a logo there. So going back here without knowing any react, we can say that. OK, we're grabbing this idea route in index dot Js file and we're saying we want to render this app component and this is what we called JSX Syntax which will get into later. This app is react way of saying this is every act component and I want you to render on the screen in the body This so I can actually change this to Well, we can say each one Hello world, but hello world Page one. And now if I see this, you'll notice that react automatically compiles this for us. So I don't have to refresh and look at that on our website we have Hello world. Very cool. Now again, another great thing about creative react up. It also gives you warnings that says app is defined but never used. So if I go over here, yeah, I'm importing up but im never using it. So we also get really, really good advice in our terminal off how we can improve the app. Okay, The final thing I want to show you before we get into the next section, we actually start digging into the code. As you can see, the coloring is kind of off. And that's because sublime text doesn't really understand what's going on here. If we change this to Babel. Javascript, There you go. We get the nice syntax and everything looks fine. Perfect. We have our app set up. I want you to change the tag over here to hello world for now, just to make sure that everything is working. But for now, you have a set up in the next video. We're going to go through the rest of the files and actually start building our first component. It's gonna be a lot of fun. I'll see on that one. No, by 3. Your First React Component: All right, Welcome back. We have our hello world app, but that doesn't look very cool. We want to make our robo friends pap. So in this video, we're gonna get started by building our first component. We go back here, we remember that we have the terminal on the right hand side and we just ran and PM Start and Korea act UPS checks all the files for us. Make sure there's no errors. It says that our app is defined by never used. So let's comment this out again. Command slash Say this and you'll see that everything's working fine. Now you may have a few questions just on this index dot Js file one. We see that we're importing react, But how come that's working? We remember that it didn't work before we had to use require and then browser five again. React has wet pack underneath the hood That does the bundling for us. So we're allowed to use imports. As long as we keep these at the top of the file, we can import whatever other files we want or whatever packages we want. We also see that there's two things react and react. Don if you remember, react is a view library. So this is the little robot that we remember from the previous video. It's the core of the package that does the dominant relation for us, but, as I said before, react can be used in multiple places, not just the browser. It could be used for mobile devices. It can be used for virtual reality. And you can plug and play different libraries like this based on what screen you're rendering to so react. Dom is used for the dump websites, so it's the glue of react. But we can have something like react native that actually renders to mobile phones. We also have import index dot CSS and this is a new syntax Will react allows us to add CSS not just in one file, but for each different component. If we go to app dot Js well, we have app dot CSS that describes the app If we go do index IGs while we have index dot CSS that has its own styles and these cells will only apply to whatever components and x I j s renders And the way we use it is we just say import And then, unlike a react package where we just say the name of the package and it automatically knows to check the known Modules folder, we have to tell it where index dot CSS lifts and the syntax of dot Slash means it's in the same directory. So it's saying, check in the source folder index dot CSS should be there. Okay? And finally we see register service worker. And this is an advance stopping that we won't cover in this course. But think of service workers as a new feature that allows our APS to become faster and potentially work offline. It's something that we don't need to concern ourselves with. So for now we can comment this out and it will still work. But we'll keep it here just because create react up gives us to us for free. The things that we really really care about, though, is well, this line over here, this whole thing is what react us. It's saying I want the react on package to use the function render, and this render is I want you to render whatever this is. But if you remember, before we had up and well, this isn't really an HTML tag, is it? We've just created this from It looks like the same directory. There's something called App and it doesn't have ah dot Js file like we see it over here. And that is because it automatically says that if there's no dot CSS or any type after it, well, it assumes that it's JavaScript. But this will work as well as you can see because so, let's go to app dot Js file and see why we can use this HTML tack that we've created. If we go to app dot Js file well again, we see that we're importing something. We're doing something called this structuring here and getting component as well. And we have a few files like logo dot spg and app dot CSS that were imported. And again we see that our syntax it's a little bit off, so make sure that we change our files too. JavaScript able and it looks like class app extends component that comes with react and this is just standard syntax. This renders remember, a component always has the rule that it must render early something and the way we do that is we return a HTML piece of the website. So we see over here welcome to react to get started at it. Well, that's exactly what it says over here that is the part of react. We're creating our own custom components, our own costume HTML tags that we can just at and if you remember, the one way Donna flow picture. We have one parent that has Children, so app has Children. But you know what? Let's build our own component to make this point clear. Instead of having hello world in here, let's create a component cold Hello and it's a self closing tax. So you wanna have the backslash and India instead of saying import app lets to import hello from we'll call it hello dot Js You'll notice that it's capitalized here. Well, if you're building a component, the standard is that it's capitalized. So it will be called hello dot Js. If we see this, will get an air says module not found. Can't resolve dot Hello, because the file doesn't exist. So let's agree one. I'm gonna say new file. Hello, Dodger. Yes, There you go. We have a new hello dot Js file and it's compiled successfully if we go to the website. Well, look at that. It actually even gives us air on the website and that's why create react up is just so awesome. It shows you exactly what the errors are without opening up the console right here again. We have nothing built right now in Hello. So we need to create it. Let's use app that Js as an example, it looks like we need to import react and component. So we need to say and poor react component from react. Okay. And the reason we're doing this again, this is de structuring instead of doing react dot component we can now just do component and it means the same thing again. Looking at ap dot Js it looks like we say class are component. Name extends component. Let's do that class. We'll call this hello again. That's what our components called extends component. And again remember to change our javascript to Babel. And if you remember, one rule is that we always wanna have a render function. And within this render function, we tell it what we want to return. Well, we want to return the hello world example We can say h one. Hello World H one. Okay, let's see what happens when I do this. I save and it says export default import is hello was not found. Well, it's because we're not exporting this. Remember, if we want another fall to use it, we have to export and we use export default when we're just exporting one thing. If we use the word default, that means this file only exports one thing and that is the app. So I can say export default. Hello. Let's save. Looks like it's working. Let's see what happens in our website. Hello world. We've just created our very first component. How cool is that now? Right now we only have one line. But what if I wanted to do something like Div dropping it in a div and maybe underneath here I'll say a paragraph that says Welcome to react. If I save this, I get another air and it's because we're just giving him multiple lines here and returns expecting a single thing. We need to wrap this in brackets like this in order to have javascript say, Ah, this is an expression. Evaluate this entire thing. If we save this looks like it's working and then hello, world Welcome to react Very cool within here if you remember. If we import dot hello dot CSS we can create whatever CSS styles we want, but we need to create that file first. So let's do you file and I need to add it going here. The new fall name will be hello dot CSS Now, when hello dot CSS I can just say that the h one and this is just standard CSS will have background of red. I'm going to save save this as well. Everything looks good and look at that. But you know what? To make this faster and because we've gone over CSS, I want to show you a cool package called tak Eons and tack. Janz allows us to have similar to bootstrap pre defined class names that we can just add two components to make things look really, really nice. So let's do that. I'm gonna close this and say npm install Tak Jahn's All right. It's added a package we can check by going to package that Jason, we see that tack Janz are there and we can use tax sounds very easily by just going to index dot Js file and saying import cash accounts. And now we have access to this package just to show you attack gowns are If I go to tack eons styles, it gives us little classes that we can use that for example, texts center will just say TC as long as we have Tak Janzen stolen, we use TCS class name, it will align our text. So now that we have Tak Jantz and its index saw jazz file, we can just say within here class equals F one for font one and Texan, if I save, I have to do npm start here make sure that our servers running so that we can check our changes and we get Hello world welcome to react. But there's actually one trick here if you open up the console. Although this worked, I get a warning saying invalid Don property class Did you mean class name and reacts a really, really good at giving you errors. And you might be asking yourself why class name instead off class? Because if I save this go back, I no longer have that air. Why is that? Well up until this point, We've kind of just bring html. But this is a JavaScript file. How are we able to do this? This is actually something called JSX. Part of React is that it allows you to write this h email like syntax in your JavaScript. And you might be asking yourself one. Doesn't that break the rule of separation of concerns and to how are we even able to add a C multi JavaScript? Answer. The first question. Separation of concerns. React has the idea of components, and that is it's better to have functionality and styles per component so that each component is its own separate universe. And you just add these components and the idea of separation of concerns with react Is that components? Well, they're concerned about themselves. Nothing else so changes the paradigm here. It's kind of nice, right? I can just look at the Hilo component. I know exactly what it's doing. I can look at the CSS, and any time I need to make a change, I just need to worry about the files that contain the Hello CSS and JavaScript. The second thing is this. This thing called JSX underneath the hood, what react is doing is actually letting you use this syntax, but they're not actual HTM all tax. Remember what I said about the virtual Domine? How react creates its own object and then looks at the dom and compares it and says, I need to change this and it does it for us. React uses JSX to create their virtual dom. They're fake Dom that they built based on what we give it to them. Then they look at this virtual dom and the real Domine. Say who? This part has changed. I'm going to change the dom now based on the virtual dump, and that is why I react is really, really fast. It creates sees objects, which is really fast, and JavaScript and Onley changes what needs to be done in the dark, so just get used to it. It's awkward at first, but again, as long as you wrap it in a bracket, you can write here HTML as well as your own custom components such as Hello that we used in Index Stop jazz five. And now maybe it makes sense why we can't say class here because class is a reserve two key ward and JavaScript class is part of the language that JavaScript uses. So if this is javascript, the fact that we're saying class here doesn't make sense in the old version of react, this actually broke react, but now gives us a nice air because this is JavaScript and not a Shimo. We have to say class name, and it's something that you'll get used to you'll get tricked up with at the beginning. But it becomes easy after a while. All right. The last thing I'm going to show you is the par of react within the hello component. I can now add something called props or properties, and these props can be called anything. Think of them as a Shimo attributes. I can say greeting equals. Then one thin here. I want to wrap it and curly brackets, and this is a JavaScript expression. Whatever I want, I can say hello react ninja. And if I save this, I get her narrow saying that no useless concatenation. So it's saying that Hey, why are you even adding things? You can just put them all together so it's smart enough to even give you suggestions or warnings of when you're doing something that's not clean. But for now, for demonstration purposes, this is fine. Now that I've given it what we call a greeting prop to hello, I now have access in hello dot Js to props. I can now say this dot crops dot greeting I saved this. Go back and I say hello react ninja. You see, with this syntax, it's saying that this object, which is hello, has properties, props, that is greeting. I know this is confusing is just the syntax you have to get used to. But now we have access to whatever property and whatever property value we get from Hello. This is a power that will come in handy later on. But I want you to build your own component here and get comfortable with the syntax. It is really, really powerful. And once you get used to it, you can build any components you want. Okay, One final thing. This index might be kind of difficult, but I want to show you that this is actually just a function. If I do const hello. And in here this function except props. If I do a narrow function here rapid and curly brackets and instead of doing this render. I just simply return. If I see this well, I'm getting inner because this stop props that greetings doesn't really exist because it's not an object anymore. It is a function, so I don't need the props. It receives props, whatever parameters we give it and props that greeting is acceptable to us. I say this. Go back and look at that. It's working. It's just functions. Think of reactors that were just creating these functions that take parameters. And these parameters, which are given by giving attributes and values, are just being rendered. I have access to props that greeting If I give it another prop here called Let's a Dog, then I'll have props, Stock dog available to meet as well. And again we get nice little error saying that component were grabbing this, but we're not really using it. And we using unnecessary string concatenation again really useful, as you can see, fairly simple to pick up in the next lesson. We're gonna start actually working on our rebel friends up now that we have the basics, I'll see in that one. But by 4. Building a React App 1: All right, let's build our robot friends app, I think to get started, we wanna think about components again. And what kind of components we wanna build. Looking at this website, the smallest component that we've probably want to start working on is perhaps the cart component. This card over here, if we can build one of these thin according to what I've said before, we can just copy all these components and add them to the page. So let's start off with this. The card component. All right? Now we won't be using the hello component anymore. And if you remember, it looked like this. Let's just I know it's sad, but we're gonna delete it. I'm gonna delete the hello CSS start off clean. So I'm going to delete, okay? And we'll also delete hello dot CSS. I know all our hard work just completely gone. You know what? We're going to start deleting things that we don't need in this project. For example, the app dot Js that we had initially Well, we can delete that you can also delete app dot CSS half dot test and the logo. All right, so everything's looking. Ah, very small Now we have just and ex Nazi SS Index saw Js and this register service worker that comes with create react up that were oh, needs touch. Okay, Obviously we have failed to compile because, well, the hello imports doesn't really work. We don't have anything. So let's start off with this. Let's start off by creating a card component and this car component will have to import it from card dot Js again if I save this, still get in air because it doesn't exist. So let's create it. I'm gonna say you file card dot Js again making sure that this is using Babel and let's do what we've done before. We do import react from react instead of doing the class way. For now, we're just gonna worry about building the function. So I'm going to say cost card equals it won't have any properties for now. And this will return house and brackets and within here will say that it has a diff within this Div will have an image and this image will have some sort of a source that we don't know what it is yet, so we'll just keep it the way it is closing tag, and we'll have another div that within here. If you remember, we have our name and email in here, so we'll just do and each to, well, just right hard coded valleys here. Well, gee, Jane Doe and finally AP tag that has some email that address solicitude. Jane Doe at gmail dot com. Clothes a tag. All right, so we just have a simple component that's returning card. And remember, we want toe export This. So you want to say export default. The card save I get I'm G. Ellman's must have a Nault property again. It's giving me a nice hand. So let's just add a Ault property. We just say what this photo is, so I'll just say photo for now or I'll say, Robots for now. Compiled successfully. If we look back at our app, we have robots. Jane Doe and Jane Doe Perfect. All right, we have the card component, and you must be asking yourself, Why are we using react here? If we're not really using it, let's see what happens. If I remove it, I get oh, a whole bunch of errors that says react must be in scope when using JSX. Remember JSX is this We're not writing a She male were writing jazz sex, and we need to import react so that our program understands JSX this HTML like Syntex. Okay, now we need an image. And for this exercise, I have something called robo hash for you. It's a really, really cool AP I and for those that don't know what a p I start don't want to have a section coming up with all that information, Will you'll get to learn about it. But the cool thing about robot hashes I can just se anything in here, and it will return every random robot for me. All we need is just this you are l and I can just say for now test if I say this and go back to my example. There you go. We have our random robot. If I change this to less a test test, I save. Well, now I get another robot. How cool is that? All right. I want to make sure that the size is somewhat small, so you can do a question mark here and just give it within height. So I'm just gonna do 200 by 200. And again, this is just something that you do with this girl that they give you in the information here. How will make you go through it? I save everything should look nice. Now let's say I wanted to add a title and also do something like Div for H one robo friends . Here, you see, I get an air here. It's because, remember, we need to return one thing and we can't have multiple elements being returned. Right? If we want to return something, make sure it's one thing or an array. But for now, we'll worry about the title later. We want to make sure that we're only returning one element. So in this case, the diff element that has a ton of things inside, which is the car component. All right, let's save. All right. We have our card component. It looks nice, but what if I wanted to have multiple cars now according to what we know? Because we have the card component. If I go to index dot Js, I can just say put this on our new line so you can see I can just wrap this in a Dev again because we want to return just a single element and I could say card card and close the diff tag save and look at that. We have multiple cars now. They're each their own component. OK, but let's have some styling to this just to make it look nicer again. Because we have Tak Janz. We can use some really nice syntax. If we go to the cars component within the Divi can say class name again. Remember, we can't use class BG light green. So that is background like green. And this is just tacky on classes that are already pre defined for us again. CSS section This isn't that so. We're not gonna focus too much on CSS. I'll just give you the stylings that you need. We have the div the border. We have padding of three lots of margins. Tuas Well, and then we'll do grow, which is the animation. So if I save this look at that, that's that's pretty nice. You know what? Let's add a few more will do B W two and shadow five to add a bit off shadows to them. There you go. You look more three D. Now that looks very nice. There you go. We have our cards again. We don't want this static card where it says Jane Doe, Jane Doe, Jane Doe. We wanted to be dynamic, right? So it sounds like we need what we call props, properties well and actually have for you a robot's object that I've created. So I'm just going to add a new file here that says robots dot Js and within here I'm just going to copy and paste this. As you can see, it is just a constant object. It's robots, It's an array off objects, and it has I d name, user name email. And these are just random that I've made. If you want this file that you can grab the files from the end of this section. But for now, this way I have something that I can use and you can see I'm exporting it. Well, I can say the import robots from dot because we're in the same directory robots. Now, if I save this get robots is defined by never used. But because this is using export instead of export default, this file could have multiple exports. It just so happens that I only have one. The rule is for these ones because there were default. While he can just do a card for once that aren't default. You have to destructor it. That is like this, so that if I have another very bold, let's say that, says Katz. Then I will have to do cats to grab it. So we have robots, and now I can't give it some properties. I can say I d equals and again we have these brackets so that it's a JavaScript expression and will say robots. But robots first array dot i d has the a d Then we have name equals robots again, the first user dot name. Close the bracket and then we also have email equals robots first in the array dot email. Holy moly. That's a lot of typing, and I'm gonna make the smaller just taken. See, I'm going to copy and paste for the other ones as well. Except for change this to the second user and then the third use hope. The second user. Now, if I say this, it's compiled successfully, but well, nothing has changed because we need to go to cards. I'm gonna close robots dot Js for now and this because cars needs to now accept parameters . And what are the parameters? Well, its properties and these props are now props dot name and props dot email. I saved that. Go back. It's not working well, because this is a JavaScript expression, right? So I need to wrap it in curly brackets just the way it works in JSX. Save. Look at that. We have dynamic names that were passing as properties to each one. Let's head tech center here and there. You. Now we have everything center. That's a lot better. Okay, but we also passed I d. We can use I d to do something cool. If you remember in the SX section, we have template strengths And because this is a template string, we have to wrap it in a curly brackets. So it's a javascript expression. And now, within the rubble hash instead of using test here we can randomize what robots we get. But using the syntax as you remember and in here we can just say prop Stott i d. So now this will say robo hash dot org's I d off Whatever it is for the robot with the size . So we make sure that again the ideas, they're always dynamic and changing. If I see this and go back, look at that. You see that there's a bit of a delay again because we're talking to the A P I and the AP eyes returning. Answer for us. But how cool is that? We just created our own dynamic cards. One last thing. Although this works something nicer that you can do is we have something called de structuring. We can do something like const name email equals props again, as you might remember from ES six and now I can use and let's I'd ideas well, and it still works. Another cool thing that you can do and this is even cleaner is within the parameters You can do de structuring again. You can add these over here now and now if I save, it should still work. And it does. This might be confusing if you're new to destruct Oring. But as you saw step by step, we're just receiving props and we're destruct. Oring the props right inside of the brackets. Here. This is much cleaner. All right, That was a lot of fun in a really, really fast way. We've just created our own cards in the next section. We're gonna expand on this and make this even better. I'll see in that one, but by 5. Building a React App 2: Welcome back. Let's continue building our robot friends app. Now, up to this point, if you look at our index R. J s well, that was a lot of copy and pacing that we did if we had a lot of robot friends. Imagine having Ah, hundreds of these that we have to constantly copy and paste that's not very efficient is also, if you remember our diagram over here of one way data flow. We always had a parent, such as an APP component that had Children that have their own Children and so on and so forth. So using that knowledge, we can have one big app component that have different Children so that we make each components small and reusable. Let's go back to our example. Now that we have robot dot Js, we ideally can list all these 10 users the way we do that. Let's have a card list component so that we import a card lis component, which is a parent of card. Then we can just render that instead of all these cards, so I'll say card list and again we'll have to created. So it's a new file card list, R J s again change. You get to our Babel. Syntax will do import react from react and I'll make this a little bit bigger. And again we'll just say, const card list equals. I won't accept anything for now, but it will return. Well, what should have returned? It should return the cards right. We can just copy and paste this. Put this in here. Let's fix the indentation here a bit. Now. Card list will be the one that returns These cards and index dot html will just render card list if I save this, while all guessed that card isn't being used so we can remove it and robots are being used . But we can use the robots now to pass that as robots equals the Robots array card list is accepting a robot's prop. If I save this, everything's working. But I'm getting the Sarah because well, as you can see, we didn't export. If we go back to the car list export default and hopefully by now you're starting to get the hang of it. There's a lot of repetition here, but each time, as long as you learn this syntax, we're creating these components nicely and we get a ton of errors because we don't have any access to robots and I DS and we'll card for them at either. So let's import card from again. Same directory card dot Js robots isn't defined. We know that card list receives robots now, so I have access to it in the props or Aiken d structure it and say that we have access to it with robots. I received this. Look at that. I have everything back the way it waas. But it's not all of them, is it? We're only grabbing the 012 only three of them. And as we saw in the robot's Dodge S, I have 10. How can we do this better? Let's make this a little bit smaller, say agency. It looks like we want to do some sort of a loop, right. We want toe loop over the robots and create a card component for each one. How can we do that here and react? Let's start off by adding another variable here. We'll call it const Card component and within the car component. We want to say that robots we wanna well, what do we want to do? when we do a loop. As I've said before, we want a map, right? We could do for each as well. But I always recommending map. And within this map, each robot gets this. So we get a user every time we mapped through it so we can say user should return again because a map needs to return. It returns this right. We want to return a card component. I can copy and paste this right here and within the return. I can just say now instead of robots index zero, do we have the index? Well, yeah, because you remember the second parameter that we get in a map is the index. So I can say user and I for index and now within robots, I'll say I for index each time the first time around, this will be zero, then one, then to all the way to nine to include our 10 robots. Let's see if this actually works. If I add card component here, you remember that we have to wrap it and curly brackets because it's javascript, so it knows to evaluate. If I see this looks like it's compiling successfully, I go back and holy moly. We got ourselves a card array. How cool is that? That was incredibly fast to do. We just use our common sense and JavaScript knowledge. Just use map to return multiple components. I hope you realize how powerful that is. And that is why I react is so popular. Right now, we're able to use JavaScript to return these HTML elements and do things really, really fast. If I open up the consul here, I'll see that I get a warning. Each child in an array or it aerator should have a unique key prop, and there's a link to it if you want to read up more on it. This is a special case that you just have to remember when working with react the way the virtual dumb works is. It keeps track of what all these cards air but without having something called a key prop. If some of these cars get deleted, React won't know which one's which and will have to change the entire Dom versus if it had a key, Profit says, Oh, this one gets removed. I can just remove this from the dog. Remember, we want to minimize the amount of work that we do to the dump. So when you do a loop, it's just something you have to remember. You have to give it a unique key. In our case, we can just say hi, which is indexed. If we save this, we have to wrap it in curly brackets again because it's javascript. And there you go. Now we don't have the error anymore. And let's just make this on a new line just so it looks prettier and because we're returning it on multiple lines, we want to wrap this in a bracket, right? Right. And that's better. So this is working nicely as we want it. I want to show you one thing, because this is javascript. Anything we put in these curly brackets is JavaScript, including comments. Well, we can just copy and paste this entire thing, remove the constant and just add it within the brackets. If I see this, it should still work like it does. And this is another power of react. React makes you a really, really good JavaScript programmer. Because other than this JSX Intacs, everything else is just JavaScript. So we're able to create a Carless component that lists cards, and all we need to do is pass it a prop of robots. And we just made this a Thanh cleaner. Very cool. All right, that's it for this video. More things will happen in the next one. See you on that one. But by 6. Building a React App 3: all right, We're getting closer and closer to having our app look like this. But we clearly see that we have a search box here. So in this video, we're gonna work on having this interactive looking back at her up. We see that What? We definitely need a title and the search box. So let's create that. If I go to index dot Js, I think now that we're officially building an app instead of having the Carless component here, we should have one big component cold app. And this app will be the father off all our Children, all our components. Let's do that. Let's build the app component first, and this app component again will import react from react and app. People equal the card list component ways to again just copy and put in here and again changing this too. Babel, we wanna import the card list component and we also wanna have our robots actually imported in here. So we have access to it and then finally we now just want to render the app components so we can just bring this back to the way it waas we save. We need to obviously export our app. So we'll say export default app. Save this. Let's go back. Yeah, everything is still working now within this Carless, we also have a header. So we'll do had her one. They'll say robo friends. And again remember that we need to return just one single parents. So we need to do something like a div to wrap it. And indeed, to close this h one tag. All right, I have my robot friend Steidel, and we also need a search box. And although H one was easy and we don't have to build a component for it, it sounds like we probably want to create a search box component for this app. So let's do that. Someone say import search box from a file that will create called search box. We will creating you file, and this file will have imports react from react, and the search box will have a function that returns. Let's think about what it returns. Well, it definitely returns and input, right? That is type of search. And let's also have a placeholder. Let's close this and that placeholder that says search robots. We close this and safe and we have to export Export default. Serious box Save. Compile successfully. All right, we have our search box, but well, it's not searching anything right now. Let's add this on a new line. Just so looks nicer. And it's always a good idea, just in case you want to add more, thanks to the search box to wrap everything in a diff. So I'm gonna do that right now. And this Dave will just have a class name of patting to again using tack Jahn's and with the input we can do a class name and I just know these look good. So I'm just going to copy and paste year just padding with background lightest blue If I do this and let's go back. All right, this looks better. We want a center everything. So maybe in the app we can just add a class name. You've cools to texts center, see if that works. There you go. That's much better. I like this already. Now how can we make this interactive up until now, we've just had this static websites, but real websites are interactive rate. Let's think about this logically. We have a nap. We have a search box and we have a card list, but the search box component needs to communicate with the car list. And same with the card list. Car list needs to know what is in the search box so that it can filter out robots accordingly. Let's go back to our image that we have of one way data flow. Looking at this, we have the APP component and then the card list component that has cards and then the search box component that what doesn't have any Children now. But in order for these two to communicate, we have a warm way data flow, that is, they need to send their information to their parent, and the parent tells them what to do. Now, how can we do that? Up until now, we just had some data that we just trickle down, but we never had it where one of the Children had to modify data or communicate with a neighbor. Well, in order to do this, React has an idea of something called ST. Up until now, we learned about props such as properties that we keep passing down, but we've never changed them because react just reads the props. If I go to Carless. It just reads the props that it receives and is just renders something. And this one way data flow is really nice, because this card list is a pure function, it receives an input, and then it always returns the same output. So if robots are always the same, it's always going to return the same thing. It's deterministic, pure functions, and it's something that we've talked about before, and this is a really, really good thing. These components are what's called pure components, and some even call it dumb components. It just means that they don't really need to know about anything other than the fact that they're pure functions that receive something and return something. And this is really nice because we always know what this is going to look like. And that's what we had up until this point. But now we have to worry about something other than props. Props never change. Props are always just inputs that we get, and we've never modified them. But in this case, we need a memory in our rap. We needs this to communicate with this and also change an update accordingly. And that's what state is in react state, and you'll hear this in computer programming. A lot simply means the description of your app. A state is simply an object on object that describes your application. And this state, which describes our application, is the robots and whatever is entered in the search box and state is able to change, were able to change the value of the search box, the value of the input, and were able to change what robots array means. What gets displayed. This is a rule that you just have to remember. Props are simply things that come out of state, so a parent feeds state into a child component. And as soon as a child components component receives a state, it's a property that child can never changed our property. The parent just tells it what the state is and the child we Siri's it as robots. So the first thing we need to do is to start being able to use state in our app, the description of what our state should be. So let's just do a constant state for now and show you that our state needs to have a robot array and Manisa half let's call it search field, and this is just whatever our search field needs. But in order to use state, we have to go back to our original way that we created react components. If you remember this when we first did create react up, we create a class and we do that by saying export default for export. AP extends react dot component It extends the component class and again we can use shorthand here and just say so. Now we can just remove react from here. And this always has a render function that has to return something which is this again is just the syntax that you have to get used to. If I save this and I made a mistake here instead of export this just say class. So yeah, class app extends component and then we do export default app. So again, we're just declaring a class I save. And we just have something that says State is assigned a value but never used. That's because that's pretty true. We don't use it. So how can we add state well and react? We simply do a constructor. You might remember this from when we spoke about objects and this constructor in here we can declare the state we simply say this dot state equals And in here we just put whatever we want our state to have. So if I save this, I get this is not allowed before super again, something that you might remember from the Advanced Objects video. In order to use this, we have to do this weird thing where we call Super, which calls the constructor of component. If I do this and save, everything's working fine. And now we have our state, which is robots and search field. And this state, as I said before, is what describes our app. These are the things that can change, and that's what it is. State is something that can change an effect, our app and they usually live. And the parent component, the component that is the parent that just kind of pass estate, two different components. Now I can access robots not from here, but from this dot state dot robots and again just reacts in tax that you'll have to get used to it. All right, so everything is working as expected and you see that our state, which is robots is now passed down as props. So card list except robots as props, even though in the app dot Js it's a state. And like I said, because APP now owns state that includes robots, it's allowed to change it. Okay, now the way we can communicate them, we have these two values and ideally, in the search box I have something called on search change which again is a function that I'm just going to make up. This is just a random name that I've created and on search change I want to say that every time the input changes just like we do with dominant relation, we get an event. And within this event, I'm going to consul dot log. This event created a function and I want any time this input changes to trigger Consul doll Buck so we can pass this. Actually, now I can say search change is on search change, but again because this is an object we have to say this dot so that it says this which is thea up dot answers change his search change. If I save this and now go to the search box, I now have sir, change as a function, so I can just say just like an HTML. Remember in HTML Hacking do on change. HTML. It's an event. Were just listening to any time the input changes I can say on change equals search, change. Let's see if that works. I'm getting no heirs. If I go back to my app. I opened up the console and I type in something. Look at that. I'm getting the event and this is just something you have to remember is that with an event we always have event dot target dot valley, which should give us the value off the search. Let's save that and type in something here. Look that we're now noticing the difference as retyped. So let's go over one more time. What just happened? And again, I know this is tough. This took me a while to get when we first started, but this diagram really explains it. Well, I have my app component, my search box and my card list. Any time the search bloc changes on change, I'm going to run the function. I am going to cool this function and the way we call it is we add this. Remember how when we did dom events, we define the function, and then every time the event happens, it would call it So we're saying every time the on change event is triggered called the Sir Change function. And if you remember, the search change function, which is a prop, is the on search change function that is defined in the up. That's how we communicate with the parent. It triggers the event. The parents says, hope, run this function. And now this function gets rent. But now that I have the value off the search input, I can now directly communicate that search input to the robots list. Let's see how that works. We can create a variable, let's say filtered robots, and this will equal the this dot state dot robots and these robots, which is the array again. This is how we access state is going to use filter filtering our ray. We give it robots and now our array will have to return a condition and the condition is going to be robots dot name, and we're going to do something that we haven't seen before, which is to lower case. And this is a method that comes with all strengths, and it just makes everything lower case, and this is good for comparison, so we don't have to compare capitalized or lower case. And if the name off robots, which is now lower cased includes, is another method. And again it's pre built into JavaScript if it includes the search field. And again we want to do to lower case in case Well, in case we use capitals or lower case, it works both ways. And there it is. If the name of the robots in lower case includes and this does the comparison. If anything in the string includes to lower case, well, then Onley return the robots that returns true to this. But let's save. Oh, and you see here the how we get the search field there because, well, it's part of the state. I have to do this dot state dot search field. If I save this, I get that filter. Robots is assigned a value but never used. But don't worry. We can now console, log this and see what we get. If I save, let's go back to our app, and if I search something here, hope I get an error, and this is an error that is very, very confusing. It is streaky the first time, but bear with me here. The problem right now is that the value of this? Well, it's not referring to the app because Theo event happened in the input. The value of this is well, the input and input doesn't have ST dot robots, and this is a trick that you always forget. But just keep this in mind as a rule of thumb with anything that comes from react. So constructor and render our pre built and react any time you make your own methods on a component, use this syntax so Ara functions. And this makes sure that this value is according to where it was created, which is the app I know. It's confusing. You can read up more about it. I'll leave resource for it. It's a tough topic to get, but again, Rule of thumb used the arrows. If I do this now and I click there you go. I now get robots, but here's the thing. Search field. Right now you see that I still have 10 robots. It's not really filtering anything, and that is because my search field is always an empty string in order to update state again. Another rule off react is to do this dot set state and its again a method that comes with react. And any time you want to change state, you always do this. You don't do this dot state dot search field equals you never do that. You have to do this dot set state and within here we just say search field is and again we using an object. So search field is now going to be event dot target dot valley. If I see this and go back, you see that now everything is being filtered, some changing the state so that the search field always gets updated. And now we're filtering the robots according to the changed search field. Okay, so one last thing looking at this, we have the fact that filter robots is still not assigned. And you're right. If we look at this, we've now communicated the search box with the app and we have the search field constantly changing. So now we need to communicate it to the filtered robots. What we can do is that filtered robots can now be used as props instead of this dot state dot robots. So let's do that. Let's move this down here and now we have access to filter robots, and instead of passing this dot state dot robots, we simply pass filtered robots. If I save this, make sure the search bar saved as well. And now I go back. I'm gonna close the tab and let's check it up. Look at that. We have our app working. How cool is that? Let's go over it one more time. Show you exactly what it does. We have our APP component that has two states robots and search field. And because APP owns the state, any component that has state uses the class in tax so they can use the constructor function to create this dot state And this state is what changes in a nap. It's what describes the app. Remember when I said the virtual dom is just a javascript object? The virtual dom is just a a NA object that collects this entire state and react uses this state to render and pass them down US props to these components so that these components that are just pure functions can just render. And we always know that the app is going to look the same because, well, they're just simple, pure functions. We manage this state in here. The app is the only thing that can change the state, but it can pass down things such as props. So we passed down on search change to the search box and the search box. Every time there's a non change on the input it, let's see app know. Hey, there was a change around this function. It runs the function with the event and updates the state off the search feel to whatever we type. Now, with the information that we have from the search box, we can now communicate to the card list and tell it, Hey, I want to filter the robots state to now have on Lee what includes in the search field. And instead of passing that this start stayed I robots, we just passed the filtered robots. You might be asking yourself what robots That never really changes, does it? We always just create a new ray called filtered robots, and we always pass that down. Does this need to be part of the state and right now, not really, because we're just have a hard coded robots. But when we get laid on into the course, you'll see that that's not the case. Most of the time you're getting the users or robots from another place over the Internet, in which case we will need robots to change from on empty array to an array after we go and grab all of our users. All right, that was a lot. I know, I know. It's a lot of information, a lot of new syntax. But as you can see, with a few lines of code, we build a pretty awesome app in the next video. We're gonna finish this up and finalize our up so it looks as pretty as this. I'll see in that one. No, but 7. Styling Your React App: okay are Roble friends. App is starting to look good. It does some searching, which is great. It's very interactive, but let's have some style sit just so it looks like this and I mean styles is something that we've already covered. I just want to get you up and running quickly. Let's start off with first the background. As you can see, we can just generate a Grady INT and have that background. I've already found a really good background ingredient that we can use. You can use the background generator that we've actually already created in previous videos . For now, as you know, if we want to change the CSS of our entire app, well, we have index dot CSS, which is perfect for this. And then we can just put in the Grady Int that we want going to save this and look at that . It tells us that there's an update, and Grady in has outdated direction. Syntax. New syntax is like to left instead off right? Well, isn't that convenient? Let's do that two left. Let's see if that still works. Okay? Everything's looking nice. Perfect. Let's fix our font. No, if you see over here we have this cool font. How did I get that? Actually, I just Googled for the second local font. And I found this website that has free Fonso you can use and we can actually just click on generate font face west front. And there's something that you don't really need to know is just a matter of Googling and finding the front that you want. But if you download this file, you'll see that it actually has the W o FF, which is actually a font file and style dot CSS. So it actually tells you what you can include. Let's copy that added to our header one which, if you look over here, lives in app dot Js using Abdullah CSS, which I think we've deleted that already. So let's bring it back by adding a new file app dot CSS So we'll just copy and paste what we did. And font face just tells us our font. And in order to use that, we'll just say H one has font family of Sega logo front. Now, this won't actually do anything because, well, we need thief on file so they can find Sega logo fund and That's simply a matter of us dragging in our font file. Let's minimize this into our robot friends and let's see now it should be right over here, and we can simply access it by looking at the girl. If our app dot CSS file has access to this font, we can just move it into our source folder. All right? And one thing you might notice is that well, nothing will change, because in order for this CSS file to work, we have to imported. So always remember, import ap dot CSS. Save it Compiling. All right. I don't know if you can see it, but it's there, so we want to make it bigger. And obviously the color black doesn't work well with this background again, this partisan CSS. So I'm gonna go through this quickly. I have a few stalls here. Font weight and a color. That is nice. Make sure that we have it imported and using tacky ons. We can just make this bigger. We can just say class name equals. You can do F one f two. Let's do F two TF one. All right. That looks pretty good. Our app is looking nice and clean. There's still a few changes that we want to make, but overall, everything looks good. We've played around a bit with the CSS. We've added a new font file and we've changed a background off index dot Js file with the index dot CSS file. All right, we're going to get back to learning more. React in the next video. I'll see on that one, but by 8. Building a React App 4: Welcome back in this video, we're gonna talk a bit about something advanced, and we have uncovered ID much in this course, and we definitely will in the next section. But I want to get started with it so that even though it might be new and confusing at first, by the time we get into the next section will come back and review exactly what we're doing . I want to make this app more realistic. In a really life app, we wouldn't necessarily have these robots written like 1/2 here and robots dot Js I've just created this fall, but in real life, well, we're not manually entering users. We're use something like an A b I and what that means. Well, we want when this website gets loaded to make a request somewhere out there in the world of the Internet and grab these robots from a server. Well, we can actually do that. We have over here something called Jason Placeholder, and you don't need to worry too much about it. But they actually have a really nice your l that we can use and they returned while we need a name and I d and a user name the rest of the information. Well, we don't really need it, but as you can see, just by typing in this your l I get this. So using this, we're gonna make our app a little bit more realistic. Let's get started if I close my CSS file since we don't need them anymore and let's goes the rest of the tabs as well. Looking at this app component, we see that it is what we call a smart component, unlike the search box or car list that are just pure functions. As you can see here, after GS actually has state a piece of data that describes our app and because they have state, we call them smart components and smart components tend tohave this class cinta. Now, in real life, when we start up this app, this robots would actually be a nem PDI array because there's nothing there. We haven't grabbed the users, so most likely if I save this, robots wouldn't display until I load the website. And then a soon as the website gets loaded, I asked for the users from somewhere over the Internet somewhere hopefully here. So let's do that react comes with a few other things inside of components that we can use And they're called life cycle methods and it looks something like this Don't get too overwhelmed. These air just methods that we can use in here that comes with react. And they're called lifecycle hooks. Because what they do is if we run these, it will automatically trigger. When this app gets loaded on the website, let me explain. We see that we have three sections we have mounting, updating and unknown ting. The way react works is we do something called mounting When I click refresh here the up component This component right here gets mounted into the document with the idea of route. If we go back to our index dot html file Well, our webpage is nothing but a diff with an idea of route. When we say we mount a component, we're replacing this and adding our entire app that's mounting so mounting is the start of the app now went mounting. These are the lifecycle hooks that get hit and they're in order. So the first thing is it checks. Hey, does this component have a constructor? Well, does up have a constructor? Yes. Okay, then run this piece of code. Does it have component Will mount? No, it doesn't. Then ignore it. Does it have render? Yes, it has render run this. Does it have component? Did mount? No, it doesn't have component amount ignored. And it just runs through this every time. It also has something called updating. And that is whenever a component changes. For example, when we had the list Well, every time I type something, the card list component gets re rendered because we have new information. The function receives new inputs. Same with the input component. So again, within those components, if we wanted to, we can add component will receive props should component update so on and so forth. And finally, with and mounting is when a component is removed from a page. For example, if we change to a different page here, the component will amount. The app component will get deleted from the page. These air called lifecycle hooks because they get run every time a component does something and it comes with react so you can just put them in into your class component and they will automatically get triggered. You don't have to worry about calling. Let me demonstrate this for you. We want to use component did mount, which gets cold after Orender. This says that yes, the APP component is mounted on the webpage and it's rendered. That is, it's displaying something. Well, we can do that by saying component did. I won't And because this is part of react, notice that I'm not using air functions here now within Component de Mount, I can say console thought log check. If I refresh this and open up the console, you'll see that I have check. If I refresh There you go. That was really quick, but you see that that gets called automatically. Even though I haven't said anything using this, we can do something interesting now when component does mount, I can say this dot set state to now have robots to the robots that we get from the JavaScript file. If I do this and save, let's refresh and see what happens. It's really, really fast. But you see that we're getting our robots. I am saying Run the constructor with an empty array just to show you the order of execution here. If I add a console log and we'll just say, one here will say, Do you hear? And we'll just say three if I save this and open up the console have won 323 Who? Let's just check that we have one that runs first than three, which is render then to which is a component did mount and then three runs again. Actually, let's change this to actual words so that you see better what is actually happening. All right, if we save and refresh, look at that. We have constructor that Iran's first, then render thing component did mount just like this order. But we now also have render Why did render run again? Well, if you remember, we created the constructor. We ran Brender, and then we updated the state and component Dead mount. So because we updated the state every time the state changes, remember, we go to the life cycle. It's updating Iran's render again, so because it goes from an empty array to a robot's list, render gets rerun and the Virtual Dom notices that there's a difference and re paints our Web browser to include the robots vehicle. Knowing Moby just did. We can remove this and finally make this more realistic. Instead of using the robots file, I'm actually going to remove this and in here, I'm gonna show you a cool way to grab this list from here. I'm going to copy the link, and I'm going to say fetch, which will learn about in the next section. We're just saying, make this http request and fetch receives this again. We're just saying go to here. I thought then this is going to receive a response. And this response is Well, this part is a little tricky. You just have to get used to it. Dog. Jason, we just have to convert the response into again something that we'll talk about in the next session. For now, just you can copy and basis follow along. We'll come back to this and explain what's happening and from here said this on a new line . So we know exactly what's happening. Well, say dot then robots or we can say users because in this case, we're getting users. And in here we can say this says state robots to equal users, and we have to make sure that we return this save. Let's see if that works, Look at that. Let's refresh. And you see that little lag? It is now working. So in here, we can actually make this smaller and reduce it to one line. You should remember how to do that and we see that were simply updating state after we fetch. So we fetch whatever the users are. We're getting a response. We're doing some magic here with Jason, which will talk about later. And then we're getting the users and updating the users with sad state. So if I refresh again, if I don't do this, let's say I just here don't do anything and return an empty object. You see that I don't receive the robots. I only received the robots after I update with these users. How cool is that? All right, that was a lot. And this probably looks pretty scary to make you feel a little bit more comfortable because I'm using fetch and there's nothing attached to it. Does this mean that it's part of the window object? Let's check if I open up the console and I do window dot Fetch. Yeah, look at that. Fetch is a method on the window object it comes with all browsers now it is a tool for us to make requests. Two servers. And as you can see, this is a server that returns for us when we do slash users a list of users that we can use , which is perfect for a rap. And finally you're wandering. What if this was really slow? What if this took, I don't know, five seconds, and we had a whole town of users. Well, in that case, you can do something like an if statement if robots dot length is zero, in that case, we can return on a Chuan that says, loading else. We can just say return this again is just JavaScript. That's a beauty and react. Oh, and you see how I get Robots is not defined because it's this dot state dot robots Again, we're referring to the State of the APP and here if I refresh, let's just say that we're not updating the state and I'm going to just return an empty object. Well, in that case, I just get loading very cool, and this is how you build re elapse with react. You have a loading bar. They can just add here, make requests on component did mount and interact with components. Very cool. You know what? We have ourselves our app. There's one last thing I'm gonna show you with react and you've learned the basics and react. You can take this now to build any app that you want. So one more thing to go. One more little piece to get our react knowledge completed. I'll see in the next one, but by 9. Building a React App 5: our robo friends are looking really, really nice. I really like this up. There is one issue, though. If I minimize this okay, it's responsive. It looks good. But if I scroll down, well, I lose my search bar at the top would be nice if this was at the top. And I have a scroll that I can do and still search through my friends. Well, you might be thinking, Well, there's probably a CSS style that I cannot hear, but only illustrate to you the fact that react and why react It's so good is because you can create components that are reusable, not just car components, but functionality. Wouldn't it be cool if there was maybe something where we can add around card lis? Maybe I can create a scroll component and this scroll component just wraps the card list. And now a card Lis will be completely scroll herbal. But now I can use scroll this component anywhere in my app. Anytime I would need scrolling, I can just wrap it around. Can we do this? Let's give it a try. I'm going to the import a component that we don't have yet. That's called Scroll from a file that will create in just a second has created a new file. We'll call Let's scroll God Js and here will again go through the motion off, React from react. Let's make this a little bit bigger. And again I want to change this to Babel and we'll say Cost Scroll equals. It's going to return. Mm. What should it return before we talk about that? Just so we don't forget, we have to export Default Scroll. Now here's a problem. We I want to return something, But it doesn't make sense, does it? If I go to app dot Js scroll, it's not a self closing component. It wraps components. So how could we tell Scroll to hey, just render whatever is inside of you. Up to this point, we've learned about props and we've learned about state. There's one or the thing in react that I want to teach you. And that is Children and Children is this scroll can use Children as a way to render its Children. What do I mean by that? Well, in here, every props object has Children. So if I go props dot Children, well, let's see what happens I save and go back, everything's rendered. But if I remove this and I just do and h one, I just get on this. You see props, thought Children is exactly that. If I console, don't log props, let's open up the console. I see that I get an object. And even though I didn't pass any props to scroll automatically, every single component and reacts has this property, Children and this Children a kind of looks confusing here but has card list type card list . So using this prop start Children, we can create components that wrap other components. Up to this point, we were only able to wrap these lower case components, which are kind of like the HTML tags. But every time we had a custom component with Capital Letter that we built well, we couldn't really wrap it. And now we can, using this style Children. But here's the cool part. Using props out Children, well, I can create a scroll herbal component. Let me show you how simply do def close that Dev and in here again, curly brackets, props dot Children and Albany Now is to add styles to this def. I could create a scroll dot CSS file and add a style. So it's global, but I want to show you another way, which is using stop just like an HTML using this style attribute in JSX, I can add styles, but using double curly brackets, that is, this is a JavaScript expression. And within this, I'm returning on object. And this object can have CSS styles such as a property overflow. Why, which is a CSS property? And this we can say scroll again. A CSS way to make the elements scroll herbal. Well, say border is one pixel solid black man Finally will give it a height off 500 pixels. Gonna make the smaller so you can see I'm going to save. Compiling is fine. If I go back, it looks like we have a box here. Let's make it a little bit bigger just so you can see I'm gonna say five pixels even though it's ugly. Oh, and I forgot a t in here height. All right, let's see. Look at that. We have a scroll herbal component. Let's make this a little bit bigger just so we can see it better. Look at that. If I make this smaller? I now have a scroll herbal component inside of this. Very cool. Now this is a simple app. It allows you to search. It allows you to scroll. But it does show the power off react, doesn't it? We've created these simple functions, and the only thing that we tell it to do is well, we tell it what state it has. The entire app is described through these two things. The robots and search field and react takes care of the rest. A soon as search field or robots changes, react, trickles down. All this information asked props to all these components and magically creates our view for us. That's why I reacted so powerful. It's a view layer. It takes care of manipulating the Dom and all we tell it is Hey, what's the state? What are the functions that you wanted to work with? State and the rest? Well, it optimizes to make sure that everything is super fast and you can see how amazingly fast everything is here. It's a super snappy app, and these components are now reusable. I can bring search box now into another part of the website. I can add scrolling to another part of the website. This is what made react so powerful. And this is why so many websites are part by react. Once you learn thes syntax and you get used to everything, that's when react truly becomes powerful. And although we took a bit of time to create the sap, once you get used to it, an app like this, you can create it in well, less than an hour, probably 30 minutes. All right, I think we've done a great job here. Can't wait to see you in the next video, but my 10. Building a React App 6: I want to add one final thing that we've kind of overlooked up until this point because, well, I didn't want to bog you down with too many things. If we take a look at our project, well, it's It's a lot of files. Even though it's a simple app, you can imagine how bigger and bigger and bigger this source file can get. An organization is a big part of working on projects. Most applications will be way bigger than the ones that we've built, and we need a good way to organize. Thes and folder structure is one of the most important things. So let's clean up this code. I'll show you what I would do if I was working on this application, and I want to make it mawr extensible That is cleaner. So when other people come on the team, they understand it, and also I can keep growing this code base. First thing I will do is I'll create a few folders. One is gonna be cold components, and these are the components that we've built such a scar list, search box and scroll. The 2nd 1 is going to be called containers and containers are these smart components, the containing components that have state in them that have lifecycle hooks that have the class syntax. You see these components or these containers we can to use a pure function with them because technically they're not pure. They have state that they modify within these functions. And that's OK. It's impossible. Toe have just pure functions because most of the time, while we may need to make requests to the outside world, but these components are special. We're gonna call them containers, they contain things and they just passed down state two components. Now we can just say that we're gonna move ap dot CSS to now be in containers. We're also going to say app dot Js We're gonna move it to be in containers as well, and then the components thesis impolite functions, pure functions that we've created, search box, scroll and Carless. Well, these can be in components. Let's just open up the folder and make this simpler. Going to close the tab, Open up rubble, friends and let's open up source. I will say that scroll search box card and card list, which are just pure functions, are inside of components Now, if you remember, our font is also part of the app dot CSS file. So we'll move that in there as well because it's defined in there with that. Let's go back to our up and well, now we have a lot of fails because these now refer to different parts. We don't app well lives in a different folder than car list in search box and scroll. The way we do that is we use dot dot, which means leave the folder or go to the folder, and they're from there going to the containers or sorry going to from the containers. So where app dot Js is I'm going to leave, which is dot dot and then once somewhat here at the folder level on the right, say components and I could do the same for the rest of them as well. Save. And we also have index dot Js that now is referring to app that lives in containers. So again, because we're now leaving a folder, were in the same neighborhood. While we can just do dot containers up, let's save and I spelled out wrong good spelling by me. Everything looks fine. Let's go back to our website. There you go. Everything is scrolling nicely. Okay, so we have a nice folder structure here. Things have cleaned up, and we also have scrolled on J s. And I think we just have an extra copy of it. And so we can just might have made a copy of that, Make sure everything still works. Yeah, everything still works. We want to remove a couple of spaces here that we've done. We also notice a few errors. So not necessarily areas, but stylistic things. For example, with the filter, I say filter the robots and iterated through the robots. That doesn't really make sense, does it? It should be. Each item is a robot user that we get. So I say that Still the same. No errors. I also see a bit of cleaning that can be done with with using this dot ST a lot. We can just say again, using deck structuring. We could say const robots and search field. We're doing the structuring. He goes this dot state and now I can remove this thought state from here I can remove this dust A from here and from all the other places that were using this dot state and the render by save Everything still works, but the code is much cleaner. We also noticed that within here, robots that length equals zero. There's actually an easier way off. Doing this ant again is just stylistic. This is going to equal zero. So if this is zero that's going to evaluate and JavaScript to false so we can just say the opposite, remember this syntax? So if this is zero, which is gonna be false, turn it into True so that if there's no robots were loading safe and that's just still work . And then finally, if you see an if else statement, well, we can do a Turner, you can we? We can say return robots. If there's robots, return this. Let's see if that still works. We don't need that extra back. Look at that. It still works, and you can see now that things they're much cleaner. We have an app that renders all our things for us and to finish off. Remember package dot Jason how we had some pre built script and we had this build command. If I stop this now and I do 10 p.m. build or MPM Ron Bill, check this out. While this is building, they've created a new folder Cold built and within here we have all our files But this time optimized What does that mean? Well, if we go to static and go to Js look at that. Everything is men ified for us. Our CSS is optimized and everything that we need to deploy The website is in this folder so we can now take this built folder and put it anywhere So it's on the internet and it even gives you some good information. So now we have this optimized build We don't have to men If I it we don't have to do all these optimization a ghost through Babel so that we can use imports statements in the browsers And now this build folder can now be deployed anywhere. Like I said, create react up takes away all the pain of the set up. Everything is done for you. You can just write code use react components from around the web to build beautiful websites. I hope you're excited about react as I am. This is why it's such a popular tool and this is why so many companies now are using it. I'll see in the next one, but by 11. React Review: welcome back of the beginning of this react section. I told you that things are going to get a little bit overwhelming, but at the end, you're gonna understand everything and things. They're gonna make sense. I want to show you exactly how much you've learned. You've learned that components. Well, now this makes sense, right? You are building components during the section to combine things into containers and then finally have a page or a nap. You also learned that there is one way data flow, that is, everything flows from state to props, and you can have multiple Children. But the Onley people that can change state is a container component. In our case, we only have one container component, but you can have multiple and data just flows down one way. And any time a child component changes, they just trigger an event on the parent. And you saw how awesome that was. We didn't think about how we should render things. We were doing things deterministic, Lee, that is. Here's the state of the app. Render it accordingly and react took care of it for us. We also learned that well, exactly what I said. React worries about painting and making the website look good. We just give it the data and the components. We learned that react has an awesome ikan system. We had great tools where we're able to start and build and gave us great errors. So all these pain points that we had when we were first building our websites while they're gone everything is built for you so that you're ready to just focus on quoting without having to worry about configuration. When we get to our final project, we're gonna be using react components to build something really fast and just plug and play these components. And finally, we'll this shouldn't look confusing to you anymore. This makes sense. This whole thing that looked intimidating at first Well, this is just react in this one image, you have majority of why react is. And once you get used to the syntax, it's an elegant solution to building beautiful Web apps that are simple, scalable and easy to manage. Good job getting this far in the course. It takes a lot of dedication to get through this, But you did it. You're almost there. I'll see in the next one, but by