Total React Tutorial - For Beginners - Using TypeScript

hey guys this react tutorial is brought to you by Linode this is the company that I use for all my hosting and they've been around now for 15 years they're the largest independent cloud provider available they saved me a ton of money over a shirin AWS and honestly I have tutorials on how to get everything set up as well so you have everything you need with a note and you also get a twenty dollar discount which is in the link in the description tab below if you go ahead and sign up for them again I recommend them very much hey guys what's up so in this video we're gonna be looking at react and how to get started with it I'm about to release a video here in the next couple days that actually looks at all the different statistics and why you want to learn react and which one's the hottest client-side framework and long story short there react is the number one client-side framework right now and late 2019 going in the 2020 and if you're looking to get a job this is one of the easier ways of actually getting a job although react is not easy at all and you'll see the more complicated the architecture or the UI depending on how sophisticated the website is how many components it's uh it's all going to follow a react principle for a component based architecture and although the basics are very easy when you start getting into huge apps they're made up of literally hundreds to thousands of components and those components are interacting with each other through all kinds of different means so whether that's like some sort of Ajax call to a server which means a network request to a server to get some data every app is going to be different but one of the great things about these client-side frameworks is that react has a specific way of doing things so if you learn the react way then you're gonna be pretty you're gonna be pretty well-versed you know even if the architecture itself gets really really complicated so if there's thousands of components once you start getting the idea of how these components are interacting with each other and how they're rear-ending then it all starts to become a little bit more easier to deal with although I don't want to like sugarcoat it react to something that people get paid a lot of money to do so the average reactive purrs making roughly 120,000 dollars a year right now and there's a reason for that it's not exactly easy so you could follow a tutorial and be like oh I you know I think I have this under under my belt but it's gonna take more than that so what you're gonna want to do is you're going to want to follow along with this tutorial series to see how to get up and running with react how to build your components and your UI architecture and then from there what you need to do is go ahead and start building your own projects so take whatever we're going to discuss in this video and then just kind of redo it over and over again as you build out your own websites and as you build your own website you're gonna quickly get up to speed and if you can do that a lot of people ask how long is it going to take and things like that but I don't really have the answer for that but if you're pounding out react code day in and day out and you build a relatively complicated website whether it's like something like YouTube or an Instagram type of thing and then you know six months of doing that you're probably gonna be like pretty you're pretty you're gonna be pretty good to go good to go you're gonna be able to probably get a job in react doing some basic you know junior level development stuff so I'm not gonna waste a bunch of a bunch of your time trying to like explain all the different tools and like what they're used for and all this stuff like a lot of tutorials do that but I will say the editor that we're gonna write our code into is Visual Studio code a lot of you guys have probably already heard of that no js' is gonna be required in order to install all of our tools and our webserver itself is going to be a no js' webserver and then as far as typescript is concerned this is basically JavaScript but it's JavaScript in another way and typescript itself is called a superset of JavaScript which means that you write typescript code and then you compile it using node and it turns it to JavaScript and it's going to all be done automatically so you don't really have to know the inner workings of how that works but typescript is something that you definitely want to add to your resume just like react and they kind of go hand-in-hand and although there's a you know a pure JavaScript way of writing react you still have to install a bunch of stuff so we might as well just jump right into typescript big because that's also something that a lot of companies are looking for now I'm working on a Windows but it doesn't matter if you're on Windows Mac or Linux all this code is gonna be the same although the commands to run the code could vary slightly if you're on Linux or Mac then you're probably going to run the sudo command to actually execute it to make sure you have permissions to write files and things like that but you're probably already familiar with that as well if you've done any sort of development on a Mac or a Linux operating system to get started with node you just want to go to their home page their website nodejs org and then go to the downloads and whatever sort of operating system you're on make sure you have that installed to test that you have it installed correctly you can pull up a command line or a terminal and if you just simply type node then it's going to if it pulls up this command line that's the node interpreter and ctrl C gets out of that if you press it twice and if you wanted to see the version of node that you're on I can type node - - version and I'm on 10.15 dot 3 but you can be on a newer version or even an older version that's probably still going to work just the same all right so whenever you're starting your own project what you need to do is figure out where is this new project going to sit on my computer because we're not gonna put it on a server or github or anything for right now although the code that I write for this I'll go ahead and have it on github so you guys can if you don't want to mess with the configurations then you can just go ahead and clone the project and go from there but I think it's helpful to go through the configuration process so we're gonna do that in this tutorial and I put everything in my projects folder on the C Drive and I created a folder called total react tutorial which is what this tutorial is cuz we're gonna totally cover react so you guys can get a job and you could see it's just an empty folder here so what I want to do is after I install Visual Studio code you're going to want to open up the editor to whatever folder it is that you just created so hopefully if you just follow right along just put a total react tutorial and I have that sitting in my C Drive under my projects tutorials folder and then I'm going to select this total react toriel NSA select folder so visual studio code will open up into that folder now by default you should have the Explorer open and if not just click on this this icon here and you can click it to make it go away as well but if you click on that that's going to show you all the files that are sitting inside that folder and right now there's nothing there so it's it's just an empty folder so make sure you have the project a visual studio code opened up to that folder that you created that you want to put your code into alright guys so now that we have the project folder created and we're ready to actually start writing our code I just want to go ahead and explain a little bit about reacts overall architecture so you guys know and if you go to reiax home website and you just if you're using Chrome and this is actually the browser that I recommend for your development because it has some of the best developer tools that you can use to make it easier to understand what's going on with your react code if you're in chrome and you go to the react website and you just right click on your mouse and say inspect it's going to open up something called a developer console and inside of here there's a lot of information but right now you're probably not going to have this option called components because this components option is an extension and react or in chrome actually that allows you to debug and look at all your different react components and if it's in a reactant this extension is going to show all the different components that you have so in order to install that you need to go to your chrome webstore and it's free and you're just going to type in make sure you get to the extensions of your chrome webstore and then type and react and this is gonna there's gonna be a react developer tools and you're gonna want to make sure that you install this on your machine and then once you have it installed it's going to show up here on this one it's going to be one of the the panels or tabs on your chrome developer tools so this this is going to have all the different components for your react application and right now this is a little bit too difficult to really grasp here but these are all separate react and that kind of brings me to my next point is that when you're doing react development there's gonna be one core component that is like it's like a tree structure we're at the top of the tree you're gonna have your overall main react component and then everything else is going to be components that sit inside of it so your components within react can be everything from like this entire banner right here which is sometimes called like a Jumbotron buttons themselves can be react components even simple radio buttons and other HTML elements could be made with react components so a react application is going to have all these different components and ultimately though it's all one main component that that holds all the the components on the inside of it so you can think of your main component as like a you know the Christmas present and then all it's just comprised of a bunch of different little presents inside of it and kind of like those German dolls it that pop out that's the same kind of thing with react so you're gonna have one component and the reason for that is because react is all about re-rendering the HTML on your page when certain data changes so the overall component can listen for any sort of changes that are made to it so if you pass data to it all its children components all the components that sit inside that main component and it doesn't have to be just there's always going to be one main but then you can have like a you know like a child inside that main component and then that component can also have a bunch of components inside of it as well so that's the way you need to look at the overall reactor architecture so I know that's really hard to grasp especially verbally but as we start developing this stuff you're gonna see that it makes more sense the more you develop it the more you're like okay I understand that these like this is a child component there's a parent component and on and on and on but ultimately there's one main component that's going to render your entire application alright guys so let's go ahead and create our project and what we want to do is go in the visual studio code and when you right-click inside explore window here to say open and terminal and what we're gonna do is say NPM and this is included when you installed node and you're gonna say an it which is short for initialization and this is going to create a new project so we're just gonna call this a react tutorial is the name of it I'm gonna make this a little bit bigger so you guys can see it alright so this first command is gonna be react tutorial it's gonna be version 1.0 I'm gonna say a react tutorial by Chris honks alright and then this is the entry point to our application right now we can just keep it index j s it doesn't matter and you can put your own name here I'm gonna put my name and the license it doesn't really matter that's for if you want to distribute your code you can do like an MIT license if you want it to be free once you do that though it's going to create something called a package.json file and this is going to be what is actually keeping track of all the the dependencies that your project has and what a dependency mean it really just means my project needs this this and this in order for it to run and it is handled automatically for you so you'll see in just a moment when we install react into this it's going to keep track of what version of react we're using and then also any other tools and plugins that we decide that we need for the application alright so let's go ahead and look at how we're gonna install our tools so what we want to do is right click say open and terminal from within this Explorer window and this is gonna pull up the terminal it's gonna open it up to the folder for your project we're gonna say npm install and then - - save or you could do we'll just do - - save and here we're gonna say react and then react Dom those are two separate projects react as the actual react architecture the the overall core code for react and then react Dom is actually what is a separate project for dealing with HTML and rendering things to your browser and the reason why it's a separate project is because react has now gotten gotten into virtual reality with react VR and also there is a reactant for mobile app development so once they started branching off into those other things they decided ok react for HTML and web pages it needs to be its own separate project and that's why react Dom was created so we're gonna go ahead and install those two and if you press ENTER it this is what's going to reach across the web and it's going to add these to your package JSON as a dependency so now you can see this specific version of react that we're referencing and react on so even if you're watching this video at a later time it might be a newer newer version of react but so far react has been backwards compatible so even in the future a lot of this should be the same even if react and react aam have a different version number to them alright guys so the next thing we need to do is we need to install typescript and because typescript is going to be something that we're using for development it's gonna be under a different category called developer dependencies versus regular dependencies because we don't need if it if it's a dependency you need that project or that plug-in that code base you need it in order for your actual website to run but if it's a developer dependency then it's just a tool that's helping you write the code so because typescript is really just writing JavaScript for us it's considered a developer dependency so we're gonna say npm install - - really - d for developer dependency and then we can just say typescript so now that we've done that you can see that typescript is showing up under a different category like I mentioned before which is developer dependencies and again it's because type scripts not needed for your project to run inside of a browser it's just simply an easier way of writing your JavaScript code now this is not a typescript tutorial and although we're gonna touch on a lot of different types script there's going to be separate tutorials that you're gonna want a reference for typescript you can look at some of mine and I'm gonna be creating some in the future but you can also go to my buddy Brad Traverse see he's got stuff on typescript and overall typescript is something that we're gonna be using you don't have to be an expert in it so even if you don't know typescript you don't have to stop the tutorial you can actually learn typescript while you're creating your react application but typescript uses something called types and their types that you can define that basically say hey this type has a you know a bunch of like let's just say if if type is Chris then he has something called a head or a body or legs or something like that and each one of those head body legs they're defined as a specific type so type scripts all about basically enforcing contracts to say hey you want to implement code this way then you need to actually have an you know you need to meet all of the criteria so that that code works and typescript tries to protect you from making errors within JavaScript that's gonna end up only showing up when the application is actually running so typescript if you don't have everything in line it won't create the JavaScript for you but that's a good thing because you don't want JavaScript that's gonna run and halfway through like uploading a form or something like that it breaks type scripts gonna warn you of something like that at compile time as you're developing the application so your customers don't have to see that error message themselves and that's really in a nutshell what type scripts doing it's all about just trying to make the code much easier to reason about and understand and also to prevent those errors from occurring later on down the road so there are separate projects that are created already for us that allow us to use types within react and react on but we need to go ahead and install them and again it's going to be a developer dependency because it's typescript related so we're gonna say at and here you're gonna say types and then react and then we're also going to do a space between that and say types and then react Dom since they're two separate projects and this is going to install all those types that we need for both of those projects and you'll see again it goes under the developer dependency and not the normal dependency because when the application is in the browser it's gonna need these two in order to run and these three just help us actually write the code alright guys so what we need to do now is we need to go ahead and tell our typescript compiler how to behave every typescript file or project is different and there's all these different settings that you can tell typescript to do so you can say hey typescript I want you to turn this JavaScript to more modern JavaScript that might only work in certain browsers like the newer ones or you can say you know what I want you to turn it into old JavaScript to make sure it works all the way back in like ie 11 or even before that so that is an option that we can do with typescript which it makes it really helpful but in order for typescript to know about that we have to have an actual configuration file for it so we're gonna right click in our Explorer and we're gonna create something called a TS config dot JSON which is JSON file and this is just a JavaScript JSON stands for JavaScript object notation but you guys don't really have to know about that but it's a bunch of key value pairs and you can see like compiler options is an option that I have so I'm gonna go ahead and just tab on that so it'll create it for me so there are a ton of options that we can give to typescript but for right now what we want to do is we're gonna go ahead and define something called our module and we want to use common j/s as our module and then there's another option for JSX and JSX is a JavaScript XML type thing if you want to be exact but basically it's how react creates HTML elements and we're going to be using JSX so the version of JSX that we're going to be using is going to be just standard react and not react native so make sure we add that also when we do a build we want to add a watch so instead of having to run the build over and over again a watch that's that equals true is going to continually listen for any sort of changes to your typescript files and every time it changes its going to recompile without you having to run the command so that's what the watch is doing and then the target the target command is something where you could say I want to use older real like ie 9 or 8 or whatever that's probably es 3 I don't really know but we're gonna say es 5 which is mostly working and everything from ie 11 and up and then the last thing is we want to go ahead and say a lib command which is for library and we want to say the different types of libraries that we want to use within type scripts so if we want to write modern JavaScript or really type script we want to say es6 in here and then we're going to say dom so this is just a JavaScript list of to two different values in here so es6 and and then make sure that Sendero press ctrl s to save it alright so what we're gonna do now is create our first typescript file and what we want to do is put that we're just going to put it right in our root directory but we're gonna call it index TS which is the typescript file extension and here what we want to do is put in some modern javascript in here so we're gonna use a constant variable that says my name equals and then we're gonna put my name in here alright so every statement and typescript should end in a semicolon and that's just like regular javascript now constant is not actually supported in older browsers so when we actually go to compile this this TS file it's going to create a JavaScript file for us but it's going to change that constant to something that actually works in an older browser which is just a simple variable so it's going to change it to var but we'll see that in just a second go ahead and click back on your package.json file inside your scripts here we're gonna go ahead and create a command that will be able to run that's going to go ahead and compile our code using typescript so in here we're gonna create a build and then put a colon and then here we want to say TSC which is short for typescript and then we'll just go ahead and give it the name of our starting point so we want to say when we execute this build command we want you to find the index dot es file which is right in our root directory and we want you to compile that now every key value pair inside this javascript object needs to have a comma so make sure you have a comma there and that error message will go away now let's go ahead and try to run this build command that we just defined in the package.json so right click and say open and terminal and we're going to say if we want to run this command in our scripts and this is actually a very common thing that you'll see with all modern typescript and not even just typescript really a modern nodejs projects so anything that uses node even if you didn't want to use typescript you're still gonna run into similar things like this and this is just something I don't expect any beginner to know but like if you just follow along do it over and over again eventually you'll be you know you'll get your job and you'll realize some other companies doing it the exact same way so I know what a lot of this doesn't really make a whole lot of sense and like I don't expect it to but the more you do it the more that it will so to run this script we're gonna say NPM run and then the name of the script so if I if I said gobbly or something you know it could be whatever you want in our case we want it to say build since we're going to be compiling the projects that we want to build it so when we say npm run build this is going to go ahead and create a index dot JSP and you can see we will touch on this in this error message in just a second but you'll see that the index j s file was created for us from the index PS file so you can see that just like i said it went from a constant to a var so that way it works inside all browsers and that is typescript working for you it actually took this modern you know modern JavaScript code typescript code and it turned it to an older version of JavaScript that will still run in the very old browsers alright so going back to this error message if you guys are seeing this this isn't actually this is something related to node itself and types and in order to fix this what we need to do is we're gonna say npm install types node so just like we did with both react and react dom we have to do the same thing with node in order to resolve that problem all right so you'll see if we go back to our package we went ahead and we installed these types node and this is actually a dependency as well it could have been a developer dependency in fact yeah you know if you ever make a mistake let's go ahead and touch on that we're gonna say uninstall at types node so if you ever made a mistake and you actually installed something you don't want to MPN uninstalled will fix that so that will fix that let's go ahead and do the same thing again at types node but then we can say - d4 developer dependency it's always good to separate out your developer dependencies from the actual dependencies needed in order for the thing to run inside the project so basically your finished project needs these in order to run but these are all needed just so you can develop so let's go ahead and try to run the build command again if you just press your up arrow it should go back to your original statements you entered earlier and hopefully that error message now goes away and you can see that it did alright so it went ahead and created this file didn't give us any error messages that time alright so I just wanted to explain the actual compilation step that occurs when you're dealing with typescript what I want to do is go ahead and delete this file here this javascript file and we're now going to create a folder called our source and by default every project is going to have a source folder which is going to contain all of your typescript code and we can just drag the index right into the source and say move it in there and now by running this command it's going to automatically for that index inside the source so if we run build it's going to read the configuration file properly and you'll see that it actually tries to watch it however you can see that it says it does not find the index dot es so these error messages are always pretty common we need to go ahead and change our package.json where we said hey try to find the index TS in the root folder now we're just simply saying run type script and by default type script is going to look inside the source folder so I like to include these error messages in here and honestly as they come up these are things that you're going to end up running into all the time so it's best to see them now now what you can see is that we are watching the file so if I were to change this let's just look at the compiled code it's it's Chris with a var here and if I were to just change this on-the-fly to say on the fly and press ctrl s you can see that it detected that there was a change at recompiled and if we look at the J s you can see that the variables changed so by default type script is going to look inside the source folder and it's going to compile all of those files and and just build them as you change them from now on so let's go ahead and do an alert statement in here so that we can alert and the value of my name and you can see again ctrl s it recompiled and if you look in the inside here it's all compiled now so let's go ahead and create a index dot HTML file something that we can actually view the code from within a browser because that's what all modern you know react is it's running inside of a browser so we need to go ahead and create an HTML file for that so we're gonna do that now every HTML file is gonna have an HTML opening closing tag it's gonna have a head and we're gonna say our project inside the title of this thing and then we need a body and you always want to load your JavaScript code but like just above the closing body tag that way it's considered non-blocking and that's something that is going to come up a lot when you're dealing with performance and all that stuff because you don't want your JavaScript to block the loading of the page it creates a bad user experience and Google will actually penalize your website for doing that so you want to load everything and then at the very end you're gonna load your actual draw and JavaScript file so here we're gonna say source equals and we're going to point to the JavaScript file that was created so we're gonna say source and then index J s and make sure you actually point to the JavaScript version of your file and not typescript because typescript does not actually run inside your browser it's the JavaScript that typescript turns it to that actually runs inside your browser so now if we right-click and we say open or reveal and Explorer this is going to pull up the root directory to where this HTML page lives and you can see my browser or not my browser man operating system knows that this is a web page so it's it's by default using Chrome so if I double click on it you can see that we get the on-the-fly message that is our variable and we're getting that alerted to the screen all right so now we're ready to actually go ahead and start writing HTML are not really HTML but javis geez I can't talk alright we're gonna be writing react that is going to be writing our actual JavaScript to the screen so in order to do that we want to go ahead and change this stuff inside the index PS file and we actually want to right-click on this index that PS file and we're going to rename it to TS X and you can see that the react symbol actually shows up when we say TS X and the reason why is our TS x files signify anytime that we're going to be using react in that file we need to have it as a TS X file and the reason for that is because react uses something called JSX and it's a long long story there but basically JSX is very HTML like but it's not quite HTML and it makes it easier to write out react components and our react code but typescript needs to know the difference between just regular typescript and typescript that includes react stuff and it's because of that JSX now now that we've changed it we want to go ahead and import the library so we're gonna import which is the star symbol which means import all and we're gonna say as react from and then we're gonna say from react so we're importing the react library and because we also need to render react HTML to the screen we need to also do the same thing and say react Dom from the react Dom project that we loaded earlier all right and now we've imported both of those so in order for us to actually write some HTML to the screen using react we're gonna say react Dom and then we're going to call the render function that's on top of that and here this is this is JSX so it looks like HTML but it's not quite the second argument that we need to pass to this render function though we need to put a comma here and we need to say document dot query selector and then here we're gonna give it the value of root and that's going to be the the element that we're going to say hey attach this HTML to the root element so in order to do that we need to go ahead and create that root element in our HTML page right now so we're gonna say div ID equals root and this is going to be where react is just injected right onto the page at this tag inside of our HTML so once this loads it's going to say hey find the root tag inject this HTML that is a header tag that says this is JSX so if we press ctrl s and save it you're going to notice that our JavaScript now has a bunch of extra stuff in here and this is that automatic compilation that's going on so if we pull this back up in a browser and I'm gonna close this and refresh the page and we're gonna have a problem here so let's go ahead and take a look and it says exports is not defined now there this is where we end up coming into another dependency within our project and this is something that a lot of people they're like well why do I need webpack and this is why webpack is is always used in modern day projects because by default when our when our code got compiled you can see here that we're using this exports right here so exports it doesn't know how to how to handle this and and only webpack really knows how to handle this sort of exporting so what we need to do is we're gonna install web pack into our projects so that web pack handles the loading of the necessary components that you need which is like react and react DOM and then also any other components that you create for your your project if you want to import them the way that we did with react and react Dom you need to use webpack in order to do that so that way between the combination of typescript and web pack and react it's going to jam all of your code and everything you need into one single javascript file but all the importing is gonna work without you having to rely upon the browser in order to do that so now that web pack has played into the equation if you have Visual Studio code open make sure you click on this make sure your your terminal is open but if you click on the plus sign you can open up a new terminal window and now you can use the drop down to actually jump between all the different like here's where our web pack is watching and here's another empty terminal and we can go back to MPN install and we're gonna say this is going to be a developer dependency as well so we'll say - D for developer dependency and we're gonna say we want to install web pack and also web pack CLI all right so if you guys are on a crappy Windows machine you might end up getting some sort of operation not permitted that there's a problem here what you need to do is actually run vs code and administrator mode so if you go and right-click and say run as administrator these errors seem to pop up at any different at any given moment it seems like it's kind of development for you but basically what this is saying is that it doesn't have permission to write the file it's kind of like using a sudo command if you're on Linux or Mac so again I'll say NPM install - Dee for development dependency and web pack and then web pack CLI and now that that went through everything is fine because we have administrative permission to write the files that we need and because we're using webpack we now need to go ahead and create just like we did with our typescript configuration file we're gonna create a web pack configuration file to say how web pack should work so this is going to be called web pack dot config dot j/s and i know it's a weird name but you have to actually spell it out that way otherwise web pack is not going to know how to find the configuration files and understand how to interact web pack does all kinds of stuff for us not just loading modules but it also does things like if you want to make your JavaScript files smaller and if you want to like change like do something that's like called a minifying which takes all the whitespace out of your JavaScript you can do all that stuff with web pack you can also load images you can write sass and convert that to CSS and have it all done on one build command right now that's way too much for what we're trying to do but we do need to go ahead and define this web pack config j/s so that web pack knows that ok we're going to be compiling some typescript and react files all right so one of the first things we want to do is we're gonna go ahead and create a path and we're gonna require the path module which is a module that is included with our nodejs installation and that just allows us to actually say ok what directory is this project located in and we'll use that in just a second but we're defining the path variable and saying that we need to require that library from nodejs next we're going to do the module dot exports and this is going to be equal to a JavaScript object and this is also a built in node thing so web pack uses nodejs but here what we can do is we can give a bunch of different commands like here's our entry command and it's gonna say where is this this starting file located and we're going to say that it's our index key SX is our starting file now we're going to go ahead and define our output so the output is what it's it's going to be what is the overall the the the javascript file the the big bundled file that we're gonna create because our entire application with react is going to be just one javascript file so the output is going to be equal to an object and we need to do a couple of key value pairs here so one is the file name and this will just call it our bundle is that's going to be the file name that we want to include and really if we don't man will do it there and now what we want to do is say give it a path so what directory do we want to put this file into and this is where we're gonna say path dot resolve and this is what we're using the constant that we just defined up here if you do under underscore 200 scores and then say der name which stands for directory name this will then find the directory from where and the web pack config is actually located on your computer so it can be under any file but that Dern aim is going to find that file the root directory to where this web pack config is and then we just want to say you know what I want to put it in a dist folder which will be created for us automatically which stands for distribution and it will put it inside of inside of there and it's gonna call the file bundle j/s alright guys so now that we've installed web pack what we want to do is go back over to our package JSON file and under the build command that we had defined before we now want to say you know what we want web pack to actually be the one who compiles this project and not just type script since typescript doesn't know how to import stuff like react and react dom web pack will be able to do that and this tells it to use web pack so the thing is though is if we go to run this we will go ahead and we will have an error message and I just want to show you guys so you guys can see all these error messages I mean the run web pack I meant to run build so I'm going to say npm run build and i'm going to show you the error message that occurs so you guys can see everything that's going on and here you can see module parse failed unexpected token may need an appropriate loader so because we are loading files with typescript there is a project and it's another dependency we're gonna need for development with typescript and react and that is called the TS loader so we need to go ahead and install that now so we're gonna say npm install - d for developer dependency and then say TS loader and this is a separate project and this will allow us to actually load typescript files as needed all right so now if we run we could say I'm cam run build it's going to automatically use the loader but we're still going to get another message that says hey we don't know how to handle this file type and it's because we did not configure web pack to actually look for tsx files and say hey when you run into a TS X file I want you to use the TS loader so we have to be very explicit meaning we have to spell it all out for web pack in order for all this to work and that's what we're gonna do right now so under something called the module we're gonna go ahead and define a object so this is just a JavaScript object and we're gonna have a key key value called rules and this is a list sorry this is gonna be a JavaScript list and inside of here it's going to take in a bunch of different objects or it could we only need to define one object and we're gonna say test and this is going to be a regular expression to say hey anytime you run into a TS X file type and really we want it to say ending in the tsx file type we wanted to say use so define the TS loader which is what we just installed so we're gonna say anytime you run into a TS x use that TS loader project that we just installed and then by default we don't want this to be looking into in our node modules folder so we're gonna go ahead and define that so we're gonna say don't worry about anything that's inside of our node modules folder whenever we install something using NPM it all goes inside this node modules and these are all the different packages that are needed for the projects that we've installed everything from ts like typescript the typescript loader web pack all that stuff is going inside your local node modules folder alright and then we need to add one more option to this webpack configuration and we wanted to say hey anytime you run into a tsx extension we want webpack to handle that so that way it will use the the typescript loader that we've created so we need to go ahead and give it an extensions argument which is just a bunch of different files so it says listen for any TS files or dot TSX files and we could even tell web pack to listen to any sort of dot J s files as well if we want to go ahead and have it compile JavaScript for us to like that's a longer story but if you were going to use babel you can use both babel and JavaScript and typescript in the same project but you need to tell web pack hey I need you to handle these different file extensions that you might run across so from this point on we're now using webpack to compile all of our typescript code so this stuff is going to be on github if you guys don't want to have to manually type all that out I'm hoping that by going through these error messages these things that you're gonna run into on your own because you can watch some pie-in-the-sky tutorial but as soon as you try to deviate you're gonna run into these problems you're not gonna have any idea on how to resolve them and that's why it's best to just go through hold your hand I know it's taken a long time to even get to the point where we can even write react code but this is going to be what every core typescript and react project as consisting of and then even if you didn't want to go to the typescript direction you're still going to run into this with most modern react projects using something called Babel instead of typescript so to learn how all this stuff works I think is really invaluable and that's why we're doing it so now let's go ahead and do the run build command again alright so now that everything has finally gone well for us we finally got our distribution folder we got our bundle dot JS file and now it includes all this code look at all this code all this code is needed in order to load react react Dom to execute our typescript to convert the JSX to JavaScript all this stuff is now going on I've showed you how to do it all like hand by hand line by line I'm not sure what the hell that means but line by line you guys now know how to get to where you're at now you might notice here that it just compiled and it's no longer watching for us because it's not using the TS config anymore it's now using webpack and for everything so we can add one extra argument on here to say watch just like we did before and we're gonna say true every key value pair make sure you have a comma otherwise it it will mess up but now that we do that if we run the build command again we don't have to keep running it over and over again it's gonna continually build you can see that it's watching it's still running and if we were to change something in our source here if we were and we can even delete this j/s file now we're not going to use it now if I were to say this is your your dog with a shank or something you know now this is going to recompile and you can see it actually did it it created it for us and let's go ahead and open up the HTML page and see if we can actually get some HTML render to our browser alright so I have the the file open like we did before I'm gonna refresh and then oh and that's another thing see I'm including all the error messages it's saying it's still looking for the index dot JSP file in our in our HTML so let's go back into our HTML and say hey we don't want you to look for the index Tijs anymore we want you to find the bundle file that's in our distribution folder so if we go back to our index dot HTML you can see it's looking for an index j s file that's no longer there so instead of this source we're gonna say you know I want you to look inside the dist folder and look in sand and then grab the bundle file that we have web pack build for us which is right in here and this is again we're not gonna have to configure too much more from here but now you guys have seen all the different angles and stuff so by updating that we should now get finally working go so back to the browser refresh and then finally react is now rendering this information so if we right click you're gonna see that this HTML that got put inside of here is inside the root tag that we told react to bind to and all our react but this is our main component so at the beginning of the tutorial I said you have your overall you know Christmas present Hanukkah present whatever you got you know and then everything inside of there are a bunch of different components so if we go back to the index TSX there always has to be one main component and it could just be a simple div tag like right here is just a simple div tag and it can include all kinds of HTML in here so like h1 testing we could put a paragraph tag in here this is a paragraph and we could even put anchors in here so right now we're not gonna click on anything but click me so it's not going to point anything but these are all these different HTML elements that sit inside here but this is the Christmas present box and it contains everything so all these are child components or elements inside of the overall main tag which is a div tag so there's always got to be some sort of surrounding either a div tag in most cases is going to be a div but it doesn't have to be but that overall present is your react application and it just consists of a bunch of other smaller presents which are your components inside of it and that's how you need to view your overall react architecture when you're developing these react applications so press ctrl s to save go back and let's look at this stuff in the browser and if i refresh you can see that we have these different elements we have an h1 we have a paragraph tag and we have an anchor tag all right guys so now that we've gotten this far let's go ahead and make our first actual custom react component and one thing I want you guys to keep in mind here is the way that we create this component is the way that all react architecture is built so I worked for a company one time they're called costar and they make things like apartments calm and loopnet and co-star is actually a humungous commercial real estate analytics company and they were actually when when I got hired onto that team I was working to rewrite the loop net application from an older legacy code base into a modern react code bass and at the time I had some previous react experience with my previous employer and I had also done some react at home and I have videos going back long a long time so I had actually felt like I had a pretty good grasp of react but when I went there I realized that holy crap this this application is huge so as we were developing it it was a and when I say humongous there was like thousands of components and those components had a lot of functionality on each one of them and everything from a radio button to an input for like text input for just even like headers and and paragraph text and all kinds of stuff they were all their own separate component and the reason why is because you get to use those components over and over again and really identify and create what is considered to be an API on that controller so you can essentially say you know what you guys want to write a new web page you're gonna follow our design standards by using our custom components and then you're gonna go ahead and apply you know you want to change the color of the text or you want to do this or that you can do all that by passing in data to the components and we'll see how to do that in a moment but the the key point I'm trying to make here is that the reason why this is good architecture is because you get to reuse that code and you can also be very explicit and and make sure that people are using the code base in the right way because you design the components to only work in one particular way although they can work in as many ways as you want but a company typically wants to keep the same look and feel across all their pages so as new pages of functionality get created then as long as everybody's following the component architecture correctly they're calling the right api's and methods and and passing the right data to the component and it's going to behave in a predictable way so and we're gonna see how to do that now let's go ahead and create our first component and since we have a header here that's called testing we're gonna create a component that we're just going to call our header tsx file alright and for every component that you make you have to import react so you're gonna say import all as from reacts now this time though you don't have to import the react Dom only your outer present your outer component the Christmas present reference I was making before that is the only one that's going to use react Dom render you only have to use react Dom to render your HTML and you typically only do it one time for your application and that is like your root starting point if you've ever done like Java development or c-sharp development that is your main function it's the starting point it's really it's the only time you're going to use react Dom really so let's go ahead and and after we've imported react let's go ahead and use it now we're going to look at the more modern architecture of react I'm not going to waste your time with the class space react components and the reason why is react has now gone into a functional component style so most of your modern react and especially if you're looking to get hired all the new code bases are going to be using it the way that we're going to be developing it in this tutorial series so to do that we're just simply declaring a function because react is just JavaScript function calls that spit out HTML but under the covers there's quite a bit going on there but let's go ahead and just say whatever the the component name is going to be called that's what you want it to be now with react components it is important that you have to know that it is Pascal casing so it has to be capitalized every word of your component name should be capitalized and that is um yeah it's just a rule so just just follow that rule and uh and shut up I'm just kidding no so let's go ahead and spit out our h1 component so we're gonna say hello world and let's do a exclamation mark it's more it's more legit that way alright so now we have this this function header component alright and we're just gonna keep it here so it's just gonna be this static HTML message you're probably like well why the hell would I make a component that has text in it and we're gonna see in just a moment you can change this to be very dynamic and we'll look at that in a moment but for right now let's go ahead and remove this header tag because we're gonna use our custom component instead but in order to do that we need to go ahead and import it so we're going to import the name of our component which we call it header but then we have to say where are we importing it from so we have to tell it import it from the header file all right now this is going to complain and say that you're not you you brought it in but it's not being used so so and then another thing too is when you run into an in a situation like this where it says that there is no export it's because the component itself needs to be exported so you want to say export and then the name of the component and then our message should go away when this thing is there goes no it's still there all right anyway it's done it's because it's not saving yet okay let's go ahead and use this now so we're gonna use our header component now keep in mind with JSX you could have a opening header tag and a closing header tag or actually you know what I'm actually I made a mistake here I'm sorry if you wanted to all right it is a good is a good good thing I actually keep all my errors in here and this is just stuff that you're gonna run into as your coding honestly and it's stuff that I know all about I'm just doing it wrong but if you want to actually have multiple exports per file you have to actually wrap it inside these curly braces here and that's one way of doing it but if I didn't want to do that and if I just wanted to say import header just like the way that we had it then you have to export I default so you have to say from our head header file export default and then the name of the component if I did that then it's not going to complain you can see that it compiles so that is the difference between the two if you want to import something without it being in curly braces then you have to actually say there has to be a default export for the file if there is no default export you have to wrap it like this and it's going to give you the error message and then you would just go like this and put it inside the curly braces so again it's good to actually include all these error messages in the tutorial I don't have this stuff planned out it's not a pie in the sky thing coding is never that way you're gonna be writing code and shits gonna break all the time and that's just the way it is and like there's all these tutorials out there or even the books it gives you these you know these perfect pie-in-the-sky scenarios and if you don't run into error messages the only way you really learn is by breaking stuff so anyway let's go back to how you used a custom component now you can just close it off with this bracket here that's the shorthand way so that's the way most code is done when you see stuff in a react codebase but you can also be very explicit but you can see this is just kind of unnecessary text so you don't really need to do that so let's let's not do that and we're just gonna close it off the shorthand way all right so now by doing that if we go back to our web page and we refresh it and you can see that we have the hello world so now we're using an actual custom react component that we created ourselves but the problem with this approach right now is that hello world is static it means that it does you know it doesn't change it's just it just it's just there you know it's like a brick wall it doesn't ever change unless it crumbles and falls apart but we don't deal with that in coding other code bases can crumble and fall apart for sure but anyway you guys get my point static means it doesn't change but how do we actually say you know what I want this header component to be more dynamic and the way you do that is through something called props and props are the way to pass data to your component from the parent and in the data that you pass within props it is going to be considered static data meaning that the data should not change when you're gonna use props now we're gonna see in a moment though if there's some sort of dynamic value that says you know based on the time of day this value is gonna change this that and the other thing or you click a button somewhere and all of a sudden that that's supposed to change based on a button click that happens somewhere else on the page we're gonna see how to do like truly dynamic behavior with state but for now when you're dealing with data that you're passing to your component if it's relatively simple data like here what we would want to do is pass in text that is displayed inside the header and that is the perfect example of something where you would want to use a prop versus state so state we'll see in a moment examples but that's going to be data that changes all the time but the concepts are the same as far as how you pass the data to your component so how do we pass data to the component via props well you have to actually pass in props to your function so just like that we're gonna pass in some props and then the props can have all kinds of different values from strings to numbers to like list arrays all kinds of stuff but we're we're not we're just going to pass in some simple text for right now but to be able to use that we need to reference the props inside curly braces inside of our JSX HTML so in here we're gonna say props and then whatever it is that we're looking for in this case we're going to call this text but the problem is at the moment is we're not passing any text to our component so if I were to refresh the page you're going to get nothing for the header the header is going to be there but it's going to be empty so you can see it's empty there's no text in there we didn't pass any text as a prop so in order to pass the the prop you need to actually use HTML attributes which are things like on an anchor tag for hyperlinks there's an H ref which says it says which web page should I go to those are called attributes on your HTML and JSX slash HTML that we're looking at right now also has attributes and that's how we're gonna do it so we're gonna create an attribute called text and then just say your dog Jake I used to say your mom man but like people get offended by that like oh no I don't know why people get offended so easily so anyway if i refresh now you can see that we get your dogs and jank now past there so now we have a lot of control and we have a lot of dynamic behavior we have one shared component and I can actually use it as many times as I want and you know what I don't care people get offended boom look at that and you can see here the same component can be used over and over again so you could use it a million times if you wanted to but another key feature of this is what if you were like you know what I want to put some inline style in here if you want to do style tags and JSX it's kind of weird you have to pass in an actual object of key value pairs but something like if I wanted to have the color always be red then I could just define that right into the component and be like anybody uses my header tag it's always gonna be red and now if i refresh you get red and you know that's probably not the best way to do it and typically what you're gonna see is that you're gonna have classes from CSS actually applied and you know it'll be like a class name here but we'll get into that in just a moment in fact you know what let's do it now let's do this no all right we're gonna go ahead and I want to create a folder that we're gonna call our public folder public one and one second so public folder I'm just kidding and in here we're gonna create a CSS file so we'll just call it some main dot CSS which is your cascading style sheets and here this would be a better way to do it will just say primary header is the name of our class and we're gonna say that the color is red all right so now that we've done that we need to go ahead and reference our CSS in our HTML so I can load and you're gonna say style sheet H ref and we're going to point to the public main dot CSS all right we'll close that off so now we're loading the CSS and a better way and a more common way that you're gonna see with these components is that they're gonna reference an actual class name instead of this style now the funny thing about attribute it's inside of JSX is that they are camelcase meaning that like something like anything that has so it's weird like there is no class in JSX it is class name and that is like one of these weird quirks that like normally under an HT HTML element it's gonna be class equals blah blah blah but you can see it's going to throw an error message and it says you know ah what does this even say it's not assignable block class does not exist on type anyway you quickly become accustomed to the fact that its class name and here we can go ahead and say primary header and save it and then we're going to get the same result and just so that we can see I'm gonna go ahead and change the font size of this to like 100 pixels make it huge and now when we refresh you're gonna see it's a really big header clearly way too big but the the the it's more reusable in this way because you want your CSS to be controlling your styles we probably wanted somewhere around there I don't want to save that actually but inside of here we can actually also use Chrome to help us debug stuff which is another reason why it's just easier to do this with external classes we can find a color that we like and you know I like that color we're gonna keep that but copy that pull up this change the color and put this back at 24 pixels and now a primary header can be used wherever you want and it's just a cleaner approach instead of having the the style but again you saw that if you wanted to put inline style on this you have to actually use a JavaScript object within the curly braces which is somewhat weird but again going back to the camel case thing with react it's something you have to get used to because here let's say something like font size write something that has a hyphen in it normally the CSS is this but this doesn't make sense in JavaScript which is really what JSX is so you have to instead use okay so you're gonna say you would do it like that you would do I'm sorry this has to be and uh just like a JavaScript object you have to have that inside a string value so key value string value and then anything that has a - for your attribute it needs to be camel cased which I know is kind of wherever you get used to it and again now we have this combination so it went back to being big because we put the style in line and you can see if we look inside here that it has it turns it to this camel - the hyphenated real version of the style versus the camel case JSX version and again you'll just eventually get used to that the more you do it so it's really important to touch upon all these things because can't be a react expert without it alright guys so we've seen how to pass some text to our component now because this is typescript one of the biggest benefits of typescript and to enforce the the to make sure people don't do crazy stuff with your component you can force types on this so you can actually define like an actual type so if I wanted to do that I can actually say you know what I want props to be in this case we have text right so we know that text is gonna be a string maybe we don't want it to be a number right now we could actually pass in a number if we wanted to and maybe we don't want that maybe we want to restrict it to say hey anybody that's using a header we only want you to use a string so if I wanted to enforce that rule what I'm gonna do is I'm gonna declare a type which we're gonna call our and this is by this is just by convention and you're always going to say whatever your component name is and then have props on the end and this is going to equal essentially an object but it's going to be an object as key value pairs to say what it is that's gonna be passed and so in this case there's a text and then we want the value to be a string and then we wanted to say down here to say hey to make sure that they only pass in the right type the right type of prop we're gonna say that it's of type header props so this actually now will restrict other crazy stuff from being inject it in and also if they don't inject the right amount of data it will complain so for instance if I now try to say let's pass nothing in you can see that instead of this even compiling it immediately complains and says hey your text is missing and it's required now if for some reason you wanted that value to be optional then you just have to put a a question mark here which means that it could be null and that means you allow null values but in this case we don't want to allow a null value for the text field because in the header doesn't mean to be there if it's just an empty h1 that would just be crappy HTML so you can see that gives you the type protection that's one of the main reasons for typescript and its use within react especially when you start getting into really large and complicated projects every component is going to have all kinds of data that it needs in order to function properly and this type of you know type checking make sure that you don't have runtime errors as the applications being used later on down the road so again to satisfy this we can just pass in a text value for the prop and now it's it's satisfied it compiles again and everything's fine now another thing you should never do with a component is you should never change your props inside the component for instance you could actually say you know what props dot text equals don't do this this is considered an onion although it'll allow you it's something you should never do because you just you just never do that you know what I mean like if if your value does need to be dynamic we're gonna see in a moment that we're not going to use we're not going to do it this way we're actually going to hold the value in state and allow the state to manipulate the value we want pure functions within react we want to know when you talk about pure functions you want a component to behave the same way all the time no matter what so again although your your component allows you to do that that actually goes against functional programming print suppose and pure functions with like the way that we're doing this with props if you had a value that's dynamic then we're gonna want to use state for that value and we're gonna get into state and alright I'm gonna go ahead and delete the improper use of our function here alright so this is a good header component this is going call that one a day so let's go ahead and create a new component which we're gonna call we're just going to call it our date is X so this is going to be a component that actually gets to date so again like we've seen before import all as react from react all right so we'll just call this date and here for right now we're just gonna return for right now we're gonna have it be we're just gonna have a button here that we're gonna click so we're gonna just not do anything with it we're just gonna say get the date so for this component because we're actually dealing with the date and JavaScript has a built in date objects like a date type it gets things like it gets all kinds of crap related to times and dates and this is actually a terrible name for it because we don't want to overwrite any of that date functionality so you should never actually define methods components or even variable names that share the same thing with JavaScript relatively minimal library so things like the math object or the data object you don't want to overwrite that so really we want probably this to be called something like custom date and we're gonna call it that and I'll just change this as well now a lot of people and the reactive element they're using something called kabob casing so we've talked about Pascal casing and camel casing this is kabob casing where all the the every every word is separated by a - that looks like it's all on like a shish kabob like you got your steak right here and your onion right here that's called kabob casing so yeah just that's what a lot of people do with their component name but whatever sort of convention you decide to use just make sure you stick with it and let's go to make sure we export this so we're gonna say export our custom date and the reason why we don't want to overwrite that date is I'm actually going to have a date variable so we're gonna call this let date equals new date and this is where you would end up getting an error message like if we name this thing date then you're gonna get an error message here because it says only it can't be called on anyway it's trying to new up your own function that you're creating so that's why we ended up doing custom date to solve that and then date itself as you could see enables basics origin retrieval of dates and times that's a built-in javascript thing alright so now that we actually have our own private variable that is on our function component we can reference that variable just like this inside curly braces like we saw with our prop so it's just gonna reference this name and let's go ahead and and see that in action and honestly I don't know why the mouse cursor was glitching out like that that's completely crazy but I guess that's Windows for you-probably or something but before we can actually see this in action we need to go ahead and use our custom component inside of our inside of our main starting point so let's go ahead and import the custom date component and we're going to put it under the header all right so now we'll be able to go back and see this and yeah this is something else I want to show you guys all right so check this out when you get a message like this it's gonna say minified react error message and what this is is that it does not actually display what the problem is so you have to actually go into your console and click on the link and it'll actually tell you what the problem is here so it says error decoder objects are not valid as react children and there's gonna be all kinds of different error messages that react will spit out but it's all minified now to kind of cut down on the overall file size of the react project so instead the console will just direct you to a URL that actually explains what the error message is and the reason for the error message is because we are newing up a date object and then we're trying to reference an actual object here and it says hey date is a child of this react component that is a div that is like the you know the outer container of this particular component and it can't have a child element inside of it that is an object and the reason why is we just need a string value from this so really if we're using proper typescript we should actually specify a date as a string value and you would get that error message before it even compiles because you'll see date is not assignable to type string because date is going to return an object and date is saying hey I want this variable to be a string so this could actually be you know it would warn the developer as they're doing it okay clearly I need to call like to date string and that is a method so I'll call it as a as a method here and then everything is fine a compiles fine but that is actually considered a runtime error and we didn't get the error during our compilation and that is the exact reason why people use typescript one of the biggest problems with JavaScript development is type safety and really it's about any language like Perl PHP these things that magically change data types those types of languages can be really dangerous when it comes to runtime errors it's very difficult to catch all those things so and languages like JavaScript yep like you strictmode Perl has au strictmode probably PHP too I don't I don't know but Java scripts always been plagued with that problem and that is really the reason for typescript because so much code has to be written in JavaScript to prevent those types of errors from actually occurring all kinds of type coercion z' and all kinds of stuff so anyway let's go ahead and take a look at this we have our daytime which is being printed out as a string and then we have this button it doesn't do anything when we click it and we're gonna see how to get just a little bit more tiny so in order to get this a little bit more dynamic let's go ahead and say you know what this date is a string and we're gonna say it just Inc equals an empty string alright and we're gonna reference it here so I would show you the page where you guys can look at it if you want but obviously you're not gonna get anything for the date it's just gonna be an empty thing it's just going to show the button hello why don't I show it so you can see there is no date here I'm going to close this out so there's nothing here so now what I want to do is I want to actually wire up a click event so when you click on that button it's going to display the date so the way we should do that is anytime you have dynamic functionality like click events and such on your components then we can go ahead and make them more dynamic by actually attaching functions on to our react function component and you can it's just like any other it's just like any other function and JavaScript slash typescript here is the the shorthand version of our function so we're saying gate is attached to our custom date component and then we have a get date method attached to that component and now we can actually say you know what when you call that we want to go and change the value of our local variable called date and we're gonna say new gates dot to date string like we saw before and then now we need to actually say you know what when you click the button I want you to call this function you can see it's grayed out and this is one reason by Visual Studio code is very helpful any sort of editor is helpful but I love Visual Studio code actually but this is telling you right here gate date is declared what his value is never read it means that it's not being used so why did you declare if nobody's ever going to use it it's just unnecessary text so let's go ahead and use that now so if you want to do an on-click event with your component you need to pass in the function name which is get date into the curly brace here so we're gonna say get date save it and now when we click on the button our date should appear where we want it to appear so to see this in action let's go ahead and take a look we're gonna press get date and we get nothing and the reason why this is is because props are immutable and they should not change the value so this is a a pure function component so if date if you wanted it to be dynamic then it should be passed in as a prop the way that we saw it with the text value you could pass in a date to it and the parent could say every time I pass something to it it's gonna rerender it's you know the component and you could get the dynamic behavior that way but if you truly want a value from within your component to update itself and then that is when you need to actually use state and that's what we're going to transition to right now so we can take a look at that and also I just want to make sure you guys are aware of the fact that the function is being called so if I were to just do a simple alert hello world message on the button click you'll see that the the button click is actually occurring so if i refresh and I hit the button click you can see that okay we're getting the JavaScript is fun is firing but the prop even though we're updating the prop react does not know to re-render itself because you didn't tell it to say hey this date is something that I want you to keep track of and every time it changes I want you to rerender yourself so in order for that to happen that's where we're gonna use state and we're actually going to use a modern version of how to do state man maintenance within react via something called react hooks alright guys so to see react hooks in action what we need to do is we need to go ahead and rethink the way that all this is done in a way so because we saw before that we had this this date prop and it's really not a prop because it's not being passed as a problem we have this date value but react is not listening to any changes to that value so when we click the button even though we change the value it was not reflected in the components so in order for that to happen we need to add it to something called state and state keeps track of any sort of values that change and then rerender all the time and to do that let's get rid of this alert message and what we need to do is we're going to declare number one the value that we like the variable name that we want it to keep track of which could be whatever variable name you want and then we also need to declare a function that is gonna be responsible for changing that variable name or variables value I'm sorry so to see that we're gonna say we can just use a constant function you could use a let as well it doesn't really matter but you could say let's if you just want to go with that convention it's a lot of people can you could use constants or date so it doesn't matter but a constant we're probably better but right now pretty much all this stuff is being turned to VARs anyway so it doesn't have much of a performance detriment or even benefit to do it with a Const so in case you guys are wondering what a constant is obviously it's that it's just a constant that doesn't ever change but anyway so we're gonna say you know it since the name of our variables date we can leave it at that now you're gonna get the error message saying hey you've already declared it so you can't you can't declare it twice and that's fine but now let's go ahead and say you know what we want the the function that we're gonna say hey when when the date changes we want it to be called set date so we're gonna say that this equals react dot use state and this is something it's it's using something called react hooks and to get rid of this error message let's go ahead and get rid of this this value and because we had date as an empty string before before I deleted that you could see that it was just an empty string then what I could do is I can actually say if I want date to have a default value of an empty string I can just pass in the empty string this empty string will be assigned to this date variable and then if I want to update the date variable need to call this second argument which is set date and that is going to be the function that's actually going to update the date so our on click is calling get date which is right here which is a function and what we need to do here is instead of saying date equals we're gonna actually say set date so we're going to call our set date and we're gonna call it as a function and pass in this argument to the function so we're now calling set date from within get date and you'll see now that we can actually dynamically change this value after the button is clicked so it's going to be empty by default because that's where we defined it or what that's what we set it to when we defined it and then we said hey when this function is executed which it gets executed on a button click then you're going to call this set date function which is here to change the value of gate to this value here and this will update itself to show the new value so here's the example the button there's no date here you click get date and now you have the date and we could even get this more dynamic like if we were to say you know I get time then you know let's let's do that now you know let's do that now so even though we call this Matt we can even change this to time let's just do this all like set time set time and we could say set time all right I will just say get time because that doesn't need to be different then we're gonna call this time and this is gonna be called get time and instead of this being so we're gonna be it's the kids at tea time string all right there we go so it's the same thing and now we're gonna change this to say good time and really we'd want to change the friggin custom date to it custom time but who the hell cares at this point all right I just want to show you something more dynamic though so every time you click it will get a new time so if we go back and we click on get time you can see that we get the the amount of seconds that are currently going on so every time I click it we're now at 10 seconds 12 seconds 13 14 15 16 17 18 so as I'm clicking it it's getting the time and that's pretty cool right so now that's a much more dynamic value all right guys so we're making some progress here let's make a new component that we're gonna call our Froot Loops component and yes like the the cereal and the reason why is I want to show you how to actually do list because a lot of people like how the hell do you do list cuz it's not exactly straight forward within JSX there's a specific way that we have to do it so just like um just like we have been import all from react oh wait I'm sorry as a react from a react and we're gonna go ahead and say function Froot Loops yeah what state loops that's fine and then here we're going to not sure why I said render render is the old class-based system but here we're gonna go ahead and we're gonna have a ul element and for every item in a list and we're just gonna say that the list of values we're gonna define it right here so let fruit equal and it's just a list of values so red green blue yellow okay so this is just a simple array array of values and if I want to do it the typescript way you'd obviously say that it's an array of a string of values and I hate how it does that right here but oh that's funny look at this error message here types can we be using a TS file I'm actually still used to the JavaScript way as well so like we can name stuff JSX in the JavaScript way but it needs to be TS X and you can see that we can now have the declared types so we're saying it's an array of string values each one of these are a string and I had that wrong file extension in there so if we want to loop over all the values then what we can do is reference our map the the map function which is we could since this is an array it's iterable so it means you can iterate meaning just 1 2 3 4 go over and a loop just like a for loop fruit loop yep so to do that what we're gonna do inside the curly brace is we're gonna say whatever the variable name is which is our array and then we're gonna say map and then map is a function and you could end up you could get the value which is the string value and then also the index and here make sure you close it off with the B curly brace and the end of the the function argument here and inside of this element what we want to do is actually say return an Li element and any time you're dealing with an iterable meaning that react is going through a loop of something and it's creating an element for each item in the array then react needs to have something special on it which is called the key and it has to be a unique value so the easiest way to provide a unique value is to provide the index number for whatever index value is for like you know for the array so computers start counting at 0 so the first item will be 0 the next one will be 1 and that is going to be your index value so you're going to assign that to either key so that way every item that spit out and it's going to be however many I in our array they're all gonna have that unique value for their key value and now inside the Li we're just simply going to say let's reference the value so that's how you actually loop over stuff in react in this case it's just simply a string but you could be looping over objects and and if you were looping over an object instead of it being value you'd be referencing the object and you'd say like value dot title or whatever it is but in this case it's not an object it's just simply a string so this is going to be the string of value so let's go ahead and export this function all right and then inside of our index we're gonna go ahead and import that all right and then to see that in action that we can just simply reference the new component and now let's see if our Froot Loops get rendered and there they are they're all inside a bunch it's an unordered list so these are all Li elements now let's also add another feature here this is going to be conditional logic and we can actually put conditional logic right inside of this this loop here to say let's go ahead and just detect what value we're dealing with and we can assign a dynamic color and this isn't like the best way to go about it but it's a good example of how you can do conditional logic from within your JSX your functionality because this is really all just regular JavaScript / typescript inside of these curly braces so if I wanted to do something like you know if value equals red then I can go ahead and say and outside of the if statement I'll go ahead and just even define a variable and say let color equal an empty string and if we want to do proper typescript we're going to say that this is this color variable is a string type so that way we can't declare anything else to it and here I could say so if value equals red I could say color equals red now because all these are actually yeah we'll see that in just a moment but here's an example so if I were to say you know what let's add a style and like we said like I've showed you before if you want to do inline styling you got to pass in an actual JavaScript object and I could say you know what color equals the color so the color key equals the value of this variable that we defined right here so if the value is red we're gonna have an inline style of red now and you can see when we go to the the page now you can see that the conditional was met it said okay this is red so it equaled red there's actually an easier way to do it since obviously every one of these colors is a valid CSS property you could just simply assign the property directly without even creating a like you could even just simply say color equals the value right because every one of those values is a is a valid CSS color so if we go back to the page now you get red green blue and yellow alright so now to make this component more reusable whenever you have data that's like static data like this it's typically a better idea to have the data passed into the component versus actually declaring the data from within the component because then the component can be really muddied up and dirty here so you would do it the same way that we've seen before where we're like hey props is gonna be a fruit loops prop props and we'd have to go ahead and define that so type Fruit Loops props equals and then here we're going to say that fruit is going to be in a ray string values and mine just automatically closes like that for some reason and then here let's go ahead and take this away and we want to reference the fruit from the props since we know that it's gonna be passed into the component and now there can be like a centralized state so when you start getting to like mob x and redux and all this other stuff or you're making server calls and things like that that data is most likely not going to be stored within your component itself it's something that you'd want to pass in and now you can say hey you didn't pass in this fruit it's missing the fruit loop the fruit and it tells you when you go over it I thought it would tell you the type but it just says that it's missing ok and either way if you were to say because we set a ray of string like if I said fruit equals a string then you're gonna see that that's where you get the error message and it says hey you passed in a string here but we need an array of value so I could actually just simply define the array I'll paste that in here and then say fruit equal fruit and now it's satisfying the component this could come from an AJAX call or a server a local file system that you're just importing we can add more values to it what other ones pink what else we got green blue what other fruit loop colors I know there's no pink ones except for the stale old red ones I think that's about all of them right what am I missing probably another yeah fine Brown no I have a poop fruit loop all right so now having that those values defined outside it's it's a bit more dynamic it's more clean and you could get you know you could separate your data from your actual components all right guys so the next thing I'm going to show you is that every component has the ability to call a code after the component is rendered a lot of times what people do is they try to call custom JavaScript and they try to have that JavaScript interact with a react component but the JavaScript code is actually being called before the react component is actually mounted into the browser and therefore when you're looking for a certain element or something like that it's not there when the code is being executed so so to see something like that in action like for instance if I said you know what I want to do something to this element after its rendered if I just put like a custom ID on there so I'm going to say my header and now like as this function is is executing what if I said you know I want to do something so I'm just gonna say alert document query selector and I'm gonna look for my header I want to show you what happens here so if i refresh this page what you're gonna see is you're gonna see null so I know it's hard to see there but it is null that means that the decode fired before the actual element was there so how do you actually make sure that custom code gets fired after the element is loaded and to do so you want to actually do something called you affects which is part of the react hoax and what we would do is just simply reference the react library and we're gonna say use effect and then here you're gonna pass in a function that is going to be called and this is going to be called as soon as the component is mounted and that way if you needed to do some sort of dynamic behavior you wanted to change the values you know you could do all kinds of stuff with it from here but now this isn't gonna be Knoll anymore you can actually reference it and again it's just simply looking for this element and we saw that it was not there when the code was being fired before but now this use effect code is going to make sure that it's only gonna fire after this component is on the browser so going back to the page we refresh and you can see that you actually have the object and you can manipulate it and do things with it from that point so that is using effects and react all right so I didn't really touch too much upon the actual debugging of react but because we have our where the heck is it that's our redox I see I see I see okay so we have this this is our Chrome extension and and I'm glad I actually show you guys this what we need to do is enable source maps html5 source maps allows us to debug and right now you can see when we click on the react tools it says this page doesn't appear to be using react and it's because we didn't tell web pack to actually use source maps so to add a lot more debugging capability let's go back to our web pack config and we can just put it after the entry element here but what we're gonna say is dev tool and we're gonna say inline source map alright and we're gonna have to restart web pack so ctrl C should stop it press Y run our build command again and this should now generate the source Maps that we need for debugging Oh interesting so it's not related to the source maps which I'll touch on in just a second which you do need for proper debugging but check this out like it says that by default when we're when we're running this from our file which is what we're doing here you can see it's just a simple file you have to go into your settings extension within Chrome so I'm gonna go here and go to my settings and then if you click on extensions and you click on details here you can see allow access to file URLs so we want to go ahead and turn that on and now by doing that this now is now picking up on the fact that react is there so that's that's a news to me I didn't realize that I might even have to well I'm just gonna join all right so restarting Chrome did that ok so now I can actually click on the components and what I wanted to show you here is that like if you right-click and you go to your component so these are these are all anonymous they don't have a name but you can see the actual props on them right alright guys so for the reactive ellebra tools it seems like it really hasn't been updated and in my opinion in order for it to use some of these functional components like it you see was reflection in order to figure out the component name in this case it can't it just it thinks it's all anonymous and it's usually helpful to figure out what type of component are you dealing with you don't want to see a bunch of anonymous components it's not very helpful for debugging so in order to fix that what we have to do is we have to explicitly on the name of our component reference this display name property and then I would just simply give it the name of whatever the component name is and we should do that for all of our components here so you can actually see so I'm getting custom date dot display name equals custom date and it would just be helpful to do all of this stuff here for every one of your components you create so that way it just makes it easier to debug and figure out what you're doing and like I said I think you know this is something they're actually in the process of redoing and last I checked the chrome developer tools and I don't know this this seems rather I would say verbose and unnecessary but it's something we have to do we didn't have to use - we didn't use stuff to do that with class-based components but I'm not trying to complain about it alright so now by doing that if we refresh we now have the you know the the custom elements here so we could see when we click on header we got props that are being passed in I wish I could change this on the fly but you can't custom date no props passed in fruit you can see all the different fruit that we passed into it so it's actually helpful for debugging and then going back to the source maps that we enabled for webpack I just want to show you if you go to your sources panel and you go to your web pack since we're creating the the source Maps what you can do is we're actually running this bundled JS file and this stuff isn't legible this is what webpack created for us and you know it's by in typescript as well it's typescript code and being converted to all this stuff but you can't really deep bug this stuff very well so that's why we turn on source map so you can actually go into your source here and you can see all of the files as they exist and and we can just go ahead and simply put some some debugging on there in order to see so certain things like if I do put a breakpoint there and you can hit the breakpoint you can see the props in real time and stuff as it's being passed and so it makes things a little bit easier to debug but not really trying to get in too much into the source Maps that's something you'll have to read up more about all right guys yeah I'm pretty tired took me a long time to do this series I'm trying to get back in the swing of things with tutorials and I plan on coming out with a lot more so there's gonna be some more stuff I want to talk about with you guys when it comes to react it's gonna be about like dealing with state management with redux and also with mob X I'm gonna start with mob back so I can show you guys how to do a state system and we're also going to get into some data scraping through tutorials and things like that so you guys can even you know build a full-fledged website by collecting data analyzing that data we're gonna use Python and a few other things in order to do that but ultimately all these tutorials are gonna come together so you guys can kind of get up to speed with what I know and honestly you'll be well on your way into hosting your own website like this is my website here code hawk it's mostly just for a portfolio based thing where it's like hey contact me if you guys want if you're interested in getting work done things like that but every you know developers should have their own portfolio website and I really think that you know you should host it yourself so I use Linode which is a sponsor to this channel and they're a great company as far as being able to save a lot of money for my hosting needs and there's also a newsletter so if you guys are interested in more stuff from Chris Hawkes if you guys want to be up to speed I get discounts from different products and things like that so a lot of times it's like free trials and all the other stuff and I don't necessarily want to talk about it you know on my on my videos but sometimes it is good to get in contact with you guys to talk about some of the latest stuff and also if YouTube ever went away that I'd still have a way to reach out to my audience so make sure you guys sign up to my newsletter so if you go to code Hawk com you're gonna be greeted with a pop-up that's going to ask you to subscribe to my newsletter and if you guys could definitely check that out the link is in the description tab below also again if you're looking for hosting needs check out the node and if you guys have any questions or anything feel free to leave a comment let me know what other tutorials you guys are looking for and the code is also going to be available on github and that link is also in the description tab below alright guys I hope you guys enjoy this journey and from here what you got to do is build your own components build a component for looking at a youtube video how do you pass a URL to your you know video components so that you can just pass a bunch of different URLs and in an array like we saw in this series there's so much you can do with what we've covered and it's enough information where you should just be able to spend weeks if not months just kind of go on going over it over and over again not really watching the video over and over again I don't think it's gonna be necessary probably use it more as like a reference and and just started building your own thing because that's gonna be the fastest way to learn and also make sure you guys smash that like button like everybody's saying these days so annoying but yeah I need you guys to like the video if you would also share if you can and I know that's a heart that's so that's a big one that ask people to do but it helps to YouTube's algorithm it helps me out and yeah definitely subscribe alright guys thanks for watching have a good night take care bye

Channel: Chris Hawkes

Views: 50,312

Rating: 4.8357348 out of 5

Keywords: React tutorial, learn react, react course, reactjs tutorial, react crash course, react js tutorial, learn reactjs, javascript, chris hawkes, react js, react, react full course, react typescript, react hooks, angular, react library, react framework, total react tutorial, reactjs crash course, reactjs full course, typescript full course, typescript for beginners, typescript tutorial, typescript 2020, typescript & react, typescript getting started, typescript react, tsx, .ts

Id: nCoQg5qbLcY

Length: 104min 35sec (6275 seconds)

Published: Wed Nov 13 2019