Learn React with One Project - Tutorial

hey programmers welcome back in this tutorial I when I teach you about the react framework fear of JavaScript developer trying to pick up react as a new skill I got you covered in this video we'll go over all of the fundamentals of react but likewise let's say that you're a developer who's already familiar with react we're just looking for some more practice I think you will still find value in this video and so what I have planned for this one is actually constructing a little project and along the way we'll go over all of the react basics so Before we jump into this one I do want to note that in this tutorial I'm going to assume that you know JavaScript you probably know a little bit of HTML and CSS but of course you don't know any react right so with that other way let's jump right in so what I have planned for this project is a little gadget that kind of mimics a file tree viewer that you would see in like your text editor so here I have the finished react pepperoni you can see that it has two folders at the start I have my desktop and applications and one feature that we'll have is of course opening these folders and inside we can nest other files or also other subfolders as well which themselves could have other folders or files inside a few things I'm on notice here of course these folders can be open and closed so that'll be something that's implement and react as well as we'll have different like icons for these files but we'll also be able to do is change the name of our folders and files right so I can change the name of this Desktop folder also this folder over here and really any of these files inside now that we have this goal in mind let's go ahead and set up our development environment so if you don't have it installed already you're gonna need to install nodejs it is a prerequisite for react right and what it is is just a JavaScript runtime so if you don't have no GS install they just want to install the LTS version I recommend and click through the installation it's pretty straightforward once you have no GS installed you want to hop into your terminal cuz that's actually well will utilize node in your terminal I recommend changing directories into some working directory that you're comfortable with housing all of these are react files so I'm just in this projects folder and what I want to do now is run the command npx create - react - app then I'll leave a space and actually enter the name of this application I'll just call it my file tree gadget so for my folks who never use node before let's actually break down this command before I run it so npx stands for node package execute what's going to do is of course execute the note package and the package here that we're running is create react tab so create react app is a note package actually written by the authors of react and what it does is install and setup all of the dependencies in boilerplate we need to actually get off the ground and actually begin a kind of blank react project and here what we're doing is just creating the project with the name file tree gadget so what you do that just hit enter it may take a few minutes to install once create react app is done running you will have a new directory with the name of the folder that you specified right what I want to do is CD into that folder and this is well we'll spend all the time for this tutorial so there are a few things inside will want to do to get going is really just run NPM start what it does is just run the application using all of like the default stuff already inside I'll just take a look at what that looks like so it's gonna run in my browser looks like my default goes to localhost 3000 so this is just what create react tab gives us by default and what I'll do now is open up this folder inside of my code editor and I'm gonna be using vs code for this one but of course you can use any editor that you like so this is on my desktop inside of my projects folder go into this gadget file where I have all of this react code that was kind of given to me for free back create react app I'll just open up my text editor so what I'll do to start is actually remove some of the initial react code that we got for free from create react app now we can go over the react stuff on our own so I'll happen site of source which houses all of our JavaScript so really all of our react code and so I'll delete some files inside of the source directory and I think I'm going to delete all of the CSS files and also looks like there's some like SVG file which is probably me spinning the logo and I think that will get us running all right of course as soon as I do that it's gonna break the application but that's okay I'll just strip out everything that we don't have access to anymore so I'll do is I'll remove inside of app just or remove the logo and the apps us s we don't need that what I'll do is also take out all of this code that this app function returns I'll just have a return the string hello right nothing that crazy over here and also in index yes but we'll also need to do is take out the CSS as well and I think this will be all we need to get going right so I changed app J s to look like this so I basically took out everything and changed the return line to just return the shrink hello and then an index J s I removed the CSS file that was imported before I think let's start over here all right so let's jump in so first thing you'll see is actually CV hello printed out on my webpage which is pretty interesting and how does that actually happen let's get into how react actually hooks into this webpage so if you look at this source directory there is no HTML file inside of this of course somewhere there has to exist some HTML file because this is some webpage right you're actually gonna find that inside of public if I go inside of my index.html has all of this stuff that we kind of got from create react app and what I just want to emphasize is this tag over here on line 31 we have a div with an ID root and so what react is going to do is actually inject the entire react app into this tag over here let's hop around let's go into the index J s if we look inside of the index.js file inside of the source directory this is actually the entry file for our react apps so let's trace through this file starting at the very top so at the top we have some basic imports for the actual react module so we have react and separately react to Dom and so for this first module just called react you're gonna need to have that module in scope whenever you actually write react code we'll kind of see that later on but basically to write code like this from line seven through nine we write like stuff that kind of looks like HTML we're going to need react in scope and the same way react Dom we use in this file just for the sake of using this a render function and I'd say typically in any basic react app you're gonna have this boilerplate code in some sort of an entry file just like our index J s so if we jump a little further I want to draw our attention to line ten looks like we do some vanilla JavaScript stuff here we just do a document and get element by ID when you find the element with the ID root which if you remember is this particular div and so what this code is doing is actually taking that div with the ID root that's injecting into it rreow dabbe looks like we have our app running in trick mode shriek mode isn't important right now really what it does is just give you some additional warnings as you code your react so where does this app tag come from well that comes from our app file or our App J's file so let's hop into that one and that's actually the function that returns some string right now which for some reason whenever I change this string of course changes the page create react app is awesome because it also set up watching of your files and I'll actually hot load them so if I edit this file and I save it well actually refresh and I can preview these changes inside of my browser immediately so let's go over some basic terminology you may recognize this thing from your fundamental understanding of JavaScript it's just a JavaScript function and it really is its kind of particular because it has a capitalized name although having a capital letter inside of a JavaScript function name is totally valid right so that's nothing special in the react sense of things we call this function a component a component is really like the basic unit in react so a react component is really just a JavaScript function that returns something to be rendered on the screen when I say rendered I just mean like thrown up and viewed and shown on the screen so here I can render a regular string just represent some text in my document over here what I can also do is return or render some HTML tags so let's say I made this in h3 I'll throw that into the mixed and will render that as some plain old text and of course because this is like gonna render as HTML we will have those default styles that come with headers right so we should get some nice boldness over here so a react component can return most valid HTML so maybe I'll switch things up over here we can have a little more complicated nav a return value I'll return a div with an h3 and also an h4 inside I'll have some different messages so y'all just say goodbye make sure you spell goodbye incorrectly so let's trace through the order of events over here when we start up our react app the first thing that's going to run is our entry file which is our index J s Falcon sign up index R yes really the important thing that happens is we make this call to get element by ID what we do is we look for the ID route and when we get the root element that would be grabbing this particular div of our index.html and at that point we're actually going to inject our react app into that div so basically this div will now contain all of this HTML that our app returns right second we actually bear witness to that let's go inside of micro and I opened up my dev tools open up my chrome console and I want to look at the elements I'll kind of step through the structure of my document so if I look inside here I see my root div right which is this thing over here if I look at this root did inside of my public HTML file looks like there's nothing inside but if I look at that same div inside of my chrome developer console if I go inside of that root div actually contains my react app notice that this div I see of like h3 and h4 is actually exactly what my app component returns over with my app component renders alright so now that we have a better idea of what happens behind the scenes when you render a component let's actually flesh out some more components the key thing that I want you to take away right now is when you have a react component it's really just a JavaScript function that returns something to be rendered typically some like HTML right so let's create another react component which really just means creating another JavaScript function so you can use any of valid JavaScript function syntax that you like it looks like here they use by default the plain old JavaScript function syntax you can also use an arrow function which I'll decide to do over here so I'll create a component called folder and I'll make it an arrow function cool now let me have this function or this component just return something basic right now let's have a return in h4 and I'll just say folder let me start by actually or rendering this very simple component what I can do is maybe inside of my app component render a folder so how do I render this component you see that it's a function but what you should not do is like call it like a function that'd be a little silly what you want to do is kind of treat it like it's some HTML right so pretend you have a tag called folder so I'd write it like this what you can also do is self close this tag with a slash like this right so this means that inside of my app component it in turn is going to render my folder component so let's save this code I should have my folder as well and of course if I step through my Dom a little bit hop inside of my roots inside of my app I also see the folder inside and again the key trick here is whenever we render a react component we're kind of just surrendering whatever it returns right following that like function behavior so far we've been really emphasizing that a react component is really just a JavaScript function it actually gives us a lot of advantages right what advantages do just plain old functions have well for one we can reuse them so if I wanted to I can render a component in multiple time so here I have three folders now it's kind of simplify this code a little bit so I'll take out these h3 and h4 is we'll just have these folders and kind of like in my initial demo of the finished application I want to give these folders different names so of course if I change like the h4 on line 12 to like desktop that won't be any good because that will mean that all of my folders are named desktop right so I need this value to be a little more dynamic let's kind of take a step in that direction inside of my folder component or my folder function I can write any valid JavaScript code rights really just a function so let's say I had a variable so you don't create a variable I'll call it the main and here I'll give it the value of a string and here I'll say my desktop and so let's say I wanted to actually utilize this variable name and have it actually render as my desktop well what I can't do is just simply write name that won't work because if I write that I will literally just show name right so if I want to evaluate this variable as like JavaScript so evaluate to its value of my desktop what you're gonna have to do is wrap up that chunk or that name in curly braces if you evaluate these curly braces as a thing within the curly braces will evaluate as JavaScript and not as some plain old text so now this evaluates to my desktop and not the literal name right all right so now that I'm able to render some like dynamic data or I have a variable that could potentially manipulate how can I actually have different folders with different names so if I want multiple folders that have different names what I need to do is give my component the ability to take in some props right so in the argument list I can take in props so this thing really just behaves as a regular function argument once you're on the inside of folder and well actually take a look at what it is in a little bit a props is just the convention we use in react and I highly recommend that you stick to it's a very key concept in react so let's say I just console that log what this props thing is so props will always be given to a component and while check its default values I'm gonna be printing out the value of props let me run that I'll go into my console if I look inside I see an object write an empty object so it tells me that hey or right now you're kind of receiving empty props for this alone folder so how can I actually give this folder some props well where I render the component so on line five basically where I'm kind of like calling the function is kind of the analog here what I can do is pass it props by just putting names and giving them values right so let's say I gave it I don't know a food prop and I gave it the value of cake they also gave it a drink prop with the value of coffee right so I'll save this code if I look at the props argument now it's an object that has that key value pair mapping right food is cake drink is coffee and so now we have a way to take in data into a react component so the analog I kind of have in mind here is props is how you kind of give arguments or data to a react component right so what I want to do here is give my folder name name prop and I'll give it the value of the name of the folder right so I'll call this one maybe my desktop I'll create another folder with the name applications so looking at my at component I'm rendering my folder twice over which is why I see my console dot log running twice but of course I have a different name specified every time so instead of using this name variable I'll just get that name from my props right props is really just a regular object so if you want to reference it you can just say props dot name right just doing some object notation over here so let's give that a go now we have my desktop and applications right so now we have a dynamic way to pass data into our components so let's keep this pattern running and I'll create another component called file so in our project a folder is like an entity that can contain other things a file cannot contain other things right so a file would be something like cat dot PNG where I'll be like actual file image and so let's have this file taking props as well I think if for now we'll be mostly the same so maybe we'll use a different type of tag for our files that way we can just tell the difference so I'll make them maybe like H fives here I'll also say the name of this file right that means when I our render my file like up here I can just use that like HTML similar syntax I'll give it a name and I'll just call it like dogs dot jpg all right so maybe it's like a photo of some dogs so there I see my dog shot jpg maybe I want to make this a little more dissimilar so I'll just make this a div maybe and kind of have some like then default textile on that dog there we go so maybe we'll also have cats dot PNG and so it's evident that we can render some components but for the sake of our application we have this pattern or this kind of logical pattern where a folder can contain other things how can i mimic that inside of my react code right so here's what you can do let's say inside of my desktop folder for now instead of using these self-closing version of this tanks ever you gonna slash over here you can actually close the tag with like a separate fragment and here I'll say folder like this kind of like how I do for like regular HTML with like this div and you actually put some stuff inside right so between this pair of folder tags that are present my desktop I'm just going to write some data inside I'll just say some stuff and I'll save this code and I want to take a peek out where that actually appears in side of my folder components what I'll also do let's say is console about a log be props again we'll see what that looks like so I'm printing out the props for both of my folders like my desktop in my applications notice that my desktop now has a separate prop called children which we kind of got for free I didn't explicitly pass in any children prop but children is going to be populated with what you put in between the pair of tags represents that component right so I have children of some stuff you could put anything you wanted inside right so let's say I had multiple things so maybe I had I don't know like an h3 of some stuff I also had an h4 in a very similar way so focusing in on just my desktop component notice that I have two things inside of it and now if I look inside of the props of my desk the children prop is now an array of those two things it's kind of peek inside of what they actually are they're kind of like these special react things kind of why they look a little intimidating but for all intents and purposes they do render just like regular h3 and h4 s if I actually rendered them right right now you'll notice that I'm not rendering some stuff and other things because if I look at what my folder renders it just renders the name in an h4 so let's say I switch things up over here maybe I'll make this a div so what does have to like the plain old text of this stuff and now inside of this div not only will I have the name but apparently I can also represent some of the children and so maybe down here I'll interpolate and I'll just say props dot children notice that my desktop is indeed actually rendering its children of the h3 and the h4 and so what I can do is actually render anything as children inside of a react component so why don't I actually bring these other react components inside right so instead I'll put these two files inside of my desktop folder so I can have this sort of structure right it's kind of hard to see that hey these dogs and cats are actually inside of my desktop maybe I'll show you how to do some really really quick like react styling in line so looking at my folder where I have the div opening tag over here you can actually give it a style prop or you can have basically an object that represents like the CSS styles so let's say I'll have like some really quick and dirty style so I'll say I don't know some border style and I'll make an object and we'll have a border of I don't know 2px solid pink so this is just one way we can kind of use like JavaScript to implement some CSS styling what I'll do is I'll now pass in this object into that style prop so if you think so notice here is like border style is indeed just a regular JavaScript object where has the akia border which of course is like special in react as well as the value of a valid CSS style and when I pass in this prop you need to actually pass it in as an object so you're gonna need to use that curly raise syntax so wherever you see these orange curly braces on my screen that actually means we're evaluating like JavaScript right so this evaluates as a JavaScript object it's totally equivalent as writing it all in line like this right so you could actually write this if you wanted to mich maybe I'll prefer it that way so all of my folders will have a solid pink border around them and you see that this first Desktop folder it does indeed contain my dogs and my cats right applications doesn't contain anything right now so next thing maybe I'll work on is maybe adding some indentation to really show like the nested nature of this code so it's kind of hard to visually see without like the border that dogs and cats are inside of my desktop maybe for the children I'll indent them some so what I'll do is I'll kind of wrap my children in a div and what I'll do is give that div some style so maybe I'll kind of copy this pattern and for my children every folder will indent its children with some margin let's say we all say like margin left and I'll give it like that's a good number you're like 17 pixels on the Left see how that looks all right so now it's more evident that hey dogs and cats are inside of my desktop I think at this point probably clear enough for me to actually drop this weird pink border all right so this concept of having a react component or rendering multiple children is actually a really powerful pattern because what lets us do is use components in ways we can like design and compose them together to establish them pretty complex logic right my folder in my file individually may have different an individual logic but when I compose them together in this way just by looking at this chunk of code from five through eight you can really understand what's happening right I have a folder that contains two files so let's extend this further right would be really cool as if I had other folders inside of my desktop so let's go ahead and do that so I'll create a another folder over here and maybe I'll call this one music well populate it with some other things right so let me give it some other files so I'll give it some songs we'll give it all-star classic karaoke song and just for fun also throughout another file may we see our new music folder inside of our desktop so now that I have this cool structure to play around with what I want to work on now is giving my folders the ability to open and close right how can we accomplish that behavior so looking at my folder component let me take out this console dot log we don't need that anymore that was just for debugging so what does it mean for a folder to be open and closed right well when a folder is open it should show everything that is inside of it when a folder is closed it should not show anything inside of it right a closed fold it really just shows up as its folder name right and so if I think about props dot children right props out children actually represents all of the contents of that folder right so if I look at my desktop props dot children is this entire chunk right it's a music folder all of its contents as well as the dogs and cats right so what I can do is give my folders the ability to conditionally render their children right when the folder is open I'm gonna show the children when the folder is closed I won't show the children maybe this stub out this feature what I'll do to start is maybe just give my folders that additional prompt right so up here I'll give this a prop of like maybe is open just play around with it and I'll pass in an actual boolean so let me pass in let's say false this time right the rest of I want the is open prop to be be false boolean value so that means I have to use that JavaScript interpolation syntax over here using those curly braces and of course that means if I look inside of this folder it should have that additional prop right so here I have the is open a false prop for my desktop folder and from there I can use that to maybe switch off some conditional logic right so inside of line 25 right I can write any valid JavaScript over here right so I can even write an inline ternary it's a very common pattern in react so what I'll maybe say is I'll say props dot is open and if that's true then I'll render the children right so I'll render these children otherwise I'll render nothing and to render nothing what you can do is actually just use null in react right so when you render a null value it just means I don't show anything so let's see what we get now so bear in mind that is openness at the false right now so when I run this code for my desktop Ali's right I don't see any of its children but if I set this to true that means I would now see the children right so that gives me a sort of baseline for mimicking the opening closing behavior of files and folders so what I want to do before we go any further and actually make this like interactive with the user is clean up some of this code so you'll notice that if I look at my folder component right I'm referencing props a lot right so I say props dot name props that is open and props dot children so a very common react pattern or really just JavaScript pattern is just destructuring the props object so what you can say is do you structure out of props the name the is open prop and also the children prop you can take that from the props object so let's say that you're not familiar with that syntax I kind of walk through that really quick so let me open up a quick no drebbel session that we can mess around with so the syntax that i'm using here is really nothing fancy but maybe you've never seen it before let's say I had an object right so I have an object with some stuff inside so I'm like a name of Alvin cool so that's an object what you can do is actually pluck out individual key value pairs from that object as variables right so I can say things like let my name and also my job be taken from this object right now pluck out those specific key value pairs as those variable names right that's all we're doing over here that way I don't have to repeat props every time right basically just saying props that name props that is open and prompt star children now I want to work on giving the user the ability to open and close these folders just by clicking on them and so to do this I'm gonna have to refactor my code a little bit and leverage another concept in react so right now we have our open and closed controller really tied to this is open prop but if I want this boolean value to change during the runtime of my application I'm going to have to use some state here and so to start what I'll do is at the very top on an import I'm going to import something additionally from the react module so I'll put a comma and we need to do structure out of the module the u s-- state hook I'll explain what this is in a moment so what I'll do to start is down inside of my folder component I'll actually take out where I pass in the is open prop well no longer take that in as a prop so I'll remove it from over here and instead we want to make is open a piece of state right so at the tippy-top of my folder component what I'll do is I'll call this U state function that I get from the react library and what I'll do is I'll pass in some initial value right now I'll pass in false right so you state is a function let's just see what this function returns it's pretty interesting so I'll console that like this so right now I'm getting an error because I no longer have this is open variable or prop defined so let me just comment out this chunk of code now what we can just see this debugging console that log so it looks like you state returns an array right it happens to return an array of two elements and actually always returns two elements the first element of this array is going to be the exact default value that you passed in right so if I made this true I would mean that the first element is true every time over here it's actually the case that the second element of this array is a function there's going to be a very key characteristic of you state so here's what we'll do let's go ahead and save the return value of you state and what kind of D structure it as an array because I got two elements every time so what I can say is create a constant D structure out of this array right because this highlighted expression once it actually returns returns in the right I'll grab my is open piece of state as well as a function that I can use to set that variable so I'll call it set is open it's a very conventional pattern that we kind of haven't react right whenever you call you state you're going to get back a piece of state which you can name appropriately and then I'll also have a setter function for that piece of State right and so at this point of course that means now I have separately my is open variable as well as the set is open which is going to be a function take a look at that right should have two things right I have my boolean internals a function don't worry about how the function it looks over here we'll use it in a little bit so maybe you're not familiar with this array destructuring concept in JavaScript it's not particular to react it's just in general JavaScript feature so let me walk through it right now so I'll go ahead and open up my number once again I'll create a quick array so we'll just say array equals some elements 1 2 3 what I can do is unpack this array into individual variables we call it D structure in the array so I can say let let's say a comma B equals the array that means the first element is going to be it saved an a and the second elements gonna be saved in B and I kind of forego the third element so we're just using that same behavior inside of our react code where the first element is a boolean value in this case true and the second element is a function all right so now that I have at least the plain old boolean value I can use that as the basis of operating my conditional render of my children so I can bring this code back in so right now is open it's going to default to true which means looks like my folders are open right the desktop is open and music is open it also looks like applications is open but I actually don't have any content inside of it there's no children over there so what's the point of this set is open function well I can use it to change the value of the is open state right when I change the state of a component it will actually rerender or redraw the components on the screen with a potential change right I think for now well implement is when the user clicks on like the name of the folder then we'll toggle like the open and close of the actual folder contents right so around this like name a value that have interpolated let me go ahead and put it around the span now I can actually make it kind of clickable so I'll move this inside so span is just a regular HTML tag right so react is really awesome because it affords you some additional props you can pass into some HTML tags right so for this span I can give it an on-click notice how I'm capitalizing the scene this this is a reserved prop inside of react I can give it a value and it's gonna basically mean that click Handler on this span right so events gonna fire whenever someone clicks on in this span what I need to do is actually pass in a function so above I think what I'll do is I'll create a kind of function separately so all I say it Const I'll just call it handle click this is also a pretty common pattern in react where you have like an on click handler you're gonna have a handle click and what I'll do is for now won't do much maybe I'll just console that log click right now we can see when this event triggers so I'll say clicked what I'll do is I'll pass in this entire function as a prop to on click right so I'll say handle click over here so a really important thing to note I need to make sure that I pass in actual function into this on clicked right so handle click I'm not calling in line rice if I called on click over here that would mean that I'm actually passing the return value of this function which is not going to be useful right I want to pass in the actual function itself so I can just write it like this cool so I have my my console open and let me go ahead and click on some of these folder names right so click on desktop right there I have my event firing it's actually going to run this function or this callback if you're familiar with some JavaScript whenever we click on any of these folder names that's pretty useful of course inside of this function now I want to implement some logic that will actually set the open so what I'll do is and call set is open so when I call the set is open function I can pass in a new value that I want to be for the is open slice of state now it's very obvious why you state returns an array of things right the two elements are very coupled because I have a value and also a function I can use to change that value and so it looks like by default my folders are going to be open right because I have true over here so let's say when I click it we set it to false which would mean just closing a new folder so let's save that and now if I hop into my browser and if I click on a folder like music it will indeed close and I can also close the desktop but from that point it's gonna stay closed so I click on it again right I'm just gonna keep setting it to false but it's already false so I actually want this to act like a switch where I kind of flip-flop between true and false so here's a very common programming pattern right so I can do instead is always set is open to its opposite right so if it's currently true than when set to false if it's currently false I'm going to set it to true so that's as simple as saying set as open to not is open right don't be fooled here let's say at the very start my folder is open so note is open is true when someone clicks this function is going to run which means that we're going to have this value as not true which really just means false I'd be setting is open to false right so let me save this code and now let's do some clicking around right so I'll click on music click on it again I can actually open and close these folders pretty neat stuff so this is a really key pattern in react where we have an event handler that we pass in as a function RAM please make sure that you do pass in a function there are a few other ways you may see this pattern written right so since I have a very simple function it only does one thing what I actually do is drop the braces and just write it all on a single line of course that still works oh I can still open and close these folders and sometimes you may even see people kind of skipping a V additional name now for the function you could pass in the function definition right in line do be sure to actually put this within curly braces right notice how these are orange because I need to evaluate this as JavaScript and actually have a function right so this is another fine way to pass in a function into a handler like an on-click right so I think for mine I'm actually gonna keep it as a separate variable just kind of like it that's a separate name and it comes to these different handlers like unclick there are a lot of other ones and they all start with on there's also like an on hover which you know you can probably gather what it does whenever you hover over an element it is going to trigger the handler so just working in some terminology here we're using you state state is like information in your reactant ponent that when you change it it will trigger a rerender right so it's gonna redraw the component we also say that you state is a react hug so there are many hooks in react they're all functions that start with the prefix use and really the common behavior is that when these functions are called inside of your component potentially down the line it could trigger a rerender of your component right so for the sake of my you state hook whenever someone clicks now it's gonna cause a rerender of my component because the is open value has changed all right so let's keep it rolling right now I want to work on making this a little more aesthetic so I'll do is work in some CSS I'm not gonna write too much CSS in this moment robably just use like a pre-baked CSS library one of my most favorite ones is semantic UI so we'll just use this quick library we can just pop it in so what I'll do is I'll look for a semantic UI CDN so here I googled semantic UI CDN I see the end is just a quick way that I can quickly drop in some library code into my project if you've done some JavaScript development before you probably already have used some CDN so click on this first link and once I'm on the semantic UI page I want to happen to CSS cuz we just want some CSS a lot of things here I'll just choose this very last one semantic not CSS I'll go ahead and copy the link tag doesn't really matter which kind of link tag you copy what I want to do is hop into my index.html just drop in this link tag and I'll let you give me access to this CSS file so I'll save that like I might react that notice I immediately get some initial style X I have some better font over here what we'll do is start working in some maybe icons to represent our folders and files so back inside of my app I'll start to reorganize things over here if we hop around like the semantic UI library I'll look for some icons I can use I already have some chosen and so there are a lot of icons here I'll just look for a nice folder icon so I think this folder looks pretty neat what I'll do is I'll right-click and I'll inspect the page and what I can do is just look at that particular element so where was that folder here it was click on that and it looks like to actually get that icon I just give it a class of folder icon all right so what I'll do is I'll actually copy that so maybe inside of my align 24 maybe well I'll do is move this name outside of the span and I'll only have the folder open if they click on the actual icon right so between the span what I'll do is I'll create my icon I'll give it this particular CSS class right so it looks like I'd say class of folder icon and so this is actually a really important thing kind of gotcha when it comes to react so if you're familiar with HTML and CSS you know that class Italy just a standard thing we use to reference a class from an external CSS file so let me save this code I go to my react app now I'm getting an error it says warning invalid property class did you mean class name so in react whenever you want to apply a CSS class you actually can't just use class you actually have to say class name and the reason is class is actually reserved for something else in react so that's a small change we'll have to make looks like we got rid of the error in that way and I also see my nice little folder icon over here so what I'll do is that maybe I'll make this blue so it's as simple as saying blue folder icon if you're using semantic UI just pretty sick what I'll also want to do is maybe implement a little arrow next to the folder so what I'll do is I'll maybe just copy this little bit I'll break a line and not only will I have my folder icon in the span but also put like an arrow so that would be a carrot nice so I'll give me a carrot actually I said give it a direction I think so I'll say carrot right so there I have a right pointing arrow it looks like I think would be pretty neat if we actually change the direction of this arrow depending on whether or not the folder is opened or closed right so that's a carrot right and maybe when it's open should have been like I care it down that would've been cool right and so let me actually show you how you can implement something like a conditional changing CSS based on some state right so I know I need to leverage this is open value so it's really simple what I can do is maybe up here I can write a ternary so I'll say cons direction and I'll say ternary we're dependent on whether or not is open it's true now when it's true then I want my arrow I think to be down right kind of like pointing to all of the contents below it and if is open is false that I want it to point to the right so what I have right now is really just a very well it contains some string of downer right and I can use that inside of this string that I pass into class name right so the first thing I like to do is actually do some interpolation here right because right now passing in a string and if I want to evaluate a variable name you know I need to use those curly braces right so I'll do that over here and I'll also throw down some JavaScript string interpolation so instead of using double quotes I'll use backticks and now within this string what I can do is use a dollar sign and some more curly braces and I'm gonna write some value I want to evaluate right so here I'll right direction again this this particular thing of using like backticks that's not a react feature that's just how we can do string interpolation in JavaScript so let me save that so right now my folders start open which means that my arrows begin pointing down but when I close a folder right they point to that right and I keep flipping back and forth which is pretty cool right so I'm really just using this is open value or this is open slice of state again and again to kind of have my code or the way it looks kind of react to what's happening in my code all right so it looks like my file tree is really starting to take shape well work on now is adding some icons for my different files and I think what we'll do is we'll render different icons append all want to of files we have hourly what the file name is right so mp4s are like audio files some people have like an audio icon and JPEGs and PNG czar images maybe I'll show an image icon let's do that I know that when I actually have my files they all taking a prop of the name where we have like the extension of the file let's it out over here so I'll wants a reference that I can really focus my attention now just on this small file component right so we'll make this a little larger so for now I don't think we need to add any state to the file component we just want to reference these props and what I want to do just look at the thing after the dot in the props dot name right so I think what I can do is I'll take the props not name maybe I'll start by destructuring things over here so I'll say const name equals props just like we did before in our folder component I can just a reference name now so put a reference it twice over and what I can say is alright for the name let's say I took that string and I split it and so when I do it name dot split I'll split it on a dot that would separate everything before the dot from everything after the dot right so give me array of two things I want a reference in the second element so that'd be index one and I'll save that as like my type of extension so it's like Const I'll say file extension so file extension would be a string like mp4 jpg or PNG let me save this code maybe we'll actually step through that pattern a little bit so jumping into my node rep let's say we had a string and it was all started mp4 now that I have the string variable I can do string dot splits of course if I split it on a dot I'm gonna get an array of everything around those dots so I have separated basically all-star from the mp4 and here I'm just referencing the second element of that array which of course is just the mp4 cool and what I can do is now we use that file extension to kind of switch off some logic for what icon I want to render right so I think what I'll do is I'll use like an object kind of map the file extension to the type of icon I want so let me create I'll say we'll say file icons and I'll make this an object and so I'll have the keys be these file extensions look at my example looks like I need something for mp4s also needs something for JPEGs and also pngs right alright so now that I have these keys well I'll do is I'll just choose some strings are present icons from semantic UI so I think they're pretty straight for everything in this library so let me look for I don't know headphones be cool and for JPEG that's like an image so I look for any like image looking stuff I'll just say file image and maybe for PNG I'll use the file image outline alright so now that I have an object to quickly determine what I concentrate render depending on what kind of files that we have I'll just use that inside of the stuff that I returned over here so I think what I'll do is I'll copy this icon from before since we already have some value interpolated inside of it and let me clean this up so we still need an icon and instead of Direction well go into the file icons object and key into it using our file extension alright so we're just using the key to kind of unlock value and of course I don't need to say carrot here anymore cool so let's save that see how things look it looks like things aren't working because I need a space over here something out of space nice it looks a lot better so here I have my different icons dependent on whether or not I have like mp4 JPEG or PNG alright programmers I think this is a good stopping point for this part of the tutorial and the next one will continue working on some more features for our tree viewer app

Channel: Alvin the Programmer

Views: 33,270

Rating: 4.9631181 out of 5

Keywords: javascript, react, react tutorial, alvin zablan, app academy, learn react, props, state, hooks, react hooks, component, component lifecycle, functional component, reactdom, create react app, zablan, react basics, beginner react, mvc, useState, coding bootcamp, redux

Id: fQ1OA9Wyf2U

Length: 43min 15sec (2595 seconds)

Published: Wed Jun 17 2020