 Hey, welcome to this new React and Redux course. My name is Robin. I'm a French engineer and I've been working with both React and Redux since their beginnings. In this course, I will try to share with you all my experience using practice. We're going to build several projects together and through these projects, we will learn all the React and Redux core concepts. We'll learn step by step and I will assume that you don't know anything about these two libraries. Also, I wanted to tell you that it's okay not to understand everything on the first viewing of a video. So don't hesitate to watch them several times to really understand all the concepts. And when you're in beat, if I'm too fast for you, you can reduce the speed of the video in the settings. Or the opposite, if I'm too slow, you can accelerate it. Only the speed you're going to choose will be the right speed. And also you can enable the subtitles. They are not auto-generated, so they should be accurate. All right, that's it. I hope you will enjoy this course. Happy viewing. All right, so in this video, we're going to talk about React. Okay? A brief overview of what React is. So the first thing you need to know is that React is just a JavaScript library, okay? It's been made by Facebook and it's used to create web applications. And also you have to know that React is used by a lot of companies around the world, okay? It's actually the most used at the moment to create web applications, okay? And this means one thing. You won't be alone, okay? There is a lot of community behind you. There are tons of libraries for React, so that's a very important thing, okay? This will help you to develop faster. Okay. So also, you probably heard that React is used to create what is called single-page apps, okay, SPA. So maybe you don't know what this means. And actually, I think this term is a bit misleading because at first, when I read that, I thought that I wouldn't be able to navigate in my React app because I would have only one page, okay? But obviously that is not true, okay? You will be able to navigate in your React applications, obviously. But what does it mean? Well, traditionally, when you create an HTML JavaScript CSS application, you're going to end up having several HTML files, okay? For example, one per feature, okay? But with React, it's going to be slightly different. You're going to create components, okay? So each feature could be a component, and a component is actually just a small piece of code made of JavaScript and CSS, and that's it, okay? So you're going to create several components like this, and you're never going to write an HTML file, okay? We're going to use a very specific syntax to create components. And the idea is that you will have access to only one HTML file in your application, okay? And you're going with React, you're going to inject all your components into this HTML file, but exactly like you want and exactly where you want, okay? The idea is that you're basically going to make this index.html change all the time by injecting components, removing components, updating components in this HTML page, okay? So that's what you're going to do with React. You're just going to inject components in an index.html file. And the cool thing with components is that you can reuse them easily, okay? You could, for example, create a list of one component. And you can also combine your components into other components, okay, to create custom components. And that's really cool because you can actually create exactly what you want with your components. You can nest an infinite number of components into other components to really create exactly what you want, okay? And this will help you to build a kind of component library, okay? And you will be able to reuse this components library in your project. And this will allow you to develop faster. Okay, so I wanted you to understand that each component that you're going to create in your application will be made out of a bit of CSS and a bit of JavaScript, okay? And in the end, when your application will be completely built and completely ready to be sent to your client, React is kind of going to compress and compile all your CSS and JavaScript. And it's going to move all your CSS into one single index.css file. And it's going to do the same thing with your JavaScript. It's going to move all your JavaScript to one single index.javascript file. And so in the end, when your project is completely ready, completely built, okay? You will only have a JavaScript file, an HTML file, and a CSS file. And that is why it's called a single page app. It's because you only have one HTML file, one index.javascript file, and one index.css file, one file of each types, okay? And that's it. All right. So now we know what an SPA is. Cool. And you probably understood that React is what is called components-oriented, meaning that you're going to create a lot of small components that you're going to reuse, all right? Okay? And that's it. What are you going to use to create all of that? What syntax? What language? Okay? Well, actually, you're going to use a combination of two things. You're going to use ES6 and JSX. So ES6 just means the current version of JavaScript, okay? So before it was ES5, later it will be ES7, but for now it's ES6, okay? And offers a lot of handy features. And we're going to use ES6 for the components logic, okay? So for example, if you want to make your components interactive, if you want them to react when you click on them, move something on the screen, if you want to loop, if you want to do an if-as statement, if you want to create variables, then you're going to use ES6, okay? So all the JavaScript, all the logic will be handled by ES6. But you will also have the JSX. So the JSX will be used to create the components, really the structure of your components. So basically, the HTML behind your components, okay? But what does it look like? Well, actually, it's not really complicated to learn. Here is an example. This is JSX, okay? And as you can see, it really looks like HTML, okay? You're just going to create tags that contains other tags, okay? And that's it. And as you can see, you probably recognize div, ul, li.r, html tags, okay? But actually, this is not really HTML, because as you can see, there are some custom tags here, okay? And these custom tags are actually components that you will be able to create, okay? So you will have access to all the tags that you already know, but you will also be able to create your custom tags, aka components, okay? All right, so we will go in depth, obviously, in the next video. So that's it for this brief overview of React. I hope it's clear and see you in the next video. So in this video, we are going to install a library to be able to initialize our React application. So this library is called create React app, so you need to go on this website here and then click on get started. So I'm going to zoom in a little bit, okay? So the first comment we need to run is npx create React app and then the name of the app we want to create. So you may not have npx on your machine. So first you need to make sure that you have npx. So to make sure that you have npx on your machine, and technically you should because it comes with Node.js and npm, but we're going to make sure that you have it. You just need to type npx-v. And if you have a version number again, you're good. If you don't have a version number, please type npm space i, space npx-g. This means npm install npx globally on my machine, please. This can take a while and do that only if you don't have npx. So now you can type npx create React app and then you have to give a name to your project. So I'm going to call mine React Introduction. Be careful, this is going to install and initialize a React application in the current folder. So if you don't want your project to be installed in this folder, first move to the folder where you want this application to be installed. Then you can press enter and this is going to take a while. So you can go grab a coffee. Okay, so technically after a while you should see a message saying that yep, it worked. Happy hacking. So what you can do now is clean all of this and then move into the folder that has been created. So mine is React Introduction. Once you are in, you just need to type npm start like this and this should start your React application. So once it's running, you should see that you can access it by typing localhost 3000 into your browser. So I'm going to click on it and yep, as you can see, your app is here up and running. So congratulations. So cool. Now what you can do is you can go in VS Code and open the project that has been created. So that's what I'm going to do. I'm going to go in open folder in React Introduction and I'm going to open it. And yes, I trust the others. I do. And as you can see, you have your project here. So we will dive into all of these folders and files that have been created into our project in the next video. See you. Okay, so we are going to do the setup. So first you need a code editor. So I'm going to choose VS Code, but feel free to choose whatever you want. It's not mandatory. It's just that it's the most used at the moment in companies. Also, it will be easier to follow this course if you choose this one. But again, it's your call. So you just need to download it by clicking on the blue button here. And technically, you will go through a very simple installation process where you just need to press Next, Next, Next. And technically, it shouldn't be more complicated than that. Okay, so we also need Node.js for our React application to work correctly and to be able to run. So to install Node.js, you're going to go on the official Node.js website. Click on the LTS version and make sure that you are choosing the correct OS distribution. And technically, you should go to a very simple installation process again. So just Next, Next, Next and done. So this will install Node.js, but also NPM. NPM is just a very simple tool that we're going to use to install, remove, update libraries into our React project. And we're going to make sure that you have correctly installed Node.js and NPM. So once it has been installed correctly, you just need to open a new terminal. And then type Node-V. This will print your current Node version. If this is working, then Node.js has been correctly installed. And that's all right if you don't have the same version as me because mine is older. And you will do the same with NPM, NPM-V. And again, if your version number displayed, you're good. And again, it can be different from mine. And yeah, if you've done all of that, you're good with the basic setup. So see you in the next video to continue. So this video, we're going to see how NPM works and what's the difference between NPM and NPX. So if you already know that, you can skip this video. So NPM is a little tool that you're going to need to install, remove, update libraries into your project or on your machine. And it's also going to be used to run scripts, for example. And NPM is not only related to React, okay? It's related to the NPM and Node environment. So you're going to need it, for example, if you work on an Angular project, on a Vue.js project, any JavaScript project. Now you're going to need to know how NPM works. So first of all, I want you to understand that there is a public website that exists. That is NPM.js.com. Here you're going to find all the public NPM libraries that you can install. So if you try to install a public library, it has to be on this website. For example, let's say I'm interested in a library called Lodash. So Lodash is a library that provides a lot of utilities for JavaScript. Functions to filter arrays, to calculate intersections, to calculate union, to sort arrays, things like this. So let's say I type Lodash, you will land on this page and you will find a lot of informations about this library. So the library's name, how to install it, how to use it in your code, what's the current version here, how many times it has been downloaded, the official website, the GitHub, a lot of informations. And if you want to be able to install a library, a public one, it has to be here. Okay, so now let's see the NPM commands that you can use. So here is how an NPM command is split. First, you have to start with NPM, obviously. Then you're going to tell exactly what action you want to perform. So you can perform an install, a remove, an update. There are a lot of commands that you can run. Install is a built-in command and you'll see that you can even create your own commands. So the most important is install because that's the one we're going to use almost all the time. So if you type install then you have to explicitly tell which library. So you have to provide the correct library's name. And you can find the correct library's name on npmgs.com. And then you can add extra parameters. But to install a library, we don't need any. But you can find all of them on the official NPM documentation, if you wonder. Also, there is one important thing. If you want your library to be installed correctly in your project, you have to be at the root of your project. Otherwise, it's not going to work. Okay, so let's try this out. So here I have a very basic React project that contains almost nothing. I'm going to try to install a library into this project. So first, what I'm going to do is I'm going to move inside my project. So React project. Now that I am at the root, I can install a library. To do that, it's pretty easy. You just need to type npm i, that is the short for install. And then the name of the library. So for example, Lodash, the library I just told you about. I'm going to install it. So it's going to download it from npmgs.com. Once it's done, you can go back in your project. And technically, you can go in your node modules. And if you scroll down a little bit to the letter L, Lodash here. And as you can see, there are several Lodash folders. Because when you install one library, if this library has other dependencies, it's going to install them as well. So it's going to install several projects. And it's a whole npm project actually here. Each folder is an npm project that contains its own package.json. So now, if I go in my package.json, what is that? So the package.json is like the identity card of your npm project. So it contains the name, the version, a lot of informations. But for now, we're going to focus on the dependencies section. The dependencies section reference all the library's name and their version. And it contains all the libraries that you have installed in your project. And you're probably wondering why you have only four libraries here, but a ton of them in non-modules. It's because like I told you, when you install one library, this library may need other libraries to work properly. And these other libraries may need other libraries. And so you can have a huge tree of dependency. That's why you have so much non-modules here. Okay, so in this package.json, so you have the dependencies section. And actually, you can also have a dev dependency section. So the difference is, when you install a library like we just did, it's going to go in the dependencies section. And the important thing is that the libraries that you see here are going to be in the final build, in the final project that your client is going to use. So for example, there are some libraries that you may need as a developer, but that your client doesn't need. For example, testing libraries. You may need to perform tests on your code, but you don't want these libraries used for the test be present in the final build. Your client doesn't need these testing libraries when he is going to navigate on your website. So when you're installing libraries that are only for the developer, you want to put them in the dev dependency section. And so to install a library like this, it's pretty easy. You just need to go in your project, tap NPM, I, for example, Jest, which is a library to do some testing in your project, and then add dash dash save dash dev. And this should install it in your project as dev dependency. So when you install a library, you have to think wisely if you need it as a developer only, or if you really need it in your project, so your project works properly. And as you can see now, it's been installed in the dev dependencies. So now, if I remove my node modules and someone wants to use my project and type NPM install to install all the libraries, this is going to be installed only in the development version. And when you're going to build the final project, only this library will be present. So that's the major difference. Also in this package that you saw, you have the script section. So here, these are all the script that you can run using NPM. And then you can type NPM run start, NPM run build, NPM run test, NPM run eject, and it's going to run this command. So I could, for example, I don't know, create another one that I would call, for example, log. And this could do an eco, hello, like this. And now technically, if I go in my project, I can do NPM run log. And as you can see, it's going to run this, echo, hello. And as you can see, hello has been printed. So you can reference commands in your package.json. And that's exactly what's happening when you type NPM start. It's going to run React script start. And React script is actually one node modules that you have in your project. Okay, so I'm not going to detail all the other configurations that you can have, but because there are a ton of them, but you can find more information on the official documentation. But these are the most important, okay? So these are the one that you're going to use the most. So you can also specify a version number when you want to install a library. So if I go in my project here, I could type NPM I, load dash, and then add a commercial A, and then another version number, for example, 13.0.0. And if it exists, it's going to install a library correctly. Sometimes you need an old version number or a specific one for some reason. You'll see that it happens sometimes. Also, sometimes you may want to install a library globally on your machine. This way you can run or use this library from anywhere without being in an NPM project. So to do that, you can install it using the dash G parameter. So for example, there is another library that is called Cowsay. I'm going to show you. So Cowsay is a pretty useless library, but fun. So basically, you're going to install it using this command and it's just going to display a cow with the text that you're going to pass as parameter. So I'm going to show you. I'm going to install Cowsay globally like this. And now, even if I'm not in my project, so I'm going to move elsewhere like this, I technically can run Cowsay, and for example, allow you. And as you can see, it's going to work even if I'm not in the project. And then I can remove this library from my global libraries like this. Now technically, if I try to run Cowsay, it's not going to work anymore. So that's how you install something globally on your machine. So now we're going to talk about NPX. So NPX is a bit like NPM. It's just that you're going to use it when you just want to run a library that you don't have but not having it installed. So for example, if I type NPX, Cowsay, hello. This is going to download Cowsay, then install it re-temporally, execute it, and then it's going to be removed. And as you can see, it's working. But now if I try, I still have Cowsay. It has not been installed on my machine, okay? So it's very useful when you just want to test a library or run it once. And that's pretty much what you need to know about NPX. Okay, so I think that covers almost everything that I wanted to tell you about NPM and NPX. See you in the next video.