welcome guys welcome again to Mar deps this
is um second project in doing react this is a to-do test that I have an application here
running uh I build this using react and uh let me show you what the application does so this
is task that I got to do so let me for example today one of my test will be coding coding in
uh JavaScript uh so I can add the task uh I can add more multiple tasks not just one I can add a
for example um creating I can put down creating a tutorial tutorial I can do th
at I can uh let
me see let me put up another one uh you see let me put down cleaning my computer I can do
that uh I can be put down of course you need to work out stay in shape I can do that task
uh for example let's let's say I want to work out workout in and cooking after I can update
it uh let me see I can always delete it see I can do that perfect so again guys so this is
going to be the tutorial simple easy uh I'll be sharing the code on the bottom of the video
don't forget to share i
t like subscribe leave a comment on the bottom and I'll start opening
the um actually let's create a project first if um if you guys haven't watched my my video
here I'm going to use I'm going to use uh VI right here to create the react project
if you you can watch the the how I set it up so that's what we're going to do we're
going to create a project and let's get on it all right guys so I do have a project here
already open ready to go uh first thing I want to go ahead and do is uh I wan
t to go ahead
and delete the the role player uh I want to go ahead and delete that code the one they give
you from uh from the uh template see right now it's all gone and also um I want to show you
guys the um I have a running on Port 3000 how I accomplished that I went to uh VI config JS
and I added this here you can actually add up here it says server and change it to 4 3000
and uh so here pretty much we going to leave this I'm going go ahead and close this out I'm go
ahead uh we're goin
g to add up on CSS after and here is what we're going to be working on over
here so we're going to first thing I want to go ahead and do is I going to go ahead and create a
folder here and this folder is going to be called components components like that and then here
inside the components we are going to create uh a couple files and we're going to use jsx um
so the first one I want to go ahead and create is this one is going to be too JX JavaScript
extension right here like that so I'm goi
ng create that one I'm going to create another one
is going to be called um to do form like that and let me see let me see have that I have that
okay so then I'm going to go ahead and create a let's name this one because everything is Tod
do so I'm going to go ahead and name this one to do proper like that and this is going to be
jsx like that so inside there we can go ahead and do type in r a fc you can actually pick
different ones see so the one I'm picking is that one so here I'm just go
ing to put down
this is I'm going to put down two does here like that and I'm going to go ahead and do
the same thing for this one and I'm GNA do the same thing for make sure I get everything yeah
right here RF like that so and then uh inside the appjs here is over here I going to go ahead
and import uh let's actually create a dip here and this one is give I did notice in
react you you can uh you have to use class name uh okay you can't just use class you
have to name class name and here I
want to go ahead and do the import too and this
is going to be called to-do wrapper like that so okay uh let's see what we get okay
so let's put down me put down this is the wrapper so if we go back to the screen let
me go back over here yeah it says this is the wrapper cool so I'm going go ahead and go
back over here so the first one I want to start working on I'm going to go ahead and start
working on the form which is over here and we're going to actually change this instead
of being a
div I want to do form and this here let's give it a class name we're going
to use that we're going to add up this style later all right all right all right so what
do we got here we got I'm going to name this one to do to do form like that um actually
let's make this one together like that and we in here we're going to do a input and it's
going to be a type text and let's give it a class name so that way we can style later on
this one I'm going to call it too to-do Dash input and um here w
hat we're going to do is
let's do placeholder and let's type it in here let's put down enter your task whatever task
you want to do and let's put a button here the button is going to have let's name it at Tas oh
messed up here the buttons got to be inside the form inside like that and here let me see the but
let's give it a class name and let's uh let's give it a class of to-do button so we can install we
can uh put a style on it and let's give it a type and this one let's do type uh type s
ubmit so we
can submit this and here um okay so we have that let's go ahead and import this so let's go ahead
and import it let's bring it over bring it all the way over here where it says to do WP so let's
go ahead and uh import that and first thing I want to go ahead and do is um let's go ahead and
give this div let's give it a class name and here Let's do let's call this one to do wrapper and
let's give it a H1 up here and this one is going to be let's do too task and let's just name it
you
can name it whatever you want and here just below here we're going to go ahead import the to-do form
to-do form like that okay and we are going to be able let's see let's go open up the application
and see what do we see here all right so see we able to see the components so basically react is
just basically components all right so now that we're able to import that into the uh to do w we
got let's go back to here to do form and let's create a function here uh so so the over here what
we're going to do is uh let me see what we do next ah let's go ahead and use uh use stake so let's
go ahead and do constant and let's let's grab the value and whenever you declare it's kind of like
doing document create element by ID it's kind of like that so whenever you declare something here
you want to do it's like the structuring also too so you want to do set value and use State and
we're going to put that as an enti string as a default uh okay so now this uh this uh V is the
react ap
plication is complaining so because we're not using it so let me see what it's saying if
you have it says values assigned but the value is never used don't worry we are going to use you
okay so here I'm going to declare I'm going to call I'm going to call uh function here this one
I'm going to do I'm going to do handle submit okay and this one I'm going to use the arrow function
and we want to listen for an event uh here we're going to listen for an event and also we wanted by
default you w
ant to put prevent default like that okay for the form so let's go ahead and go here
and let's let's add up the for I mean the function here so we're going to use add submit so whenever
somebody submits that so we going to be able to call that handle handle submit like that so uh
what we want to do is we want to grab the value of the input so let's let's uh let's go ahead and
uh let's conso Lo this and let's grab the value in order to get the value value we want to do we want
to do value eq
uals to the value so whenever you input that and uh also we want to do here so every
time we oh forgot to grab this it's supposed to be value like that okay so then down here what I
want to do is I want to do the unchange event and and here we want to pass this is like Anonymous
function normally we used to do document G element by ID and then prevent default like used to have
a separate this one you can actually do it on the HTML which is pretty cool so it says so here what
we want to do i
s we want to graph set set we want to do set value and we want to list we want to get
e Target and we want to do the value of course so whatever we input we want to be able to grab it
all right so now uh so I want to go ahead and conso this you stay oh I haven't for some reason
it did not import let me go ahead and see if I can import that okay yeah it did import let's get rid
of that import react we don't need that so then I want to go back to the application here I'm going
to go ahead and
open my console log and I am going to see if I type in something here let's see if
it comes up uh bunch of errors let me see what I got let's see what we got [Music] uh bunch of Errors let
me see what's going on with this let me see that okay so it is working see
it's console loging whatever I am putting we're going to have a bunch of errors in the beginning
all right let me do it again oh hello yeah so we're okay so now we know the form is actually
working so we're going to go back over h
ere so so we're going to we want to go back to the form
which is the parent this is here and we're going to create the function over here and we're going
to import it to the to-do form so here what we want to do is inside there on the to-do rap we
want to go ahead and create uh let's go ahead because we're working on to-dos so we want to
do constant too and we want to do set todos and this one we're going to use again the u u State
like that and this one we're going to uh we it's going to b
e an N array and here let's go ahead
and create a function that's going to be called add toos like that and we're going to pass to do
here and we going to use the arrow function like that and here is we want to do a set todos and
we're going to go ahead and destructure these okay we're going to D structure the the to-dos
so we want to do that like that to-dos and and inside the to-dos uh what we're going to do we're
going to need an ID um I'm going to go ahead and use this Library so let me
go ahead and import
this let me go ahead and stop running running the application okay so I have re I have stopped the
application here and what I want to do is I'm going to go ahead and open this uh this package
right now it's throwing me error right now but this is here is a this is a library that I want to
go ahead and go ahead and import this I'm go ahead and install it but here you can actually check
out the whole documentation how how it does it just creates instead of having like on
e two it
actually gives you a loan number ID this is an example so it's uh it's for creating IDs like
a renon yeah so instead of be like one two it gives you like a nice big number all right so
let's go ahead and install this package so if you um like I new to uh react I'm I'm learning as
I'm going but I'm you know the way I learn is uh by making stuff so um so now you can actually see
my dependencies right there my package like what I have like what libraries I got in there so uh
let me s
ee what else I got yeah so see it's right there so we're going to install a couple more
packages but that's one of them for now so we can go ahead and work on so let me go ahead and
close uh go ahead and close um let me see close save I'm going go ahead and do that and I'm going
to go ahead and open again the uh to- do R right here like that so now in order to use that Library
we have to um we have to of course import so that way so based on the the commutation here actually
H let me see wh
ere is it at okay right here so it tells you here so in order to use it you have to
import this you have to do this so let me go ahead and copy that and me go back to the vs codee and
we go ahead and import that so we have access to that and now um now that we did that so now we
should be able to declare over here so U ID id4 like that and then we're working on on to-do so
I'm going to name this one Tas and it's equal uh it's uh to-do so then here what I want to do is
I'm going to declare t
hat when it's complete I want to by default I may set it up as a as a false
and is editing like if I want to edit I'm going declare that also as false okay so now we can go
ahead and and uh pass it so we can access it and the and inside the to-dos so inside the to-do
form I'm going to go ahead and pass add to-dos and then that way I can have access it I can have
access inside the the uh the to-do form so let me see why is oh forgot to do that it's just got
to get used to it because angular
is a little bit different okay so duu that's that declare
does that all right so now if we go back to the to-do form we should be able to D structure
right here so I to do like that so it's going to complain to um it's going to complain that we're
not using it so so then instead of having console lck you want to do you want to do add too and
we're going to uh we're want to pass the value so then after we pass the value I want to go
ahead and clear it out so we're going to make it again agai
n uh into ENT string so uh add to do
I want to make sure why still complaining why are you still complaining it says I to do oh okay
so this part here at the end of the video um it's going to complain that there's another step
that I was checking and took me a couple hours to find out uh that we will have to do to get rid
of these underline all right so anyways let's go back to the application so we have the set to
do we're going to create couple more we going to create one for uh editing o
ne for completing
and one for um to um to be able to add the task all right so let me see what should we do next
so we have that we can okay so then let's work on the the other more functions so we can add it
to it so here the next one I want to go ahead and do is I want to go ahead and create the one for
uh deleting so I'm going to do constant delete to do and this one in order to um you have to pass
an ID so this one is I'm going to use set to-dos and I'm going to grab all the to-dos and
I want to
filter I'm going use the filter and I want to pass it to-do and uh actually let's put this inside
this parenthesis uh okay so then I'm GNA use the ARA function and I'm going to use I'm going do
if it's equal to a to-do ID I'm sorry if it's not equal then I want to go ahead and delete it so let me see why is why are you complaining
todos to-dos is not defined oh because supposed to be up here supposed to be todos uh over here
it's supposed to be Todo my bad cuz we're doing to-dos a
ll right so set todos Todo Todo complete
yeah all right so it's supposed to be todos um all right so now we have that it's going to complain
like that into we don't use it all right once we use it and we pass it uh then we should be able
to the red line will go away so the next one I want to do and I want to do this one is called
com uh I'm going to call this one Tagle Tagle complete and then we're going to again use the set todos
set todos and inside there we're going to pass uh to-dos and
we want to use map and like now when
we use the map we can put that to-do and do the arrow function and then we can compare the to do
ID to an ID Okay so here we want to structure that to do and we want to do if it's complete and it's
not equal to complete we want to so we want to be able to toggle from complete to not complete so
we want to do is pass too complete if it's not complete to go complete if it's if it's completed
do go to non complete that's that's what I wanted to do all righ
t so okay so that's that's pretty
much toggle okay so we're over here what we doing is we're comparing if it's equal to whatever ID we
wanted to do to be able to toggle between complete and non-complete all right so now that we have
that um now you want to create one for uh editing so we want to do edit uh let me do this one edit
edit too and again we want to pass an ID because we want to know which one we're want to uh edit
the data all right so let me do again set to-dos and we want to do
we want to do to-dos and we want
to use the map operator and here we want to pass too and we want to once we use the
map so we want to do is um we want to do to-do ID is equals to the
ID it's similar to the one we just did for Tagle um again we want to D
structure this and we want to do is editing um it's it's if it's editing I want it to go not we want it to not edit
so we want to pass is editing and and then we at the end once you do the
destruction you want to pass the to-do but I don'
t know if you notice here like it is
using the same almost the same pattern so so it's so that's why um that's why I think uh
react is so easy like the patterns once you start figuring out the patterns on it it's
uh it becomes easier to to uh to you know to learn to react all right so here I want
to create another one it's called edit edit task and in here I want to pass the task and
also an ID okay so here I want to do again set todos and I want to pass to do and I'm going to
put put the
map and I'm going to I'm going to pass Tod do uhoh my finger got in the way all
right so then again what I want to do is uh I want to pass the to-do ID is equal to ID and
I'll go ahead and D structure this again and I want to pass the task if it's I'm going to
pass task and I'm going to put down is editing it's editing and or if it's not equal to to do
it's editing like that and that's pretty much how you do the editing that's nothing nothing
major nothing crazy all right so now that we hav
e all these functions we got to pass it
through um let me see what we got here so this is the wrapper we let's get rid of that
um so now we should be able to work on it to do all right so here I am going we want to
work in the to-do and here what I'm going to do is I'm going to use Font aome and I want
to go ahead and open that let me go look for that so we can install the packages let me
see we are going to look for um the startup kit for react right here and uh pretty much
it tells you w
hat to do here so first thing it's telling me to do is phone aome cord
to go ahead and install okay so I'm going to go ahead and install this and add up the
icon packages and also I think it's this one yeah we're going to have to install all three
of these all right so let's go ahead and do that okay so I'm copying the first one uh
I got my project stopped and I'm going go ahead and do MPN install and I don't think it
matters the um the whatever version it is on a react I know on angular I
know it does some
of the packages are they might throw it off the application so you might have to like look
for a for a different one or you might have to upgrade the angular but I I think on this
one I don't think all right so let's make sure it got installed let me see yeah so I got
right here in one of the dependencies and so I have that we so the next one we follow the
documentation here for phone aome we got to go okay so now we got to install these icons
right here so let's go ahead
and go ahead and copy that let's go ahead and do the mpm install
you're going to see a pop up over here on your inside your dependencies so so that's going to
take a bit I'll be back I'm going drink some coffee all right so I got these icons and I
think we have to install one more so let's go here and I'm go ahead this is it says react One
aome latest I'm go ahead and do that one so let me go ahead copy that snip code right here let
me go ahead and do that actually I don't want it to do th
e latest let me just go ahead and install
that one just make sure it doesn't mess it up all right so let me go ahead and do that um you can
actually check over here so all right once this in finally installed we can actually go here to
assess the to-do and I'm going to go ahead and import those packages here uh once it's finished
yeah let's go ahead and do that right now so here what I want to do is I'm going to go ahead and
import the the font awesome icons on it so because we're going to
have we're going to need those pH
awesome icons like that and then uh make sure it's spelled correctly okay for awesome icons yeah
then we're going to need uh we're going to need to import one uh I'm going to do this one it's
going to be F pen that's going to be used for uh to square that's going to be used for editing
or editing editing editing so and then the other one's going to be trash that's going to be fat
trash no not tractor uh let's look for the ones for trash okay oh this is funn
y all right so
that's the so inside here whenever you want to pass uh any functions to the child component you
you have to first uh you you will have to pass it in the parent and then you can actually access
it inside the child component that's that's uh so here what I want to do is I want to access uh
I want to access task and then the other one is going to be Tagle complete I think I called it
let me make sure it's spelled correctly toggle complete and the one we're going to need is going
to be delete to do and then the other one I think I did it was edit to do I think it was uh I'll
triple check it it's going to be like that for now but um since we're already on this on this
uh on this over here on the to-do we're going to go ahead and let's start working on that so
this one here is going to I'm going to give it a class of to-do and uh let's make sure this is
capitalized and here uh I want to pass the um I'm going to give it a class I'm sorry I'm going
to pass a paragraph
and I'm going to give it a class so all right here's where it's going to
be the the uh the task like that so and below that I'm going to put another dip here and here
what I'm going to do is it's going to be uh this is where it's going to be be the uh font awesome
that come is going to come handy so here what I want to do is font awesome and let's give it a
class name and this one is going to be for the edit editing and this is going to be the icon and
let's give it a icon this one's going
to be the the pen F pen square like that and um let's go
ahead and close it and let's going to do another one for one awesome and this is a class name for
this one is going to be called delete icon and let's give it a icon and this is going to be the
one we just did for trash like that and let's go ahead and close it all right so in order to
access that we're going to have to go to the to-do form and no not to-do form the to-do RAB
and down here we want to go ahead and pass the uh we want
to pass the to-do so we should be
able to see that all right to-do and let's go ahead let's do mpm run mpm mpm run de like that
so let's see what kind of Errors we get right now so again guys and I'm going to open it well
it's already open let me see if I have any errors all right so that's that let me do let me do do
coding challenge let me see if anything comes up no oh let's go ahead and open the console and
see what kind of Errors we get hopefully you guys having a good day you know eve
rything
about practicing it say and recognize on this browser you me render start oh start
up the name with an inspector uh to do DP to oh and the wp let me see what have
we got here to do WAP oh I see what you mean yeah I messed up with there so I imported
the wrong thing all right so that's why right let's go back let me go back over here yeah okay
so see okay so now it's showing something there all right let me see how many yeah so that's what
it was I imported the wrong thing so yeah u
m so I over here so whenever you import a component
make sure like see I had it this one uh it was see actually if you hover over it tells you
what's in there already Look test any complete yeah so cool so we have that so let me let me see
if I add up another one let me go here let me see add up another one let me do I just do cleaning
cleaning let me do that let me see what it does set todos yeah it's still not going to work all
right so we got to go back it says set to do is not durable a
t todos all right so let's go back
to my to-dos over here and then inside there uh what we got to do we got to pass the task and we
got to pass Tagle complete delete okay we got to pass all of that so so inside here um inside
here what are we okay so here uh we're going to pass a click the event and we also going
to pass so let's do the class let's do a class name and we're going to inside this
we're going to do pack back back Tex and we want to pass we want to pass task
complete complete
completed like that and F completed task complete we want to
do we want to Tagle between complet and non-completed so let's do complete
complete like that and we want to do incomplete in complete forgot the e so got
that and here what I want to do is I want to pass a click the event not and click
event like that and we're going to pass an anonymous function here and this is going
to be for the Tagle Tagle complete like that and inside the Tagle complete we want to pass
the task and we also
want to pass the idid okay task complete complete like that okay all
right so inside here we also want to be able to pass click events for uh one for editing and the
other one is going to be for uh deleting so let's do unclick event again and let's put Anonymous
function and here we want to do is pass the edit to do and inside the edit to-do we want to pass
task ID like that and we're going to need one for the trash so we can go ahead and delete it on come
on why you not helping me oh I se
e why you're not helping me because it has to be inside this font
uh font alone icon so we got to do unclick event I'm like why is PS code not helping me normally
you give me like shortcuts all right so here we want to do function and this is going to be the
delete to do and we're going to need a we're going to need a task ID again okay so that's that
complete like that so that's that's it for this one all right so we have that so then we should
be able to go to the to-do form and not not t
o do form I'm sorry to do W right here so here inside
there in order to um in order we have to pass it through this uh component here so we can access
inside that to-do so let's go ahead and do that so we can access all these edit edit edit too
and all of that so we have to pass it through the component so let's go ahead and do that so in
order to access that I want to do is uh I want to go ahead and de uh I want to go ahead and declare
to to-dos and I want to do I'm want to use the map ope
rator and I want to pass a to-do and um in know
index like that and here what I want to do is uh I'm going to go ahead and pass I want to go ahead
and pass the to-do inside there let me do the to do let's go ahead and pass it to do inside here
and inside the too let's go ahead and do let's pass the task let's make that equal to to a to
do and what else we want to pass we want to pass a key because if not it's going to complain uh
so then we also want to pass the delete to- do so we want to
do delete to-do so that way we can
actually access inside the to-do so the other one was for um tago complete and this one's going
to be called tago complete um okay let me see if you actually show him something all right so
if I add something let's see CLE uh coding let's see no I forgot to refresh this uh coding no
still not working why you're not working set to those not erable to to oh okay
let's figure out why you're not working says set to do is that um okay
to do RP let's go back ov
er here to do rap set to do oh my bad right here look at that
so I'm declaring said to do twice and we're trying to destructure the to-dos so it's supposed to be
to-dos here all right this let's go ahead and re save that and refresh let me see what happens let
me go ahead and refresh this so if I add up again coding let's see if I get anything ah okay let me
add up again let me see let me put down cleaning cleaning yeah oh it's showing multiple times task
uh Let's do let's go to do oh the r
eason why it's showing multiple because it's I forgot to change
that here supposed to be task that task like that so if we save it if we go back so if we go here
let me see if the delete it's already yes so the delete is already working so let's do um let's do
coding yes see and now let's go ahead and do um let's do um react JS practice practice practice
practice I'll practice practice practice this all right so let's go ahead and add it yeah so
it's working great uh Let's do let's do new u
h let's do JavaScript JavaScript tutorial uh no
JavaScript coding let's do that let's do coding challenge go in challenge yeah so it's working so
we can delete delete delete delete so of course we can't edit it at the moment because we haven't
created that so let's go ahead and work on that right now and then the last thing we should be
able to do is go ahead and see uh out up the CSS so let's go back over here I don't like these
underlines but I'll leave that for the end where I'm going to
show you guys how to get rid of those
underlines all right so all right so let's create another one inside the components let's go ahead
and create a edit and this one is going to be called to-do to-do form and it's going to be jsx
like that and to start up the template I always use rafc the arrow function here and here it's
going to be similar to the uh to the form the the similar to to-do form it's going to be similar to
that so here I want to do is declare I'm going to go ahead and decl
are a value and it's going to be
set to values like that and inside there is we're going to use the user State like that it's going
to be anti string like so very similar it doesn't so again guys this is uh this is my uh my second
video for for react I think is uh pretty cool all right so inside there um okay no I'm sorry because
we're editing this we got to pass the task so we want to do task task and inside there we want to
do is uh we want to pass the edit too and also we want to pass th
e Tas cuz we're uh editing one of
the tasks all right so here we want to do is the same thing constant handle uh we're going to
create this function it's going to be handle submit uh submit and let's go ahead and do we're
going to pass the event and start up the form we're going to do prevent uh default like that
and then uh and then we want to pass edit to do and there well let's work on the form so the first
thing I want to go ahead and do let's go ahead and give it a Class A Class name a
nd this one is going
to be it's going to be called to do form like that and then I'm going to put this one unsubmit so
whenever we submit this we want to pass the handle submit and um of course we're going to need a
input and inside there we're going to have a value and the value is going to be equal to the value
um let me see what else here value value uh let's give it a a class name and inside there we want
to do is want to I'm going to name this one to do update update the input like tha
t this is going
to be good for the CSS um inside here we want to do a placeholder inside the placeholder was
going to be up update update the task and inside there we want to do un Change event and we want
to do Anonymous function and this one is going to be called set value and this one is going
to be we're going to listen for an event and this is going to be Target we want to get the
value whatever it is and here we want to do is we want to do a button uh oh what did I do
what did I do o
kay there what we want to do is grab the button on it uh here we want to do a
button close that um here I'm going put I'm going do this one I'm going to label it update the
Tas and let's give it a class name class name like that and this one I'm going to call it too
update BTN and of course it's going to be a typ submit like that all right so that's that and
inside there we want to do is pass the value and in order to uh update the test you want
to pass the value and also then the task ID a
nd then the set value we want to do again
make it a empty string like that so that's pretty much that's pretty much it for this
one all right so then we want to be able to access that so we want to go back to the to-do
to-do R over here so down where over here we got we want to go ahead and uh so we want to
pass both of them at the same time so the so here what we want to do is um so we want to
do is uh let me see over here what I want to do is I'm going to go ahead and do if it's
editing
I'm going to do I'm going do to-do is editing like that if it's editing I want to go ahead and uh I want to go
ahead and pass the uh the edit edit to-do form like that so inside
the to-do form of course it's going to ask for a for a key value and I'm going
to make this one equal to the index and then this is going to be edit to do
and this is going to be called edit task uh and also we going to pass the
task to do like that [Music] and over here let me see what I messed
up here it's compla
ining okay so I'm missing okay so to do to [Music] do okay I forgot to close that let's see oh over here we forgot to close that editing
all right cool so we have that we have that let's make sure yeah so we got everything all right so
we can go back to the application and see how we do all right so let's go ahead and refresh that
and let's go ahead add a task so we're going to do is uh let's do coding let's go ahead and
click on it uh what are we not working let me see un click the in is no
t a function oh okay
CU I don't huh I thought I created that let's go back okay so it says inside the to do all right
let's go see insided to do so we talking about over here let me see is the edit edit edit to-do
okay so inside the to-do form let me check it out okay I got it here I think
he's complaining about this one let's go ahead and do the edit
Todo so it's going to be edit to-do and let's see if we get rid of that
all right so let's do it again so let's do coding oh wow that was pe
rfect okay that was it
all right so adding coding challenge let's do that challenge so update task so let's do uh
let's do JavaScript JavaScript uh JavaScript speed h no I got to do JavaScript coding coding
let's do that uh become better programmer let me see that that's another task so we can go
ahead and delete it we go ahead and edit uh coding JavaScript coding uh book uh we can create
another one it says break the code break the code boom we can do that we go ahead and delete that
one
go ahead and delete that one go ahead and delete that one all right so that is working so
I'm going to go ahead and uh now I'm going to go ahead and update the CSS I'm going go ahead
and get rid of all this CSS I'm going to go ahead and grab the CSS from my GitHub so that way
and you don't worry guys you'll be able to access the GitHub code so you guys can you guys going
to have access to all of that so give me one second so so there's some CSS there you guys
will be able to access that so
this I'm trying to trying to get that react going you know
practice more on the react so all right so there's the CSS this one looks just like the
beginning of the video so let me go ahead and close the console there so see it's in the
center and let's go ahead and add up a task so this one I'm going to do coding perfect I'm
go ahead and do uh Java JavaScript JavaScript uh practice something yeah uh let me see what
else we can do uh we're going to do program uh break the code break the code
like that we can
add a another one uh coding coding challenges challenges let me see all right so then we can
edit uh we can coding challenges for part two uh break the code we can edit that one break the
code we can do break the code part part seven like that we go go ahead and uh delete delete
delete delete perfect so all right so that is it right there that's the whole application so
if you guys liked it don't forget to subscribe don't forget to uh you know help the channel
grow and st
ay tuned for more videos and uh oh before I was leaving I forgot I was going to
show you guys something like how to get rid of that lines if you come across these see this
little uh there's two ways to do it but the the way I'm going to do show you guys is simple
way to do it so let's let's go ahead and do that so they this is one of the
ways that I I went online and I found these rules and yeah so is this is
uh one area where you can actually add up uh let me go ahead and add up the
the l
ine for the to get rid of those underline like that so it will turn off the
props the prop types that's going to uh that's going to turn it off so if you go back on
it again see all that is gone so yeah it's just a typescript kind of this kicks it on see
it's all gone it's the application still works it still works it's not it's just sometimes
they're underlines to do so put down cards I can delete it yeah so it's working great all
right guys so stay tuned for more videos and uh and I'll co
ntinue making some more videos
of react when I uh grow my skills and reacts uh get a little better on this so stay tuned
for more videos uh I don't know what I'm going to do in the next one but stay tuned don't
forget to subscribe share the videos and and I will see you on the next one and stay
coding guys stay coding all right see you later
Comments
my first todo app in reactjs 😁Hey, thanks for watching! We’d love to know your thoughts/doubts here in the comments. 👉Don’t forget to SUBSCRIBE to our channel for more such videos & valuable content: https://www.youtube.com/channel/UCymPTmdV5goU-IBMCAPaErQ