train

React Tutorials Series - Increment App #10



Sharing buttons:

[Music]

so let's create a incremental app which

means then when I click on a button then

the button value or the number written

on the button will increase so in this

way we can learn the events in the react

and also we'll see how we can manage all

these things so firstly I will do I will

delete all these things so from here

till here okay and even let's delete

this also so I'm starting from start

group and I will say class I can see

only Inc for increment which is now

extends react dot component inside this

I have to say a constructor which will

have the props if there is then we have

to say super which will grab the props

then we have to say this dot state is

equal to a count or so counter which

will initially as zero this is okay

let's define a render function here this

render function is going to return and

it's going to return a simple anchor tag

so anchor tag it's good and now H ref

let's give H ref of HTTP colon

google.com that should be pool okay here

I will say this dot state dot counter

and I will say value is then this dot

state dot counter and let's define now

react Dom dot render and this is going

to render

the first thing which is our component

called ink that means increment then

document dot get element by ID and ID

name is root so let's start server so I

will go here start terminal npm run

start and it's going to start yeah here

we have and it's now having this error

because we don't have to use this okay

value is this so value is 0 because we

have defined initially 0 okay so this is

good so let's just Magnum maximize it

what I want whenever I click here so

it's not firstly don't have to go to

Google so it's not good doing that

ok now it will work ok so if I click

here it's not redirect to Google that

should we have to prevent this and have

to increment this 0 to 1 so how we will

increment this so firstly we have to

prevent this so what we have to say we

have to say on click and keep in mind we

have to use the camel case that means

this C has to be capital not small so on

click is equal to we will say increment

okay but this has to be like this dot

increment so dot increment okay so this

is good but we don't have to use this

single quote we can use this curly

braces okay so now if I go to chrome

yeah it's ok and we have to initialize

this that means we have to create this

increment function so let's create this

increment function here and in this

function what we want we want to

increment the counter value to 1

so I will say this dot set state we have

seen that we can not directly change the

value of states so we have to use this

set state value and here what we will we

can do we can say counter is counter

plus 1 but again this counter has to be

this dot state dot counter we are

accessing this value so that's okay so

this is good and let's see the result

reload and again it's having firstly

error than redirecting so firstly let's

prevent the redirection so I will say e

that means event so e dot prevent

default that's okay

so save this file go click here yeah

it's not redirecting but we are having

some kind of error which says cannot

read the property set is T but

everything is correct why it's telling

about this actually we are using this

and now because we are on increment

function this is binding to increment

not to our class so in the constructor

we can say this dot increment is equal

to this dot increment increment dot bind

this save this go to Chrome and now if I

click value is and you can see it's now

working that means our system is

properly working and it's not even

redirecting so everything is good but I

don't think this is actually the good

practice because suppose you are having

lots of functions like this so do you

have to write always like this no that's

not the case so instead of that what you

can do

you can say like this create a arrow

function here and he will say e and then

he wants more and then if I go click

here

yeah it's again working and this time we

can remove this and save this file

yeah it's again zero and yeah it's

working and this is very cool so we

don't have to define this dot increment

is equal to this dot increment aught

mind parent heads with this okay

so let's delete that you can see it's

cool but one thing is more you can even

eliminate these things also so again you

can just use your function okay then

here instead of doing this you can say

increment is a function which get e as

the event now use arrow function and

let's go to Chrome and you can see it's

now working we don't have any key

binding here we don't have any binding

in the constructor everything is done by

this function and this is I think for me

is the best way of using this click

events so you can see it's very nice so

if you want you can change this to

button so that should be button once

more and reload yeah you can see button

is here so I think if I delete this

anchor tag that will be nice okay so you

can see it's now working great very nice

it's absolutely working fine so this is

all about the event or click event of

the react system let's just push

everything to github so I will close the

server I will say git status and yeah ok

so gate add Oh

that's okay then gate commit with the am

flag means a message so I will say it's

like increment app that's good get

status clean gate push and it's now

going to push and everything is now on

github.com slash bit fumes slash react

tutorials and if I go commits yes

increment app is now here that's very

nice

so we will meet in the next episode till

then don't forget to subscribe like

victims on Facebook Twitter and

Instagram