ReactJS Crash Course

[Music] hey did everyone happy sheer back again with another video and welcome to react.js crash course in this one little bit longer video we're gonna take a look on what react GS is and moreover we are going to work on it we will create a simple project on the reactors so that everybody can understand as well as work on a project in the react GS react.js is an amazingly powerful as well as super popular library this video is designed specifically in the mind that big nurse are watching this video and they want to understand that react as well as want to do some of the hands-on project on the react and my speciality is to turn the toughest topic in the easiest one so this video is going to help you to not only understand the react in the most easiest and the simplest manner but also working on a hands-on project I highly recommend that if you watch this video make sure you watch it while doing it this video is specially crafted so that you can follow along with me on every single movement and can do exactly what I'm doing on the screen on your screen as well you'll be able to design this project just like I am doing it in this entire video this pretty long video I don't know how much long it is is devided actually into the four sections section number one in which I'm going to talk you through about some of the common questions and common queries that are for the react.js these questions include absolute beginner questions as well as little bit intermediate question as well in the section too I'm gonna throw up some of the jargon keywords of the react.js whenever you are learning any new library or the framework there are few jargons associated with them so I'm gonna just throw them right in front of you and we'll try to explain a little bit of them are not really in depth because it's just a crash course but still I'll explain like little bit in detail about what these jargons are and you don't need to worry about any of them in the section 3 I'm gonna walk you through about what are the tools that you need to download and from where to download and what to keep in mind while downloading these tools these tools are closed cross-platform and I have taken a special care that everybody who is on Windows on or Linux can actually follow along so no need to worry about anything all the tools are cross-platform in the final fourth section they're gonna actually jump directly into my computer and we are gonna do a project this is going to be a simplistic project but while working on this project I'll make sure that you understand in depth about what is the file structure how we can recreate the entire structure and what all the things that you need to take care I'll also mention some of the stay-away points as well while working on the code part we'll explain some of the issues that you may fall into as well as we're going to work together now one more important stuff all the exercise files project files and the code files that we will be working on in this entire course are also available I will upload this video on learn code online dot in my website where I post a lot of videos as well this course is absolutely free and all the exercise files are also free not only that I have also enabled the discussion section so that like-minded people who are more interested in react.js can work in the community in the discussion section and can help each other out as well as maybe make some friends and start something amazing as well so now that we are ready to go for the react.js crash course I would like to need a little bit help from your side as well I would like to know in the comment section are you interested in these kinds of crash courses if yes post them in the comments section yes for crash course and also I would like to let you know me that what is the next topic that I should pick up for the crash courses so point out your subject your topic which on which I should make a crash course and post that in the below section based on the popularity of a subject I'm gonna pick up the next crash course topic and will make it absolutely clear and easy to understand so comments are important let me know in the discussion section what should be the next topic and don't forget to post yes for crash course if you like the crash courses so it's gonna be a little bit longer video not little it's gonna be too much longer video so grab your ice tea or whatever is your drink maybe coffee so grab that up and let's get started with a crash course on react yes ok so all set let's get started with the very first section of the just crash courses which are questions of internet so question number one what is react je s react jeaious is a library designed by Facebook and now it is open source there are no licensing issues and you can use it in absolutely any project react.js makes our life much more easier surely without react.js also you can create any project that you want any project that you like it's not going to be any trouble it's not like react.js will give you certain things which you cannot do in any other programming language surely it's possible but react.js helps us in easing our life much more you can create components in the react and these components are lifesaver for example let's just say you have created a button and so far that button whenever you want that you just copy and paste the code but in the react.js you can use that component as that reusable component once that button or the card is being designed it can be reused anywhere you like and whatever the elements are inside that component maybe the button text or maybe the card like images or any text these are super modifiable and can be just inserted from anywhere this makes life much more easier with the react a couple of things are also important things like it's fast reloading it's optimization its performance these are some of the things which it which attracts the big companies to work on with the react and hence react is gaining its popularity question number two can react to work with my ex ex stack where X can be anything including Ruby on Rails MySQL node.js Django it can be anything just insert your favorite text start in place of the X well the main feature about the react.js is it's lightweight and it's inject ability via JS can be inserted with anything just pick up your favorite stack whether it's ruby on rails or Django you can use react with any existing text art in fact on its on its website as well they mentioned that we don't assume anything about your back-end or any illogical stuff that you are doing up you can use react with any of the library and which is the main reason why react is gaining its popularity question number three what are prerequisite if I want to learn react Cheers although react.js is really simple to understand as well as it's a very small library so you don't need to spend much of the time in understanding it it's pretty quick to learn but definitely since it's a GS based platform it is assumed that you are pretty comfortable with JavaScript now in case you are not no need to worry I do have a free playlist on JavaScript as well you can watch that video series and it's a pretty good video series and after that you'll be absolutely good to go with the react.js but I still recommend that if you have any prior other programming language experience as well I still recommend you to watch this crash course it will give you a whole lot of idea how things actually work in react GS now some of the questions by intermediate user of react or somebody who has actually coded a little bit on the react or known have react about a little bit what are the recent changes that has been implemented in the react GS library just like any other framework or library there is a continuous development cycle in which the team is actually working on every single day so it's obvious that the changes are going to appear one of the most common changes that everybody's talking about is react GS hooks but you don't need to worry anything about the hooks as mentioned clearly on the website that hook is nothing groundbreaking it's not gonna break your existing things that you are doing in that react it just is a new feature that I'm trying to give you let me touch this subject hooks and this is totally for the people who are already familiar with the react not at all for the beginners beginners can actually just fast forward this for a couple of minutes so hooks are the new addition in the VR chairs and these are supplemental and must-have things in the react now you can totally work without the hooks as well in most of the cases actually for a big nerd level project you don't need hooks hooks were implemented because in the react there was no such state management library and even for small projects people were using big giants like Redux in order to get the rid and totally get rid of the need of the redux the hooks were implemented and they are absolutely backward compatible and question number two about the intermediate users are are class-based components going away from the react now very soon we are going to create our first component or very first project in the react and you're going to notice that the default is now presented as a functional component instead of class component and don't worry for all the big nerds I'm gonna throw up these jargons and a little bit later but first and foremost let me address these intermediate users so yes although the functional component are pretty much on the center of attraction for everybody and hooks are also there but let me just clearly mention that that class-based components are not going anywhere and since functional component are more and should be used more because a lot of projects and lot of components don't even need class if you need the class definitely 100% go for class based component but if you can just get away by declaring a functional component just use that and that's exactly what the react team wants to convey through their website as well okay so now that the section one is over about the common questions about react let's move on to the section number two jargons of the react.js world and in fact there are lots of jargons that are going to come in front of you I'm gonna mention only few of them the first jargon that usually appears is the virtual Dom so what is this virtual Dom simply assumed let's just say there is a comment section on the YouTube you write a comment and somebody replies to your comment and then somebody also again comes and replies to your comment in the usual case scenario we have to hit the reload onto the entire webpage to load those comments up but in the world of react not even the entire page needs a reload only the component which are being updated now gets updated and that's basically your virtual Dom but surely there is a lot more to learn but right now this is more than enough more jorgens props and state you're gonna hear them a lot as well props is a shortcut for properties properties doesn't sound really cool props sound cool so that's why they are being used a lot another thing that you're gonna see a lot in the react.js is state now these are the things which are pretty much easy to understand while working in the code file as well so I'll touch them they're only I haven't even started to talk about react and still talked about components so yes component is another jargon that you're gonna see and we're gonna create some of these components so that they are much more easier to understand there you are gonna hear about two types of component in that react the one is the class base camp another one is functional component both are almost exactly same there is no much of a vital difference but class-based components are much more powerful and can be used on to a next scale so yeah these are the two jargons you're gonna hear a lot and finally the new jargon that's coming up in the react world is the hooks now hooks definitely require a crash course in itself or probably a full-fledged course in itself but definitely I'm gonna show you some of the documentation about the hooks a little bit detail but we are not going to touch them in this crash course at least if you want me to make a separate crash course on the hooks let me know in the comments section I'll be happy to do it okay so now that we are done with our section 2 as well let's move on to the section 3 where we are going to learn what are the tools that we need to install and how we can proceed further in building a project although these are two separate sections but kind of a 1-inch cell so let's jump into the computer and try to find out and download the tools that are required for starting this react.js crash course Cheers and let's get started with our react.js crash course so first and foremost let me mention that our react.js this crash course is gonna be a little bit unform 'el compared to my other videos that I do in my courses because it's gonna be a really long video and I'm gonna be stepping up my iced tea so I hope you don't mind that if you do I apologize for that now let's get forward and start with the react.js so let's get started first and foremost a quick disclaimer that crash courses means we are rushing through various topic it's not gonna be as in-depth that you are much more familiar in my courses at least we take topics like too much in depth talk about them explore them experiment on them but in this case we are gonna be rushing through but I will try my best to explain them as much as possible but again I hope you understand these are crash courses so with that aside let's go ahead and get started oh I forgot one more thing that all exercise files and everything is available at learn code online check out online courses this is a free course with the name of crash course you can just enroll in that or probably you are already in that and you can check that out all exercise files are also available ok with that let's move forward with the tools so what are the tools that you need to started with the crash course so first and foremost we're gonna need a node.js now no GS is a simple software it's more than the software but you can just simply install that on your system it's available for Mac Linux Windows I'll walk you through with that as well in a minute and that's pretty much it now through no GS we're gonna be installing a library in our system which is react GS now we will be using NPM I'll walk you through with that as well for just let's have an overview and this react.js will help us to create a project now when we create a project through react GS are the NPM it helps us to give us some of the boilerplate code that means we don't need to create all the files by ourself it just gives a basic boilerplate code which is a starting point to write the react applications of course we are gonna need something to write our code as well it can be any editor like sublime text vs code atom brackets whatever is your choice feel free to just enjoy there I'm gonna be using vs curve because from last like couple years I am absolutely loving vs code so that's why I'm gonna be using that and last but not the least we are gonna need a browser as well if you're watching this video I'm pretty sure you do are you already are having a browser so my recommendation for this particular crash course is the Chrome but in case you are an Internet Explorer fan I would like to ask you just one question why why why okay so let's go ahead and visit a couple of places from where you need to download a couple of things first and formost no GS dot org so from Nadia's org we need to have a node being installed on our system so just click on LTS we are gonna be preferring LTS for this one just click on that and it's gonna download automatically the node for you so in this case just downloading the pkg file for me but in your case it's gonna download the appropriate file for you things like exe or whatever seems good to be good for you it's gonna download that one for you so that is the first thing that we are gonna need now what note actually gives you is a command-line utility for you through which you can install a more system ok so just go ahead and download that pretty simple install next next next I click I agree kind of a stuff now through the node we're gonna be working on react so we need to take a look on this react as well and by the way a vs code and chrome are pretty easy to find so I'm not gonna show you the website for them so let's go ahead and this is the website which we'll be revisiting quite a lot during this entire crash course so first and foremost is let's just see how we can create a project for that so we're gonna click on the docs and by the way before we move forward there are a couple of interesting stuff being mentioned up here so take a look on that let's click on the docs and then I'm gonna go ahead and I will check out that what are these things so it says add react to the website create a new react app sounds interesting that's exactly what I really want to do so most of this documentation is actually going to talk about that how you can actually work on Internet but there is a section where it shows you a couple of command lines as well through which you can have it so let's zoom it it says npx create react app and my app so what is this actually so you might have heard about NPM install as soon as you install node.js onto your system it gives you a utility known as NPM which will help you to install anything in at all a similar kind of a thing is NP X as well the recent one so but the question which is unanswered yet is what does this create reactor so for that we have to go on to an another website to find it out so we're gonna go on NPM GS com I hope I'm right about it so on the NPM GS comm we can search for a package and we're gonna search for a package create react - up make sure dashes are super important and just hit enter it's gonna give you an exact match at the very top and just click on that so this is the utility that we want to install and once you have installed the node the NPM is already there in your system and all you have to do is just use this one and it seems it's a very popular library 88 over 88,000 downloads in just a week these are not monthly or yearly these are just weeks so you can imagine that how many people are trying to learn react and implement that e if we take the industry-standard like two or three percent of conversion these are too many developers for react so yes it's getting really popular so how do we install it we can just click on this and it just copies this code in on my clipboard NPM I create react app so how do we install it so go ahead and fire up your terminal and there we go if you are in the windows then it's gonna be a little bit different for you you need to just search for it right click on it and make sure you open it up as administrator otherwise things are not gonna work things are not gonna work so if you're the windows just paste this command as it is and PM I create react app make sure dashes are there no spaces okay it's gonna install it absolutely fine for you and you can also optionally give an option of hyphen G here - G means we can install it on globally I highly recommend that that you give this command because we want to access the react from anywhere so go ahead and run this command if you are in a Mac or Linux then we also have to give the sudo option here because there's no way to open the terminal using like right click an administrator so we have to give sudo it's gonna ask you password go ahead provide that it's gonna be all good okay so there we go that's all it takes to install the react onto your system and once it is installed then we can go back on to this guy here and can say that hey now can I run this command npx create react app and all this and it's gonna say yes you can do it now so what we're gonna do is I have actually created an empty folder on my desktop which says react.js crash course it has a logo available in the exercise file as well so we're gonna create a react app just inside this folder so let's go ahead and do that and it's not gonna be any magical stuff it's just a regular stuff so first and foremost let's go to desktop or wherever the folder is I'm gonna say react.js crash course do a quick LS there is nothing apart from logo okay moving forward how do I create my first application I'm gonna simply say npx create - react - app and then the app name so I'm gonna call this as lco to do app or LC or to do else here to do is fine now one quick thing that you need to be cautious about it because in the recent version of the react they don't allow the capital letters in creating the project name so you have to make sure that you are all lowercase let's hit enter and now it's gonna do its magic it's gonna create a couple of projects and going on stuff like that so no big deal and there we go it's usually very fast in the process but first time it may take a little bit while and of course things actually sometimes depend on your internet speed as well because it fetches up that library from online and just places it err onto your system let's go ahead and see that so there we go else here to do is available now let's zoom it a little bit else here to do is here it gives the first and foremost a package dot JSON file more files are gonna come up in a minute but first and foremost this is the most important file okay looks pretty good pretty interesting actually what we can do is we can hit the fast-forward so that you don't have to just sit around and watch this bar to fill up let's wait for a few second okay so finally it has installed all the necessary things for us it has also given us some of the information up here some of the information is you can just run an NPM start to start the development server there is NPM run build test eject and we suggest that you start by typing CD into the project and then NPM start okay sounds good let's follow the advice being given are given to us by this but we're not gonna do it right here surely we can but there is a better way of doing it so first and foremost what I recommend you is a fire up your code editor there's an update available no I'm not gonna do it right now I'm recording a video okay so we're gonna just go up here and we can see tons of files being up here we're gonna discuss them in a little bit detail first and foremost just drag and drop this folder up here and there we go come on I don't want to update right now okay let's go ahead and expand this I don't have much of the real estate on the screen but it's good it's good okay so how do we do that how do we play more stuff so first and foremost a quick shortcut hit down your ctrl key and the tilde key your tilde key is just below your escape once so hit control and tilde and just fire up the inbuilt terminal onto this r vs code now directly we can run the command let's quickly quickly take a look on the command this says NPM start now there are lots of command in the NPM like ron build test eject to do whereas vedas stuff npm start is the most easiest one we're gonna see where that command is but right now all I want to do is NPM start that's it that's all what we want to do now within a few second it's gonna automatically open up some things on your browser or may ask some things like this that hey this code this vs code wants to have an axis of chrome do you really want to give it just say okay so that's how we do that now notice here that on the browser it says localhost colon 3000 that's the server where react application is going to work so this is your default react application it sounds good looks pretty awesome and to be honest I love this dark theme previously it was just all white but I prefer this one here okay so this is the exact thing that we are having and we're going to recreate that as well well the easy thing to learn about anything is to recreate the stuff we're gonna do that okay so that things are working absolutely fine we can go up here and I'm gonna just minimize this one a little bit I don't need this much of the space let's quickly talk about some of the structural file and then we're gonna talk more starting from the bottom readme dot MD whenever you upload your project on services like github bitbucket or anything these are the default files being available so it's very necessary that before uploading a project you mentioned a little bit more details in the MD file I do have a separate video on YouTube talking about these markdown files MD then we have the package dot JSON which is the meet part of the entire stuff can you notice up here this node module folder this node module folder is being generated based on this package dot Jason father whenever you're going to download any project from github or somebody sends you this project he's never going to send you this node module because this project this folder can be recreated by running a simple command on a terminal that says NPM space install and this node module folder will be automatically we created so since it can be recreated nobody sends that or nobody uploads that this folder is being created based on totally the things which are mentioned in the package tour JSON file like what are the libraries or dependencies I need to install like react react dome react scripts what are the scripts that you want to run whenever I say NPN start it runs it runs this script the very first one there are others as well build test eject I can write my own as well no problem in that and then we have got some of the browser layers on the development list and a whole bunch of thing this file can be a little bit messy and whenever we install anything new like let's just say you want to install bootstrap in the react we go ahead and just do some stuff on the terminal that stuff makes an entry in the package store JSON file first and then try to install it so that's how the react actually works and not a big deal it's pretty easy it looks like really messy but it's super easy the lock adore JSON file is a core file when you want to work in the babel web pack and stuff then it is being done most of the time we don't touch it it it can break the application get ignore is get related files so it's never going to upload the things whatever is mentioned in the get ignore it's gonna ignore that while updating your get repository like node modules PNP files stuff like that okay close that down now source tortious this is the meat part where we do all of the amazing stuff in that and finally the public folder in which some of the public files are like whatever we are going to do in the source or GS are actually being exported into this public folder so most of these things like react angular they are SP a single page application so they just host everything and loads everything in this index index tortilla so that's how it actually works and can you see this root everything is injected just write it here exactly where my cursor is everything is injected there and it just works like that and react is what we like a little bit on the magic that the things it does including the reload of the virtual Dom it sounds a little bit magical and yeah programming is all magical okay so there we go let's uh minimize all of these folders let's open up the magical amazing folder source okay in the source we can see there is a logo dot SVG the logo that we have seen the react logo looks like numbers at this case and then we have couple of other files as well like app dot CSS of course CSS file a dot GS yes the main file from where we write all of our amazing stuff there are some of the test cases as well you can have some of the testings here index dot CSS index tortillas like from where we do all the rendering stuff and all the routing stuff and then we have some of the service workers we don't touch that this is an optional code it's written service register is not called by default and most of the cases we don't touch it ok now everything is clear not everything you know some of the basic file structure of our react it's time that we go back onto the documentation have a little bit fun ok one more thing I forgot to discuss about that one as well let's open up this app dot GS let's talk a little bit on to this app tortillas then we'll go back onto the documentation will show you some of the stuff specifically the point that I want to touch is this keyword here which says function this is the reason of panicking a panic alert a lot of people get panic that hey it says function but all the tutorials all the videos all the courses that I see it doesn't say function there it says always class there well there can be a great debate about which one you should use function are the classes but I'm gonna point your attention towards something known as hooks for a minute this is again strictly for intermediate users I'll come back on to the big nuts in a second okay so let's go on to something new again new word is written here hooks and directly just point on to using state hook so what you're gonna notice up here let's zoom it a little bit for all the intermediate kind of user notice here this is a class-based component we see the word class here and this is how we write our state in the class-based component and exactly this is how we write our constructor or our state in the functional component so yes this exact example here proves that you can either use the functional or you can use a class-based component and it's totally almost familiar code here of course it's a little bit more code more verbose here we have a shortened code surely a little bit more onto the futuristic approach the class is moreover a classic approach but again you can use any of them in this crash course first I'm gonna go through with the functional approach I'm gonna walk you through with a functional example and later on we're gonna switch on to the class example okay but again by no means I'm saying that we are gonna touch the hooks because if you're using totally a functional component then we have to touch on the hooks that I really don't want to do in this particular video maybe later on based on the comments but surely so this is the exact thing that I want a touch upon okay intermediate stuff is over let's come back and jump onto the big net stuff okay so here's a real goal what we really want to do where is my there we go what we're gonna do first and foremost we are going to recreate this application from the scratch and then we are going to create our own application and we'll understand more about the working and the functionality of a react application okay so let's take a quick to of the react documentation okay so let's quickly jump on to the main concept so you're gonna see a lot of things going upon in the react things that you can read after watching this video I highly recommend not to go like too much in them just have a look onto this component and the props so these are the this is the one thing that you might want to study a little bit a little bit study should be done absolutely hundred-percent on state and the lifecycle events as well we're gonna touch on them a little bit I don't think so we're going to touch on to the lifecycle events in this particular video but surely it's it's worth readable okay so that's that's it that's all what we want to do for this particular section let's go ahead and go up here and what we're gonna do okay I'm gonna just minimize this one here so how we're gonna proceed for this one there's too much of the code written here so how can I explain this code to all of you so what I recommend you is open up your app door GEOSS let me open that up open up Apple App door Cheers select all of it and just delete it this is much more easier there's nothing inside no code so it's much more easier to explain it right now so what we're gonna do is we're gonna recreate the application whatever there was and this is going to help us to understand each and every bits and pieces of the react so follow along with me I highly recommend to write all the stuff along with me so what we're gonna do is first and foremost we are gonna write import react from and react so remember while installing the dependencies we saw that we have react react Dom and react scripts so other thing that we want to import is the reacts all the automatic functionality like virtual Dom reload and stuff is gonna automatically come as soon as you write this line okay moving further we want to import a logo as well in case you remember that we do have a logo going up here as well remember this logo dot SVG so it's a react logo we want to import that as well so let's go ahead you can use our own logo we will do that but right now let's just use the react logo we're gonna call this as logo and that's gonna come up from now in order to install bring up anything first and foremost if it is in the same directory we write dot slash if it is in the one directory back we write dot dot slash and then we access all these other libraries so since the logo is actually in our current directory I can simply say dot slash and simply go for logo dot sv j usually it gives me a suggestion sometime it's not really happy with me so it doesn't give me any of that so there we go logo is imported ok and notice one more stuff here app dot CSS there are some CSS files available to us notice here tap app logo app header app link and some of the keyframes to rotate the logo as well so these are coming up from here I'm not gonna rewrite the CSS because it's not a crash course on CSS while the react so I'll save your time in writing any of the CSS but I definitely want to bring that up so all I can do is I don't need to import it something like call it something from because I just want to import that and that's all I want to do so all I can do is I can directly say I want to import this simply app dot CSS so that's all I want to do there we go so hopefully AB dot CSS is now being imported ok there we go looks pretty good now coming up to the part now you can create two types of components the one is the class space one is the functional base first and foremost we're going to go ahead and create a functional based component now functional based component are pretty easy to create all you have to do is create a function and then export it out now what happens after we export it out actually the that is being automatically handled by your index GS it expects you that you always going to pass on this app from this app so that's all being taken care up here directly by these service workers but right now we can just go for that so we're gonna create app and there we go we have created that now in case you want to change the name of app obviously associated things needs to be changed like in the index dot GS don't expect that app is gonna come up whatever you are going to export it is gonna expect that so a couple of changes needs to be there in case you want to change the name app here ok so we go our functional component is ready now we can export it directly here and can write export default function app we can actually do that but it's actually better here in this particular case that we use a separate line for exporting so export default app ok now that is the core Minimum Viable application in the react using the functional component now one very essential thing in whenever you are doing a react app is to have something inside the app otherwise what's the point of having a function and we do return a very specific thing in these one so we're gonna write a simple return of course it requires a semi column okay so what does the react app actually expects you to return something it expects you that you are going to return at least one component or one element in it it can be anything I can just simply say h1 and essential one very very essential thing whatever you are going to actually start you need to end that what do I mean by that since I have started this h1 component I have actually used the h1 because you actually technically don't write HTML here this is gsx it looks exactly same as HTML but it's not it's not it's computer world things don't are not that they exactly look these this is JSX so this there can be a good question that what if I don't have an h1 I have something which is just a single element like for example I just want to have this BR a line-break element what in that case in that case you have to make a component self-closing that is definitely allowed but whatever starts need to end either it can be a self closing element or it can be like that ok another rule that you have to follow you cannot get away from that is let's just say you have an h1 element and you write my name up here and you have another paragraph ok and paragraph says my last name which is pretty big and you notice there is an error and definitely there is an error going up why is that error and notice in the error says itself gsx expression must have one parent element there are two things we learned up first and foremost it's not HTML it is GSX and s-- proved and you can only return while one element so how do we go away from this kind of stuff the usual way of going away from that is wrap up everything inside a division so that's like the most easiest stuff that you can get away cut that out and just paste it up here and there we go so that's one hack v-not hack that's a way how everything just works up here okay so there we go I'm gonna remove this one so right now you can actually save this and watch this on to AB your browser that this is gonna work and see application is not giving any error it's just working fine not looking the prettiest on the world it's not gonna get any design awards but yeah it just works it just works let's go back up here and what we are gonna see further let's remove that okay one more thing one more very interesting thing which makes a lot of people confusing so how do we have a class let's just say we know there is a class that is equals to container this is not gonna work in the react at least oops command Z this is not gonna work at least in the back now I'm gonna add something into this division otherwise it will make it automatically self closing so I'm gonna just have an h1 I'm gonna insert my name that's it so what you're gonna notice here as soon as I write this class container although in my ab dot CSS I am having container no I'm not having container I'm having this app let's go ahead and change that to app okay is it smaller app no it's it's a bigger app okay so there we go class name all done so what you're gonna notice is nothing is going to take a change because the class keyword is not allowed in the react like it's a load but not at this place so what we do actually in order to get away from that wherever we need to write the HTML classes we just close call it as class name yeah kind of a tricky hack but that's exactly what we follow up here okay now when I save this it kicks in and now a face got since enter that is not what really is an amazing example but there we go okay so we've got our basics all done now only thing that's remaining up here is told you react is not that difficult it's a super easy we're gonna get rid of this one up here and we are gonna give some of the amazing things like whatever you wish to have in a regular HTML you can actually get and start with that for example I can simply say class name and that is gonna be equal to AB - header header there we go and we can write all the stuff up here for example if you want to insert the images then things actually becomes a little bit tricky again so what we do is we go ahead and write our image now as soon as you write the gsx image and then first and foremost it needs to be self closing and then we write SRC to load up the source appear okay so how do we write the source now since we have imported the logo just right at the top and we have created this import statement we can use this variable whenever I need to use available I use these curly braces some call this as mustache braces as well I don't mind it so we call it as simply logo okay now surely we can use a simple class name up here because this default application is having a class for this logo we just saw that it is a op - logo so we can actually call this as app - logo and it's gonna work absolutely fine and there we go everything got kicks in back so there we go logo is now turning that's all classic CSS nothing what we are doing okay and surely just off to the header I am gonna write a simple paragraph why not let's just write a simple paragraph that says learn react with hit aah crash course that's that sounds good so there we go let's go back come on where are you and it's not visible it's not visible because it's it's not having the classes and all these things so we need to get a classes and all these stuffs up again here but again you got the point that how this can be done and how this can be used and utilized and we this one up here so there we go this is the very basic example of how things can be done and let me hit the command Z and actually if I just move everything up in the header as Charlotte's gonna be visible oh let's go back where are you there we go learned react so again no big deal this is just like a fancy stuff you shouldn't pay much attention of whether if you are able to get CSS are correct or not okay so very easy stuff goes up here but there is one issue up here remember I told you that we are gonna have a staged some of the components as well so what are these states in component component simply in order to understand the state and prop let's talk about it a little bit the props simply means properties whenever you want to pass on information from one component to another component we use props our properties for example there is a separate file which says basic button information and there is some text in the button that need to be passed on so we can pass on this button text using the prop so that's what the properties are being used well on the other hand the state is something like this mug now in the react we actually maintain a lot of state means what the variable is storing that information is being stored at a variety of places so this information is stored inside a state anybody who wants to make a change in anything like comment anything that you want to render on the webpage we consult first with the state and state is like a central place which stores everything up here so there is a limitation that if you want to use a state then in the previous version of the react we couldn't actually do that by using function because functions are not capable of storing that constructor kind of a thing so we used to have classes in that but as we saw right now when we were talking about this intermediate stuff about this hooks hooks is a new introduction in the react which helps us and allows us to have some of the more api's through which we can actually store this stage so this line exactly appeared let me assume that this line exactly here is responsible for storing kind of s date in the functional component so we can go ahead and use this format to store our state or an equivalent class example being given by as the react is the class based component that you can use and for most of you who are watching my channel I am pretty sure they're aware of the concept of object-oriented programming not like a guru of that but a little bit like classes do have constructor and stuff like that so in the class we can see that we are extending the react component means it's inheriting something and then we can create a constructor that can hold our state remember this dot state the only issue that comes up is the understanding of this so the binding of this can be little bit confusing for some of the big nurse and that is why they have released this functional component the functional component you don't see this keyword this keyword in itself is a little bit challenging to understand because it works a little bit different in JavaScript then compared to Java or Ruby do we have this in Ruby have any other any other language so this is what we are doing also you're gonna notice couple of hooks here that for example use a state and these are some of the keywords I want to point your attention set state is also one so the point is that state is like a very sacred place you don't just know nobody goes and touch it v if you want to make any modification or editing in the state we always use this set state method and then we update anything so that's like the basic of it and surely you can work without the hooks as well the only difference is you're gonna get is if you're not using the hooks then you have to use the class-based component if you are using the hooks then you can just directly use this one-liner and can go and get away from that so there we go now you're on to the intermediate scale you were able to understand me there that's nice that's awesome okay so let's go ahead and do some of the fun stuff into the reactor as well okay first and foremost I'm gonna open up this guy I'm gonna select this one because I want to copy this logo I'm gonna zoom up here I'm go up into lco to do I'm gonna go up into the source and I'm gonna pace this up here so that it's available on my main file I'm gonna also show you one more thing whenever I'm gonna give you this exercise files the node modules is not gonna be present so what you have to do is simply just drag-and-drop this folder in your vs code open up the terminal just like that I'm gonna kill this process for a minute ctrl C to kill that and ctrl L to go up at the top so what we are gonna do is I'm gonna simply write NPM install that's it just hit the enter automatically this node module library is gonna be created in your system and everything is gonna work fine after that okay so nothing's are all good I'm gonna just write that part again wait it is NPM start yep that's what I want to run okay and I'm gonna close this so that it starts the server looks great everything is fine okay let's move on to up here close this guy and let's create a simple application so that I can explain most of you it's not gonna be as complex as I regularly do in my courses like firebase and databases in a holiday zhing stuff it's gonna be absolutely basic one but surely it's gonna help you a lot now first and foremost notice we do have this logo white being appear so we want to import that I want to use my own logo so that's why we are having it and we also need to change and make some changes into the app dot CSS because yeah we have some more stuff going on so I'm gonna just remove everything from here don't worry I'm not gonna let you to watch me typing all the CSS stuff I'll do that in the fast-forward manner or I'll skip that part into the video editing but right now let's go ahead and do the basic stuff so again I highly recommend to write them instead of just generating these stuffs so first and foremost let's use the react so we can simply call this as react from this react and one more interesting thing that you should actually watch out this is totally your variable you can call it whatever you like because you are importing everything as whatever you like to call them call it our call it Riyadh called small react totally on you that's exactly what I mean and then okay that is too much we're gonna go ahead and import the logo but this time I'm not gonna import the logo from the react I'm gonna import my own logo so I'm gonna simply say logo no look I'm gonna say lco - logo usually it gives me suggestions usually usually vs code gives me but sometime it's not super happy - white dot PNG so hopefully the logo is imported now and last but not the least we are gonna import the CSS as well so I'm gonna simply say dot slash app dot CSS I'm gonna write my own customized CSS for that one so we are gonna work on that little bit later now let's go ahead and we have already created a functional component now we are gonna create a class-based component again it's almost exactly same that how we do that but a couple of stuffs goes here and there so in the class-based component how do we work first and foremost we write a keyword class of course we call it a zap because our index dot GS is waiting for an app to be exported and then we simply write extends there we go and we are gonna extend from react component there we go and there we go the class is defined and now do whatever you like to do inside this class that's all exactly and by the way we just saw about these things just a minute ago in the hooks as well in case you remember that now once we are inside the class we of course need to render some of the stuff so if you're defining a class-based component that one thing that you have to make sure that you call this method render in the render what your expected is you should return something so we're gonna say return and there we go now inside this return we are going to do the same things you are expected to return a gsx so we're gonna simply say an h1 and we are gonna say hit H there we go save that it's not gonna look the prettiest thing on the planet but surely it's gonna do and ok we forgot to we forgot to do one thing which is exporting this stuff can i how can i okay let's go ahead and do that again we can debug that no problem export default up and there we go save that and hopefully are you reloading and there we go okay lco logo my bad typo LCL logo debugging is a skill and I am pretty bad in typing I just do that but again finally we were able to grab this Hypatia up here so yeah we have worked on the functional component we have been worked on the class-based component as well and now it's time that we write some of the amazing stuff so that we can work on it so I'm gonna hit this return is actually just a one-liner that's why it's good doing this stuff which I don't like it okay there we go and now we're gonna returns first and foremost I'm gonna had a division you can use the modern html5 syntax where blocks and sections and all these amazing stuff goes on but again now the next thing that we are gonna do is we are gonna get an image so self-closing one shirley and first and foremost is get a source we are gonna use available again logo now in this I'm going to also mention couple of properties like width is gonna be hundred now in the react you actually technically through other ways you can mention the pixels and the rams and all of that but a react and react native both actually are trying to go into the way where they automatically do all these stuff so all you have to do is right hundred and it's gonna evaluate the things based on the browser so you can have a separate talk on that probably later and that's all what we're gonna do let's just save this and see if our law logo pops up yeah a little bit logo and once this logo is up here we can actually write some of the classes for that so we're gonna simply have a class name and what do we call this class we are gonna call this as logo okay let's go into the app dot CSS and let's define some of the logo part of it here first and foremost let's okay first and foremost let's go ahead and use our body stylings on the body I'm gonna simply say background background is going to the color we absolutely are loving this color at LaHood code online and recently everything is now turning up into this color this is eight six one zero nine B so this is more over a purplish color that we are using we're loving it and for the entire this one I'm gonna get a font size of 20 pixels we want everything to be big okay now once we are done with that then we are gonna go ahead and do some of the classic stuff with the logo and we're gonna make a display off block okay the big deal we're gonna simply say margin at left is gonna be Auto and margin on the right is gonna be Auto and in case you're wondering how I'm able to write just by writing ml NMR this is something which comes in default by vs code known as Emmett I again do have a free course on Emmett you should check that out save that and let's see how the things are going ah told you it automatically looks good you can I give it a little bit margin from the top as well no big deal but I'm gonna just keep it like that now don't worry I'm not gonna sit watch you too I'm not gonna let you sit and watch me painfully writing all the CSS I'll do that from now onwards I'm gonna do that in the fast-forward manner but again it's gonna be all simplistic CSS not of a big deal okay once we have this image then we simply want to have an h1 h1 and this is gonna be simply saying lco to do app just like that surely it's gonna have a class name because I want to modify that a little bit but not now this is gonna be a broad title okay looks pretty good to me once I'm outside of that I'm gonna create a simple div whose class is gonna be container there we go and my es6 works in the gsx as well so no big deal we're gonna simply say add add an item dot a dot just like that after that we are gonna have a simple li line break command Z command Z command Z had an item there we go and we're gonna have a simple line break there we go and then we're gonna use an input so let's go ahead and write a simple input what type of input do I need I need a text-based input so input : text is the one that I'm looking at for okay it's asking me for a couple of things as well name ID and all that stuff I would like to just separate them on our next line because that's how I like it and there we go there we go okay for this one ID I don't think so I need an ID I'm gonna remove that we only need a class name so we're gonna call this as class name the class name is gonna be input - text we are going to write the CSS later on alignment I love that okay now it's good and the type is takes the class name is up here let's add a placeholder as well the placeholder is gonna be right to do save that and it's gonna look horrible but we're gonna make that good in the CSS a little bit later first let's just dump out all the things that we really want to have it okay once we are having this input just after that we would like to have a simple button there we go the button is gonna be off type let us say a regular button will do for us okay class name of course why not class name is gonna be add - BTN surely you can use bootstrap as whether the react but right now I don't want to do that okay and this button is gonna simply say add to do okay we should have a button now now let us go ahead and check tada we got a button add a teeny tiny and ugly button we're gonna make that beautiful after CSS okay once we have this button going up then simply we want to create another division up here in this division we are going to simply hold up a few of the list items so we're gonna simply have a div and we're gonna call this as a class name as well so we're gonna put a dot list there we go okay inside this division we're gonna have some of the un-- not that we want to have an unordered list item come on there we go this is the one I want have relation by Emmet not anything else okay so what do we have in the unordered list in on the unordered list first and foremost what do we have we have a list item there we go inside the list item we want to have a couple of things first and foremost an input check box so there we go input check box okay one stuff done just after the input check box is being done I want to add a line so I'm gonna say record YouTube videos okay looks pretty good and once I'm done with that I want to have a button so I'm gonna simply have a button and this button is gonna say delete okay we're gonna add a class name as well because why not class name is gonna be simply BTN okay nothing else nothing is gonna work it's just gonna be displayed on up here so we have a checkbox as well we aren't gonna get rid of this stuff but right now we do have this all stuff going on we do have a delete and we can make that a little bit beautiful up here there we go so technically our display this stuff is all going up here but there is nothing of the react that we are using so what we need to do is first and foremost just write the CSS because it's too hard to work on the ugly stuff let me quickly fast forward the video and write some CSS okay so not an award-winning job that we have done here but yeah it's looking a little bit better and more visually for please and a little bit please not much again this is not a course on CSS otherwise I would have made it absolutely amazing so we have a recording to do which says writer to do here and simply we are adding that to do that is gonna be added up here and then we can just mark it as like done or not and then we will be able to delete that as well so that's the exact functionality we want to go up from here so what we're gonna do for this part let's go back and talk about how we are gonna take care of that surely we are gonna be adding more functionality up in these buttons and all of that and how do we do that but first and foremost we are going to go up at the very top and let's discuss a little bit on to the constructor part so when we talk about this constructor I hope you remember that constructor is the first thing that is being created as soon as the class is invoked and by the term invoked assembly means whenever the class is being created exactly same kind of a thing we can do in the react as well we can create a constructor which can hold the default things up here now these default thing is also going to store the state as well remember I talked about the state in the functional as well as in the class waist component now you can have class in both of them in the functional using hooks in the class by using constructor so feel free to use whatever you like so how do we actually create that state and constructor and there are few rules that you have to take care although I say it react is a library and more the rules are actually implemented in the framework but react is little bit more than a library so how do we create that we simply call the constructor there we come so how do we do that whenever I constructed is being called we actually call the props with that as well the reason why in this case we are not going to be using the props but let's just say you are throwing something from other component into this file then those properties can only be read if we have this prop so again we are gonna call this super props so that's the syntax that we follow up here now let's create the state so we create the state by saying this dot state and state is nothing more than an object there we go that's it so in the state what we're gonna have first and formost we are gonna have an array of lists which is gonna store all the list items that we have and not only that it's gonna store a new item okay so new item is initially empty and make sure you put a comma there as well okay so how do we proceed in that the procedure is really simple as soon as we are going to add a new list item that list item is gonna go into the new item first once that new item is being fetched or we have any new value in the list a new item they're gonna push that value into the list so that we have a entire array of the two dues once we have an array of these two dues we are going to just loop through over them and we are going to display them in our to do list sounds like a plan yeah sounds like a plan let's go ahead and do that okay so how do we actually go ahead and do that for that we are going to create a couple of methods just above the render so that we can have it so first and foremost what we're gonna do is we are gonna create a method which is gonna say add item you can name it anything and this add item is gonna have a value to do value this to do value we're gonna create a simple we're gonna call this method as soon as somebody clicks on that submit button we're gonna take the value from our input field and we're gonna fetch that into this method and that value is to do value okay so how do we go ahead and do that first and foremost a quick check that we want to do and we want to do a quick check off if to do a value is not equals to empty not only we want to proceed otherwise it's empty why do we want to process anything so what we're gonna do is first and foremost we are going to create a new item with the unique ID the advantages are endless for having a unique ID for the item number one is we can look through it in the react actually if you want to look through anything it's always better that you have a unique ID for it apart from that you can store it in the database you can store it in the local storage of possibilities and usage are endless so we're gonna simply say Const we are gonna call this as new item and let's create an object so how do we create this object is going to have a couple of properties ID the ID we can use simply date dot now that's different data date dot now to get a unique value because every time it's gonna have a new value the value what is the value appear that value is simply to do a value which is being passed to us and by default we're gonna say is is done is actually false we can just flip the values based on when they user check mark that no big deal it's it's can it can be done okay and we're gonna save that put a comma it's not compulsory to have a semicolon we're there I like it okay so this is being done a new object is being created but this this is it we have created an object it's not going so we need to put this object or copy this object into this list how do we do that we are gonna copy this current list item into this item array by using something known as little bit advanced in the JavaScript world so we're gonna simply create cons list and then we are gonna be using this triple dots and then we are gonna call this dot state dot list so what is happening up in this in this particular line of code we are saying that I want to create a variable list which is going to hold all the values being appender so triple dot means you want to append all the existing values into it once that is being created means all the values are into this list this new list is available all I can do is say list dot push and I'm gonna simply add my new item up here there we go that's it that's all what we have done but now the problem is that I do have an item list on my local scope this scope only and I'm pushing the value so the list is updated no problem in that not surely you can argue here that you should not use purge you should use other but we are not worried about that part yet okay so how do we update this list into my this state I cannot directly surely I can actually call directly this one but that is absolutely no no in the world of react so how do we proceed further after that so once you have updated everything then we use a very very special method which say is this dot set state now the set state is a very special method whenever you want to update anything inside the state you never touch the state directly in the react you always touch that state by using the set state method end of the story okay so how do I do that I use a simple object up here and I say I want to update what are the things you want to update I want to update the list I also want to update one more thing which is my new item new item needs to empty now okay once this is being updated put a column and there we go okay too much of the stuff going on for just few minutes in the video I'm in the few minutes or a few hours I have no idea so we're gonna simply add an item I hope this is absolutely clear for all of you are pretty good pretty easiest stuff here okay so we have created a simple method which adds the item so how about now deleting the item now deleting the item can be a little bit tricky because first and foremost we have to exactly click on the exact list item of where we want to delete now while deleting this unique ID is going to help us much so why don't we just go ahead and create another method just about the render to delete now first designing the functionality is always a good part because after that you just have to inject that functionality or on the points where you want the function to happen so if we're gonna call this as simply delete item and the delete item needs to pass on an ID whenever this delete is going to happen remember we do have an ID there are endless valuable stuff that you can do with this ID so how do we proceed with that first and foremost we bring out all the list up here so we're going to simply say cons list and we need a copy of the list so let's just copy all the list this dot state dot list now we have a current copy of whatever the item we are storing in the list now we need to update list so we're gonna say Const updated list that's a good name and we are going to simply say list and we're gonna use the JavaScript again this is exactly the point where JavaScript is being used a lot and in my JavaScript series I have talked about these methods a lot okay so we're gonna use a filter now filter is a method which expects you to pass on a callback so we're going to use the item arrow function and then we are going to simply say item dot ID when it is not equal to ID so what this line is going to do this line is going to up create an updated list and it's gonna fill up all the things inside it but it's gonna skip the one item the item which actually matches the ID so it's gonna skip that part and you got now your new list which omits the value which matches the ID okay looks pretty good looks pretty good now all you need to do is update don't ever forget to update the stuff okay so we're gonna call this dot set state remember we never update that state directly we always called the set state there we go pass on the list so what item do you want to update I want to update the list item with what item you want to update it I want to update it with updated list there we go now here we don't we didn't call it like I want to update it list like something like this list Collin list because now the JavaScript is actually smart enough in es 7 that you don't need to be redundant in the code but here if we don't have the same name of the variable list list we have updated list that's why we are having this one up here ok so there we go we have got our add item and we have got our all these stuff's going on ok there is one more stuff still remaining which we are gonna be using I will talk about that in a minute first let me just write that so we're gonna say update input so this is the method which we are going to use in a minute it is always going to expect that you pass on an input in that and then all you're gonna do is update the state so this dot set state and all we want to do is update one element which is new item being updated by input ok I'm gonna explain about this particular method in a minute I'll just wait for a minute just just bear with me that why we have created this one okay now it's time that we jump into the stuff where we actually want to do all the stuff all the crazy stuff so first and foremost let's go up here in the container add an item so this is the input where we want to do all the magic to be happening up ok so here comes the magical stuff we can actually use a couple of more keywords up here in the input as well like for example I can say required and then you cannot actually avoid this stuff okay now let's come up to the fun part first and foremost in this input we're gonna create a value here now this value is going to be updated by this dot state dot new item the reason why we are doing this because new item is actually going to store and we are going to call this update input into that okay so as soon as something is being changed inside this input box we are gonna call this one and this is going to update this new item variable which is also present in our state so we want to actually update this one up here okay so that whatever the item we are filling it up it actually reaches out to the state so we can call a method which say is on change and in the on change we can provide this stuff so how do we write that we can simply call this one just like this we can call e for any update and then we can call this dot update input is being called and update input we simply go for e dot target dot value so now whatever the value is being updated by using this on change method we will be able to grab this value and since we have passed on this method or we have called this method update input that value will go into this method and this method will get the input and will call another method inside it which is set a state and the setter state is going to update that value into our state okay too much of the stuff to just push this push this value up in the state but that's all worth it okay now that value has reached to it but actually this is going to actually work when we're gonna push and set update here so what we're gonna do is now we're going to create another method on this button as well otherwise why there is a button up here let's go ahead hit enter hit enter just one more and once anybody just says I'm gonna say on click then what we're gonna do oops on click there we go so in this on click we are gonna fire up a call back up here there we go and we're gonna simply say this dot and now we need to add an item because right now this is not gonna work like that so I think I'm running just ahead of me so we need an onclick method that needs to call something to update all this state up here so that we can work on it so we need to work on the method which says add item and remember what we have done in the air item we have performed all this stuff the magical stuff that is being going on so next up is we can just simply go ahead and do that let's go ahead and where are you there become we are gonna simply go ahead and call this so there we go we have called this this dot air item so whenever we need to call any method we have to actually use this keyword here now because this keyword is actually little bit tricky to understand that's why we have the functional component up here ok our item so what do we pass on in this item in this we're gonna pass on this dot state dot new item and since we have this new item already up here remember we did all this crazy stuff here that is all just because we wanted to pass on this new item up here ok we can do one more stuff here it's it's a little bit unnecessary at this moment but we can actually use a disabled keyword up here and this can work something like this we can simply say if not this dot state dot new item dot length so how this is actually working this is a little bit or trick that everybody uses in the react because this a state this is right now the length is 0 so 0 is treated as false so what we are doing is as soon as there is some number that means let's just say a number is let's just say you have written 5 keywords here so 5 is actually that makes it false so disabled becomes false so it's a kind of a trick that we use all the time so this is what we are doing okay now the things are gonna be working fine and we can actually console.log why are you having the list is equals to this should be all good let's just see why we are having the list empty let's hit a quick reload okay empty list why we are having problem in this one okay should we all I found the bug actually it was uh it was a little bit hard to see the bug it was just like that so yeah sometimes debugging actually takes and sighs never again debugging is a part of code as I always say so we can write a test up here we can hit the Add to do now the to do is actually getting up here and we were able to reset the value as well so that's all good but right now that to do is actually only going on to the state we are not looping through that state so that we can display all the data appear so let's go ahead and try to loop through that so looping through the data is actually the most easiest thing we can do once you understand the base of it so how we're gonna do that let's go into the bottom of it and I want to loop through with this one here so in order to loop through the element what we're gonna do is I'm gonna just go just below this unordered list I'm gonna start my curly braces first and foremost what do I want to loop through I'm gonna loop through this dot state dot list so this is what I want to loop what do you want to loop through I want to loop using a feature map which is available in the JavaScript whenever it's gonna loop it's gonna give you an item back once this item is available up here I can return something make sure you use the return keyword otherwise it's gonna return the thing it's gonna do its job but it's not gonna display anything on the webpage so what do you want to return I want to return a list item so I'm gonna start the list item up here and I'm gonna simply have a key now this key is gonna produce a warning up here not this key actually if you don't use the key then it's going to give you a warning so in the react we have a thing that's the if you want to loop through make sure you prove that everything is unique which you are looping through there are might there might be chances that you are looping through a value which is just like same value so we have to prove that every value is unique and this item dot ID is responsible for that now surely there are other ways to prove that yes we are looping through a unique key every time but you have to do it otherwise it gives you a warning in some of the cases the mornings is actually absolutely nasty okay once that is being the case we simply want to have an input so I'm gonna just write n put not just copy I'm gonna use an input input in put there we go and once I have this input I'm gonna hit enter I'm gonna simply say what type of input do I have I have an input off first and formost check box okay and the name I can use simply is done it doesn't matter in the name as of now the checked the default is going to be false so we're gonna simply say is gonna be equal to item dot is done there we go okay so looks good and we can also mark it and on change as well up here and there we go and we are gonna run a simple method we're gonna call a callback simply to do anything when the change actually happened and this can be anything but right now I'm gonna just leave it as simply blank because surely I want to work on it but row not right now not right now I'm gonna simply close that out so my input is closed okay now I want to create another JavaScript tag and I want to say item remember the item is the one thing that is being given to us by this map it has a lot of properties like item dot ID and not lot but all the properties that we have created so one of the property that we created was item dot value where do we create that if you remember we have created this object ID value and is done so these are all the properties that we have created in that so one of them I'm using is a value up here okay after that we need another button that we are having so let's just have a button and this button is going to just say delete but we're gonna add a couple of properties up here first and foremost the class name oops got it going there we go first and foremost we are gonna have a button let's call it as simply button and then most importantly I want to have an on click method on it now as soon as I have this on click method I'm gonna call a callback there we go this callback is gonna call to this dot delete item and also most importantly don't forget to pass on an ID that is what we are working on the entire logic okay so it looks pretty good let's just save this and now let's go back onto this guy up here let's add something up here so we're gonna say test one add it to do there we go to do comes up there test two odd okay I'm gonna add my name and that's it add I'm gonna add an LC Oh as well that's so fun now I'm gonna do need the test too so there we go we delete that and that is the cool feature of the react we don't need to hit the reload and all those amazing stuff that we can actually do it surely can do that but right now it's it's all good and okay okay so this is all what we wanted to do we can surely check mark that and uncheck that as well right now the honk lick is not working we have to actually write a little bit all the logic so that on change actually works and based on that we can create a simple method which changes the class name into that we can use the variable around the class name then it can show that check off and all of that and pretty basic stuff that we can do up here okay so I think that's it that's the basic of the react we have worked on that let me quickly summarize that we created a constructor up here then we have worked on just two very simple method the add item and the delete item the add item works on really simple we first check out whether the things are empty or not then we create an object new item we update the list with that push that into the stuff and then we update the item up here and similarly we worked on the delete item pretty simple logics and stuff nothing groundbreaking nothing absolutely extraordinary that we are done and worked up here and there we go we have created a simple react application I do understand that this application is not very advanced because for that balance we required to have a separate dedicated course I do have a separate course where I've worked on firebase databases and all those amazing stuff up here so I would like to end up this crash course just up here it's mean too long for me for recording these videos in case you want me to make more videos on anything any topic that you would like please notify me in the comments section I would absolutely love to do that it's being really long that I have been recording videos so I think definitely I deserve a subscribe so and in case you want these exercise files I'll put them in the mentioned link in the below section and that's it please do subscribe and bye bye for now [Music]

Channel: Hitesh Choudhary

Views: 192,206

Rating: 4.8670697 out of 5

Keywords: Programming, LearnCodeOnline, reactjs, react crash course, reactjs for beginners, modern reactjs

Id: nvHeB32ICDM

Length: 82min 26sec (4946 seconds)

Published: Thu Aug 22 2019