Chào mừng bạn đến với TUTUAPP

Creating A React Component WITHOUT React Duration

hey i’m andrew and i’m the host of devtips today we’re hopping in to react but we’re not getting straight into the two-part series that i really wanted to this video is geared towards absolute beginners people who maybe don’t know a ton of html and css and are just hopping in to react because that’s what everyone else is doing right now so this video here is going to kind of be a breakdown of the javascript side and then injecting html and then converting that into a component and just kind of explaining that process overall in as easy terms as i can i work in react full-time i’m a software engineer in telecommunications so let me know if i don’t break it down enough and i can even go in a further more granulated level on medium for the post that i’ll write with this video now last week i did a poll on twitter probably maybe the week before kind of in between weeks on the weekend i asked do people care about seeing my face or or any host’s face on a video and about 85-90 ish percent of people said no for this video and for the series my face isn’t going to be on the tutorial parts of those videos of course i’ll still come back full screen like this and talk to the camera which is still really difficult for me i’ve upgraded my camera white balance settings it’s probably still not perfect unfortunately my background is slightly yellow but i’m not allowed to change those based on where i live in those rules so i’m kind of just making do with what i can i’ve also upgraded my microphone to an audio technica at2020 final thing i’ve done is i’ve i’ve got a brand new computer so uh i’ve switched from a mac to a pc i use a pc in my profession so i’m very comfortable working in get bash instead of what i prefer which is high term too or even terminal but that’s all right for these purposes in the last video a few people noticed and myself included that my beard maybe wasn’t as kept as it should have been and that’s partly fair i saw the entire time i edited uh totally fair to say in the comments and i totally respect you saying that in a very kind way i do have a bit of a double chin here and so i’m trying to do the best i can i’m working on losing that weight and that only makes my beard look better makes it easier for me to continue to procrastinate and not shave i’m going to stop rambling i think i do that a lot especially when i’m comfortable talking to the camera now so i’m going to hop off we’re going to move into the video and please let me know what you think in the comments let me know if this video looks better than the last one leave some feedback hop in the discord i have all the links down in the description i have the post in my medium somewhere up here i haven’t figured out which finger needs to go up into the corner for the card and and that card will have my latest medium post where i’m explaining everything i’m doing here explaining how to install the files that are on github and a few other things like that and kind of also introducing the series i’m working with on react so i’ve started a project in vs code i’m calling my folder how to react and inside of it i have an index.html file and a main.js file and these are going to serve as the building blocks for this video on how to do react without react so if you’re brand new to react then the first question you’re definitely going to be asking is what is react and and from it’s simply it’s a javascript library for building user interfaces the next question you might ask is what is a javascript library because that term kind of gets thrown around a lot and and really a library is just a collection of functions that are reusable across a project and you can import those into the project that you’re working with in this case we’re importing it with the with node so there’s a few things that i see a lot of the times especially in discord communities and and just in general on comments on youtube videos and that is people who are new to programming and are skipping the basics of web development on the front end and going straight to react and so the things that i think are really important for people to know before they go into react are at least a basic understanding of html css javascript and then within javascript node.js node.js really comes in handy for understanding the npmi command or npm install for installing packages and starting a server uh through the node command or if you already have experience with something like express or next then then you would you’re definitely ready for a react and in fact a lot of people uh sometimes transition from react to a next.js environment depending on deployment methods but we’re not getting into that we’re kind of keeping this simple uh for html it’s really a good idea to have a basic understanding of how an html tag works and and how you do tags inside for instance inside of here i have the main html tag and inside i have a head and a body tag and those are inside of here even though the vs code shortcut doesn’t do that but understanding a basic hierarchy for that really comes in handy the next thing for css having having just a basic simple understanding of css and properties like changing color and font size and background color understanding those is really helpful and especially understanding how to do that for inline css when you’re working on a quick react application or you’re trying to fix things on the run understanding how to do inline css even though it is going to be slightly different how you do it and react it the gist is still the same so outside of node but within javascript there’s a few things that i think and these are all my beliefs someone else might have different ideas people down in the comments could have different ideas but but this is my belief for javascript i think it’s really important to have just kind of the general basics so understanding how to log stuff to the console the difference between let and const and why you’re not really using var anymore uh how to work with the dom so like appending children which we’re going to do here and then kind of a more deeper part of nodes uh and by nodes i mean like creating an element appending the child removing the child so within the node doing a fragment and and fragments are really useful and they’re kind of the recommended way to append a lot of children to a specific item and that’s kind of what you’re doing in react the entire time with components so in this video you’ll kind of see how that’s done from a purely vanilla javascript view and then beyond dom uh having an understanding of uh functions and promises really come in handy uh promises especially when you start working with with like the fetch api or axios or anything like that where you’re relying on a data call before you’re returning something else and you’re still able to catch an error and escape that finally a nice to know but not required would be kind of using es6 so arrow functions and object and array destructuring especially when you’re using functional components and you’re importing use state it’s really nice to understand destructuring and not only destructuring at the base level of the object but also knowing how to pinpoint something maybe three objects deep inside of an object and destructuring that particular item and then also just spreading uh this red operator the three dots those those things as i mentioned in the intro i’m going to have all the resources for these things down in the description as well on my medium post where i’m going to do a pretty long writing i think on this it’s going to inscri it’s going to include the kind of a script sort of thing that i’m kind of going along that i’ve been working on uh and then also a different uh more involved project file that relates to what we’re doing here but just kind of expanded and additional thoughts and stuff like that so one of the first tutorials that people do on react is is just a basic counter and we’re going to do that but in javascript and in normal javascript it’s super easy it’s a few lines of code it’s super simple but in here we’re really going to be kind of basing it off of rendering a component off of the root element here and this is the most basic easy example of how to print hello world on there i’m going to link the actual github repository for react and specifically link the render function because it’s pretty cool to look at and it’s not actually too complicated to figure out how it’s handling that but really this is just rendering html at this spot here and i’ll show you how that’s done in vanilla.js so here in uh vs code i have the basic file created uh and for my plugins i’m using the go lives or the live server uh which is down here which is running on my local host port 5500 as you can see i have hello world and i will pump that up just a little bit so in inside of here you can see we’re getting the element by the root and so what that is over here is it’s a div with an id of root that’s how that is and then from there it’s creating children off of this and components like these and it is appending those to this item here one thing we will need and this is something that when you’re compiling your react code for a production environment this is added cut that we do need to add a script tag and it’s going to be a special type of script tag that allows us to potentially import components such as these of course not these because we’re using vanilla javascript and that tag requires a type of module type module and that’s supported nowadays by every major browser of course there could be some issues with ie7 or something like that but generally at that point you also have a no script like that and it would say like please enable javascript to use this this website or something like that just just a warning and there’s nothing here because we even we have javascript so now we’re going to add in the script type equals module and and really what this lets us do is in react when you’re importing different modules there’s a specific way you do that and so adding type equals module that’s what you are now allowed to do with this attribute and then the source will be coming back here the source will be main.js except i need to make a folder called js and put main in there so that i can keep everything in there and so it’ll be js main.js and again if you have a basic understanding of html css and javascript everything except this little part right here should be very obvious and very simple if you do not understand what’s going on here then i’m going to link some additional resources that have been done in the past on the deaf tips channel probably by travis uh about some basics on html so from here we’re going to go into main.js which is where our component that we build is going to be create or it’s going to be instantiated which means that we’re going to call that function basically so as i said it’s going to be kind of a counter thing so now we need a counter.js file counter.js and then inside of counter.js this is where we’re going to be exporting the function that we’d like to use as our component and coming over here to the react documents um what you basically have is you’re defining your app your app and then you’re using that and since this is the same file this doesn’t need to be exported but when it’s in a different file you have to either export it as the default component export or not and that the way you do that determines how you then import that file in this case on main.js so now there’s a general very simple slight understanding of a component and as i said how you use this component in a different file which i will show you in just a second these the two differences between just exporting it and exporting it as a default we’re going to create the first one so it’s going to be export function counter component like that and then for now we don’t actually really need to do anything except we are just for displaying something we’re going to console.log of hello this works and i’m going to use semicolons you don’t really need to since you’re already working with modules uh in terms of the script import so we’ll come back here i’m going to open up the console log just so that it’s kind of obvious what we’re doing you can see we have the root here and we have the no script which you don’t see since we have javascript enabled on this project into main.js which is the file that is right here this is where we can import the component we created on counter.js and we only need to do this one time we’ll be in this file the entire time so we’re going to import and and this is where it’s difficult different so if you did a default all you’d have to do is do counter component from and you have to do dot slash which means same directory and then you do counter and it’s only going to say counter but you do need to do js in react you do not and this technically works however it’s going to fail because that is not the actual this is not the default when it’s the default you do not need to wrap it in curly braces but when it’s not you you do so you just do that and then now you’ve included it and then now it’s all and now all you have to do is instantiate the component so we’ll do counter component because it is a function and then now it’s being used and we can go over to the console log and let me make that bigger too you’ll see oh hello this works so now we’ve created our component we’ve imported the component on the index.html file we are using the script tag to include main.js into here which means we now have access to this item here which relates again to this right here and we can actually do this relatively easy now so coming into the counter just for uh the the basic purposes here uh we’re going to const root and i’m naming this because of because of this item here const route equals document dot get element by id and then root now we have access to that which means we can do root dot inner html equals and i’m doing backticks so that i can inject any any javascript inside of here so this will be h1 hello world and then we’ll save that and then we’ll so now that we’ve created this and we’ve added inner html this is now showing hello world which is exactly what this would show if you had created the react app of course when you create it they do have some of their own fonts so it doesn’t look bare like this so inside of react we use something called a fragment lot and a fragment is really it gets compiled down into a div tag in html and what components require are that if you have a lot of different divs they all need to be wrapped inside of one can one div and then everything else can go inside so if you have a flex box in here and you have things that are you know kind of listed it needs to have a wrapper around everything into one otherwise it’s going to throw errors in the console and not render but in the next video we’ll go through all those things and it should be pretty simple at that point for me kind of as just a general practice i always like to return root um and that that won’t change anything but uh for this particular project it is helpful uh so moving on to the actual little counter button um the first thing we’re going to do is we need to create a component call or a variable called counter so for this i like to use let and that’s just because i like to potentially change it down the line i don’t really like to do like counter plus fuss for plus plus four things later on i always like to do counter equals counter plus one and that’s probably primarily because i work in a wide array of languages and some allow the plus plus and some don’t but they generally always allow counter equals counter plus one and so for my code consistency that’s how i prefer to do that so again we’re going to create counter and set to zero the next thing we’re going to do we just talked about fragments so in vanilla javascript we can create a document fragment which is basically what all of the nodes or you know div elements html and other html elements are getting attached to so we’re going to create that as const fragment equals document dot create document fragment that’s just a function and now we have that fragment and then this fragment we’ve created down here we’re going to append that fragment as a child to the root and so what’s that what that’s doing is we have inside of here so we have this right here and then anything inside of it is considered a child and so um as you can see this right here this is a child of root so anything that we attach to the fragment gets attached to the root as a child element and it’s generally best practice nowadays as i said earlier to do this as a fragment instead of a long list of appending uh children which you do still kind of do but you’re appending it to the fragment which has additional properties for looping and different things like that so it’s just kind of what people prefer as a slightly cleaned up method so the next thing on the counter is we need a button and we’re going to say const button equals document dot dot create element and that’s going to be button and what that creates is button and so we need to add a few attribute we need to add an id attribute to it and we also need to add text to this attribute so we need to add an id to this button and we also need to add text to it as well so you cannot chain on additional items on the create element so you just come down here and do button dot set attribute and then this takes in two values so you do the value the attribute itself so in this case an id and then the value for that attribute so in this case button counter and then after that we’re going to set the inner html of that to counter now we haven’t attached this button child to the fragment so that’s why it’s not showing up yet but we’re going to do that here pretty quickly in fact right now so down here at the very bottom i like to i try to keep it as organized as possible creating my um my variables up here my functions below them and then anything else that just needs to get appended or returned at the very bottom because anything you put underneath here won’t run anyway unless you wrap this inside of a if conditional then you have one more chance for a return based on how many conditionals you have of course so the next thing that we need is the text for the counter and and so basically the way this is working is you click the button and text below it shows up to go from zero one two three four you know counting up so now we need to create that element as well because we can’t just go into index.html and add it because that’s not what you do in react so in here we’re going to do a cons current count which is document dot create element and that’s going to be a div and in this particular tutorial i’m not worried about semantic html but down the line in a react application and in a playlist that i’m working on right now that will become important as always i like to save just kind of make sure i don’t have any random errors if i do that’s totally fine nothing here going back to elements again we only have this because that’s the only thing that we have appended to the fragment so the current count needs a few things so first we’re going to set the attribute with an id of lm counter which means this is when you see lm that means element so element counter and then in this case we are not going to do what we did here and set a set to text we’re going to do that separately so the next thing that we need is we need a way to reset the count so we’re so we need another element for that as well and that’s going to be const reset button equals document dot create element and a button again and again we need to set an attribute for that with an id so reset button dot set attribute id and that’s going to be count reset if you’ve noticed by now none of my id is repeat and that’s best practice for an id you never repeat it for a class but for a class you can repeat the name so that’s why these are all different since this is a button we can set the inner html of it because in this case it’s not going to change for what we’re doing and we’re just going to say reset count and again nothing has been attached to this fragment yet which is why over here you don’t see any of this code showing up and just for cleanliness i’m going to add some comments now that i’ve kind of cleaned up the document a little bit uh added comments to everything uh now we’re going to do a a few small functions and then some event listeners which uh if you’re coming from javascript you would know that the event listener can listen to a click it can listen to the mouse over mouse leave and a lot of other things so the first one we’re going to do is for displaying the count number and then react when you when you make a change and the component that you’re using senses that you’ve made that change it automatically refreshes that component with the updated code and so in this case we’re sort of simulating that and i’m not doing the the full reverse engineered way of doing that which i’m more than happy to work on a video for that but for this case it’s just going to be a function that we’re calling that allows us to update the count so we’re knowing i’m going to use in this case i’m going to use an arrow function which again is different than here but it’s the same thing as just a different syntax so const so const current count display equals count and count is going to be a parameter that relates to the counter so count arrow function which is the same thing as function current count display that it’s the same thing we’re just using an arrow function this allows us if we only have one thing which we do technically have one thing we don’t need to explicitly say a return we can just say the value that’s being returned from here in this case for cleanliness i am using a return on the next line so again open up the curly braces and then we’re going to return current count which is the div we created and we’re going to set the inner html to backticks and we’re going to do span style and this is where having inline css comes in handy we’re going to color red and then we’re going to say counter and since we’re using backticks we can bring in some javascript into this string and we can say count which is this parameter here and then that is all we need for this particular function and when i mentioned the whole return thing all you have to do is delete that and delete that and it’s the same exact thing except in this case for cleanliness i’m doing it this way and again nothing’s been attached so you only see this in fact we can remove that so in fact we can just remove this and that’ll be totally fine uh just to keep things kind of clean and now you see there’s nothing attached to that so the next function that we’re going to write is going to be slightly more complicated this is going to be the reset and for this i am doing a check if count is greater than 10 because because i can and because this kind of shows you how we are adding on a component based on a condition and then if the condition is not met then it removes that component from the document so we’re going to create a function called reset counter which takes count as a parameter again so the first thing we’re going to do is check if count is greater than 10. so if count is greater than 10. we’re going to append that element to the body uh and in this case the when i say body i mean the root uh which is this which then relates to this so root dot append and that’s going to be the reset button else this is where we have to check if the reset button is found on the body anywhere and if it is then we need to remove that child from the body of the of the object just to clarify so if document dot body dot contains this takes in one parameter and we’re going to be looking for the id of this reset button so document dot get element by id and i’m going to format that so it’s easier to read and this is going to be count reset which is what we set the attribute to be up here and what this dot contains returns is a boolean so a true or false and so if it’s true which is this part right here which means that it has been found uh first to confirm that i am doing it correctly i’m just going to do i can just do false but i like to do it as a string so this is this dot contains is a boolean so if it’s true and it has been found then we need to remove it because count is under 10. so we’re going to do a document.body.remove child reset button and again there should be no errors in the console and there’s also nothing we also haven’t appended anything to the root so this is why this is empty i’m trying to really drill out in that this component doesn’t actually have anything attached to it by way of html or anything like that so there’s no reason to for it to be displayed okay so to get something to show up we’re going to append the initial button and the count text to the fragment so we do fragment dot append child button and then we do fragment dot append child current count and we hit save and now we have the counter right here and current count as you remember we did not do an inner htm inner html on there and that is being handled inside of these functions which we need to now add event listeners to handle that so the first event listener we’re going to be working on is just the counter we’re going to do the reset one next so we’re doing a document dot add event listener this is going to be a click event and then we need to pass the actual event that we’re doing as a parameter and this callback function which is right here and i’ll just pass an event which again es6 which is really nice to to know for arrow function you just do event that and it’s the same thing so what we need to do is this this is kind of where it’s difficult because normally we don’t need to do this particular check but we’re doing a click event listener for something that potentially does not exist in inside of html so we need to check if is true and then double ampersand which is just an and so if this is true and the next thing is true then the entire statement is true and then we’re doing event dot target dot id which is the id of the click that we’re listening to and that’s going to be checking if it is button counter which is this button right here and if that’s true first we’re going to console.log count and then the counter that we created in the very beginning we’re going to increase it by one and you can just do that but again i prefer counter equals counter plus one which is a few more characters of code but for working with uh different languages and different applications it’s just easier to keep it all the same and then we need to display the current count when this is clicked so the function we created here we’re now using that so current count display and that takes a count which is counter which is being used right here and then and then we also need to instantiate reset counter and just pass and counter as that and we still need to create an event listener for the click that relates to this function but um that will be we’ll do that right now so we’re going to save and actually for now we’re going to comment this out and we’ll hit save again and now inside of here you see now there’s something attached to it we now have a button and then we have the element counter and then we can click here and as you can see it’s going up and down so now you can see over here we have the root and now we have this whole we have created a fragment that these are attached to which is why they are now attached to the root and as you can see we can click and the counter is going up and if we go over the console you can see that it’s re-rendering this particular function so now since this is greater than 10 it’d be nice to have a little button here that allows us to reset this to zero and then when you click counter again it knows that and since count since the account at that point is below zero it will then remove that button so we’re going to create the action we’re going to create the listener that allows us to do that so down here do another document dot add event listener there’s gonna be a click event so down here we’re going to do document dot add event listener there’s gonna be a click event and then we’re going to pass an event as the callback function and the same thing here we’re actually going to do the same exact thing here so saves time you just copy and paste it the only thing that you need to change is the id you’re looking for which in this case is count reset which is up here we set the attribute to count reset and then inside of here we’re going to remove all this and we don’t need that either inside of here we’re going to do counter equals 0 and then the current count dot in our html equals count reset and this is just a message saying that we’ve reset the count and then all we need to do is uncomment this we hit save and then again you can see the root and we have two items attached to the root we hit counter and then once it goes to 11 now it’s added a new item to the root which is reset count which then we click it and that changes the text and then we click counter again oh oh i didn’t expect that let’s see what’s going on here allow me to fix my mistake so we ran into an issue and the issue is actually kind of funny so we did it correctly we just used the wrong attribute and so up here in the reset counter we originally had something called removed child which is the opposite of an impending child but we still ran into the issue where this wasn’t particularly a part of root but we are trying to get rid of it on root so just draw an error so dot remove does the same thing but it doesn’t but it’s removing it from the correct node so now when we click counter and we go up now we have that we click reset counter and then it hides it and if we come over here you’ll see that there’s only two things here and this is just showing the text that we did here so we click click click click and now it has this we hit reset count and then as soon as you go clear you can see it’s been removed and again all this relates to this right here which components this whole component here and these components here they all go to to root so this is kind of a a basics of how react works with javascript and displaying the code and applying so this is kind of how react takes a element that you create in javascript and then appends it to the fragment and then returns that to you on your interface uh and then it re-renders every time you make a change here which is what is happening in the console every time that goes up that is making a change and this isn’t exactly a component per se in react because it’s just a normal javascript component but we have defined that we have imported in here and then everything is just coming into this root and when you create your react project for the first time from a from a gist this right here is what your code will look like it may not include that but you will see this item and this item and that’s it and then you’ll be creating your components that are appending those children to the root and then that shows up here so that kind of wraps it up for this video again i didn’t have my camera on this time and i actually ran into this weird little issue which was unique um please let me know if this was helpful in understanding the javascript side of react uh specifically the side that is compiled or what you might see in a build file and if it helps you please let let me know if it doesn’t i’d be more than happy to try to revisit it maybe on a deeper level perhaps even a video where we build a react application and then build the same application using just html css and javascript i think that’d be a lot of fun but yeah let me know in the comments like it if you liked it uh dislike it if you did not like it hopefully there’s some feedback attached to that um and as always subscribe and we’ll see you soon keep on hacking [Music] do you

Leave a Reply

Your email address will not be published. Required fields are marked *