0:00:24
hey everyone welcome to another episode
0:00:26
of buildbreaking fix
0:00:28
uh we're the raw coders from uh
0:00:30
melbourne team of developers from
0:00:33
um on this on this stream we work on um
0:00:38
on one particular coding project usually
0:00:40
the scrambler enhancement project
0:00:43
but today we have uh
0:00:44
a guest with us the worst dev otherwise
0:00:50
um who's gonna be joining us today to
0:00:52
work on uh react app
0:00:54
um do you wanna introduce yourself or
0:00:56
you have anything else yet
0:00:58
sure so we're definitely not going to
0:01:00
learn anything today
0:01:04
and whatever i do just just do the
0:01:11
so the the goal is
0:01:17
uh like real-time chat up in react
0:01:21
so hopefully we have an hour
0:01:24
probably not going to get it done but
0:01:26
let's let's give it a shot
0:01:30
yeah can you get started um yeah do you
0:01:32
want to share screen sorry and
0:01:34
i will do that all right um
0:01:38
go here share the screen
0:01:45
yeah whatever i don't have a second
0:01:46
monitor set up at the moment
0:01:48
okay that's right oops
0:01:54
all right all right
0:01:56
you can see i don't know just before we
0:01:57
do that sorry um we usually do the
0:02:00
acknowledgement of the country so i'll
0:02:02
just run that recording
0:02:06
i begin today by acknowledging the
0:02:08
traditional custodians of the land on
0:02:10
which we gather today and pay my
0:02:12
respects to the elders past present and
0:02:15
future i extend their respect to
0:02:17
aboriginal and torres strait islander
0:02:28
all right so like i i did this um like i
0:02:32
don't know a couple weeks ago
0:02:35
so this this app is hosted on versailles
0:02:38
which if you're not familiar with it
0:02:40
it's it's next.js which is basically
0:02:46
another framework that's built on top of
0:02:54
um we can also just do this in pure
0:03:00
but um if i'll share this link
0:03:05
um let me go back here
0:03:11
there we go yeah second monitor helps
0:03:16
so i i put that in the in the private
0:03:19
chat but i don't really care if people
0:03:21
want to go in there and
0:03:23
do whatever they want
0:03:25
so is it is this already working for you
0:03:29
yeah try the link and then
0:03:31
i will send you a message
0:03:46
let me know when you're in
0:03:55
all right yeah just
0:03:58
i mean if you send one back you're gonna
0:04:00
see it i'm gonna see it but
0:04:04
i and this is using a service um called
0:04:09
pusher which may be called like
0:04:16
it's part of a company called senbird i
0:04:22
there you go message bird company
0:04:26
so this is this is basically what's
0:04:30
like this pub sub subscriber
0:04:33
um and this is totally free they have a
0:04:39
and it's pretty easy to set up
0:04:42
and we don't need a server
0:04:50
we can of course deploy it in pure react
0:04:54
but you're going to be exposing some
0:04:57
that's one way of doing it um the other
0:05:00
way would be to just use something like
0:05:05
um you know aws lambdas or
0:05:08
like netlify serverless functions
0:05:11
um those are all pretty easy and that
0:05:13
way like you don't like expose the
0:05:18
um like the secret keys um
0:05:22
on the front end so like for
0:05:24
demonstration purposes
0:05:26
i don't think it matters
0:05:29
but like i i built this in next and then
0:05:33
um i can show you here
0:05:38
with first cell like it's just super
0:05:49
that's just baked into next and whatever
0:05:53
is going to be deployed as a serverless
0:05:59
there's this handler right
0:06:02
so this is your serverless function
0:06:05
and this is just grabbing those um
0:06:14
and not exposing them
0:06:18
and then on the on the on the um front
0:06:26
oh it's under pages right it's just
0:06:30
so on the front end um
0:06:33
all we have to do basically
0:06:39
create this new pusher object
0:06:45
subscribing to our
0:06:47
to our message channel
0:06:54
that's kind of it like that's the that's
0:06:57
that's the soup then you're done and
0:07:00
then you just push this to production
0:07:05
and then you profit and then you profit
0:07:13
yeah did you want to build on this today
0:07:17
you know did you have another idea in
0:07:20
well if you want i can we can
0:07:23
i can build it or i think it would be
0:07:26
more fun if you try to build
0:07:29
and i can it try to talk you through it
0:07:31
unless you feel like i'm totally
0:07:33
uncomfortable writing react
0:07:35
on this live stream today
0:07:38
yeah i'm very scratchy in it at the
0:07:42
uh but i did build something lassie
0:07:44
actually i'll quickly show you
0:07:50
well yeah i mean it shouldn't be that
0:07:51
hard like honestly like
0:07:53
i can i can walk you through it
0:07:58
i think it would be more fun for you but
0:08:00
if you if you don't want to do it all
0:08:14
me and this another dev we built this
0:08:16
last year oh that looks great that looks
0:08:20
um so this is all like bootstrap uh but
0:08:22
it's it's in react as you can see the
0:08:24
thing but yeah essentially bootstrap
0:08:30
and then basically just the idea is like
0:08:33
you it's meant to be like a social media
0:08:39
and then like you know these are the
0:08:41
and uh you know you would either choose
0:08:46
yeah agree disagree
0:08:48
um and then you would have a reply you
0:08:51
and if you if you chose i agree it will
0:08:53
show here if you chose i disagree to
0:08:56
yeah it was a bit of work that went into
0:08:58
it but um yeah really enjoyed this
0:09:00
project yeah definitely yeah that that
0:09:02
looks like a really good project um
0:09:04
thanks man you guys must put some time
0:09:07
into that for sure
0:09:11
so so if you if you built this then you
0:09:14
should be all good to go
0:09:16
all right maybe yeah okay all right i'll
0:09:18
give it a go uh yeah
0:09:21
but uh yeah just no i haven't touched it
0:09:23
in a while whatever it'll come back to
0:09:26
it this looks like this looks like a
0:09:30
oh and you have it hosted on your own
0:09:31
you're all that's cool
0:09:35
we have it hosted on on gcp
0:09:41
and essentially for the database we used
0:09:47
firebase yeah i've never i've never used
0:09:49
it myself but like
0:09:52
seems like a really
0:09:54
nice way to throw up an app really
0:09:58
yeah yeah for sure
0:10:00
the other thing too that's like i almost
0:10:02
built this chat up actually using
0:10:05
firebase um but i was too lazy
0:10:08
to touch it because i was like nah i'm
0:10:10
not gonna learn firebase
0:10:12
right now but like if you do know
0:10:14
firebase like this would be really easy
0:10:15
because they have um firebase has a
0:10:19
real-time database so like you can you
0:10:23
use it for like real-time applications
0:10:30
okay that's pretty cool actually that
0:10:32
comes to mind like um
0:10:34
i was looking into that a little bit as
0:10:38
because actually i think google import
0:10:42
like another company oh did they okay
0:10:44
and then um yeah they just integrated
0:10:51
but yeah firebase is really easy man
0:10:53
like if you if you wanted to learn it
0:10:55
it's definitely like something that's
0:10:57
not too hard at all
0:10:58
yeah i don't know like i don't
0:11:01
like yeah maybe someday
0:11:04
i'm like more focused on like
0:11:13
i think i think the company that i'm
0:11:16
interviewing for uses google cloud so
0:11:22
whatever whatever pays
0:11:28
but yeah for like your own projects or
0:11:30
if you were actually like trying to
0:11:32
bootstrap some some app that you wanted
0:11:35
to monetize like or just make your own
0:11:37
project that you're not monetizing like
0:11:39
i think that's really uh a good service
0:11:43
to use i've heard like a lot of
0:11:45
developers really like it
0:11:48
sure firebase is part of gcp now anyway
0:11:51
so it's like you know you essentially
0:11:53
like can learn and still like very badly
0:11:56
i see okay so it's like google cloud's
0:12:01
um what's the amplify
0:12:07
is amplified just a db or
0:12:10
uh amplify is is uh
0:12:21
like a more i don't want to say
0:12:24
more simple version i don't know i i'm
0:12:27
not the expert to speak on it but like
0:12:29
you have elastic bean stock
0:12:31
and you have like to create apps on aws
0:12:35
really quickly and then you have amplify
0:12:39
apps and spas like super fast with with
0:12:43
authentication i think i think it comes
0:12:46
comes by default with dynamodb
0:12:52
you know through aws incognito
0:13:00
um graphql i believe which is app sync
0:13:07
but yeah like um i haven't i haven't i
0:13:10
haven't touched it like to build
0:13:12
something other than like a tutorial but
0:13:14
like i really want to like um try to
0:13:17
work with it you know who really likes
0:13:25
i'm blanking on the name um
0:13:32
matt coles you had him on the show
0:13:38
yeah i need to i need to look into that
0:13:41
just out of curiosity
0:13:48
we're running out of time so
0:13:53
um so i just created a new folder there
0:13:56
um are we using create react app uh so
0:13:59
if you want like the easier way is to
0:14:02
just throw this up in
0:14:04
um verse cell like using next
0:14:07
but which is like hardly different than
0:14:12
or we can do create react app um
0:14:16
and yeah like i think it's easier just
0:14:18
use create react app and then just like
0:14:20
expose the keys it doesn't matter
0:14:24
like it's on your pusher account anyways
0:14:27
so i'm not really concerned if they call
0:14:31
who's gonna call me
0:14:34
yeah they're gonna say
0:14:36
what have you done with the api we're
0:14:44
but yeah i would just like just take
0:14:46
down the keys after the show
0:14:48
yeah yeah i'll do that
0:14:50
all right sorry um what do i have to do
0:14:54
mpx create react app
0:15:02
and you're done that's it that's all you
0:15:09
oh wow is that done that's fast
0:15:19
you can see the end to there if you're
0:15:28
oh oh okay i wasn't reading your screen
0:15:31
so yeah you just need to um mpx create
0:15:34
react app and then just give it a name
0:15:50
yeah and like maybe in the future like
0:15:53
if we wanted to we could
0:15:55
add some serverless
0:15:57
functions on with like netlify because
0:15:59
that's like a free easy awesome place to
0:16:02
host and then like
0:16:05
you can just like hide the hide the you
0:16:09
the api keys and the serverless
0:16:13
which is free it's awesome like nullify
0:16:24
um so while this is this is downloading
0:16:27
um if you haven't already
0:16:29
i would go ahead to push her and like
0:16:33
um an account and get some api um get a
0:16:37
i forget what they call it but like
0:16:39
basically you're just getting some keys
0:16:48
okay oh not a developer doesn't use
0:16:56
i'm just so used to
0:16:57
google you know it's just like easy
0:17:06
i'm always like should i sign up for
0:17:17
beams platform building
0:17:20
so the thing you want to create is a
0:17:27
get it started and then just
0:17:30
yeah just give it a name
0:17:37
let me pull zayn here and get real close
0:17:43
um yeah that looks good
0:17:57
we don't have a back end in this
0:18:00
no i would just choose node
0:18:28
that first part that says like
0:18:33
java um javascript
0:18:35
like that's all you really need
0:18:37
is this like pub pub sub thing i like
0:18:43
so like yeah you can't just grab it
0:18:44
without the html you're not gonna need
0:18:53
all right and then this is this like
0:19:00
and this is like the node event uh this
0:19:02
is for node.js this is for like the
0:19:04
events so this is like what you would
0:19:06
put in like your serverless application
0:19:09
so like i mean the one way to do this is
0:19:15
it can't like if you're just like local
0:19:17
hosting it i think this should
0:19:19
maybe work but i haven't tried the other
0:19:22
thing is like just like
0:19:24
throwing this in like a super dumb
0:19:30
like locally and then you're just like
0:19:32
talking to yourself but like
0:19:37
all right um so i don't really need this
0:19:41
yeah we don't need that for now um but
0:19:43
it's like yeah it's not gonna work um
0:19:46
without the without some sort of um
0:19:50
but like let's just like build the
0:19:55
build like what we need for the react
0:19:57
app which really like shouldn't be that
0:20:06
and then we can we can just like worry
0:20:08
about the the crappy server later
0:20:18
but like yeah i mean all you need is
0:20:20
a server in express with like 10 lines
0:20:29
just steal the code from our scrambler
0:20:34
all right yeah so let's just like just
0:20:36
clean out all that boilerplate
0:20:40
we don't need anything
0:20:42
just just just delete everything from
0:20:46
class name app and below
0:20:55
there and then like if we want to be
0:20:56
very lazy about this like because we're
0:21:00
then like we're just let's just do
0:21:02
everything inside of the app
0:21:10
think about what we need but like really
0:21:12
all we need is like
0:21:15
we need like just some really basic html
0:21:19
in here which is just like input
0:21:24
to send messages so like you can even do
0:21:27
like an input with a button and a form
0:21:36
oh look enough you don't really need the
0:21:37
form but like i don't know like that's
0:21:40
more semantic i guess
0:21:50
i'll steal some crows from the victory
0:21:57
there's a cool there's a there's like a
0:21:59
nice library too for react like if we
0:22:02
have time we could
0:22:03
spice up the components a bit
0:22:06
it's called chakra ui
0:22:08
and it's really nice and it's really
0:22:15
no offense to w3schools but it's
0:22:18
probably a little nicer
0:22:22
yeah cool we yeah we totally can
0:22:28
yeah there's some cool stuff for
0:22:31
yeah and i'm just copying and pasting
0:22:35
that's what we do on the stream that's
0:22:40
i believe that's like half of what i do
0:22:45
my i don't have the answer but
0:23:05
i remember this like oh yeah yeah yeah
0:23:22
cool and just make the
0:23:30
make the button type
0:23:32
submit so set the type attribute to
0:23:46
and now like all we need
0:23:53
section container above the form like to
0:23:56
send to like display our messages that
0:23:59
we're sending and receiving
0:24:07
and then we'll have like the perfect ui
0:24:22
have you ever seen that joke like
0:24:25
what is a what does a developer bird say
0:24:44
how do we display this again it's uh
0:24:48
uh just nbn start exactly
0:25:07
tomorrow i have an interview at
0:25:22
how are you feeling for good
0:25:24
i'm pretty pumped like because like i i
0:25:27
signed an nda so i can't talk about it
0:25:31
they they sent me some
0:25:34
information about what we'll be doing
0:25:36
tomorrow and then i was like
0:25:43
yeah because otherwise i was like so
0:25:46
anxious what are we gonna be doing
0:25:49
what are we gonna do with this time and
0:25:51
that makes me worried like when i don't
0:25:58
that's looking good
0:26:04
wow and it's centered on the page
0:26:10
yeah maybe we added label
0:26:15
yeah make it look nice come on add a
0:26:46
um so the next thing we just need to do
0:26:51
is hook up some state to this form
0:26:54
um and in react like you probably
0:26:56
remember like we have like the modern
0:26:58
way of doing it is is like these
0:27:00
functional components and we use hooks
0:27:04
um so like the two hooks really all we
0:27:07
need for this app i think
0:27:09
maybe we could use the ref but i don't
0:27:11
think so all we uh all we need is like
0:27:14
use state hook and a use effect hook
0:27:18
just import those from react at the top
0:27:21
or you can just write well we don't have
0:27:24
react imported you another way is you
0:27:26
can just write like react dot use state
0:27:32
do we need we have to import react first
0:27:36
actually you don't anymore but like
0:27:38
since we're using those hooks like um
0:27:40
you do have to import those
0:27:43
but yeah you don't have to import react
0:27:46
okay yeah it's nice
0:27:49
just like less typing
0:27:54
so is it you state and
0:28:01
and then it's from react
0:28:02
uh import from react
0:28:22
all right and then um so if do you
0:28:25
remember like how we use hooks like
0:28:27
there's some rules of hooks
0:28:31
very briefly okay so like
0:28:34
yeah um so with hooks you're always
0:28:37
going like one of the rules is like
0:28:40
you're all you always need to define it
0:28:42
above that return method and inside of
0:28:47
um but they they can't be inside the the
0:28:52
um the other thing too is like we're not
0:28:54
gonna like deal with it but like you you
0:28:57
don't put them inside of like
0:29:01
and there's probably like some other
0:29:04
rules to using hooks too but like those
0:29:06
are base those are like the two basic
0:29:08
rules so like okay
0:29:10
um uh above the return but inside of the
0:29:20
the use state hook
0:29:25
um yeah and that's a function
0:29:34
yeah so just call it like
0:29:36
and the and the way we write it actually
0:29:41
what you can write i would just write
0:29:43
const and then declare it as a const and
0:29:45
then it's a d structured array
0:29:49
um with or is it uh not a not an object
0:29:53
it's a destructured array
0:29:58
yeah this is the convention and then the
0:30:02
so the first item in that array is
0:30:05
always our state so that's the current
0:30:09
use state hook like um so
0:30:13
um and this the second
0:30:16
item in in the array is
0:30:18
our set state which is a function
0:30:21
and that's how we set the state
0:30:25
i know and then and then set it equal to
0:30:31
just write equals use state
0:30:39
call it there you go and then change the
0:30:41
first one to state
0:30:46
yeah yeah we can actually name this
0:30:48
whatever we want right that's that's
0:30:50
right so like if you go in the
0:30:51
documentation this is what you're gonna
0:30:53
see you're gonna say stay in set state
0:30:56
um but yeah you can name these like um
0:30:59
for this one we could we're gonna put
0:31:02
this in the input we're going to attach
0:31:23
uh that's how we're gonna set our state
0:31:25
and then the other way is we're gonna
0:31:28
use the state um in a value
0:31:33
i'm sorry i kind of like
0:31:35
did it a little bit backwards like okay
0:31:38
so just delete that on change first of
0:31:42
let's just get this going so right value
0:31:44
we want to set the the value for this
0:31:47
input and that's equal to
0:31:50
and you got to use um you got to use
0:31:58
not bracket the other one
0:32:05
yeah because it's a it's a
0:32:07
you know it's a variable so anything
0:32:09
inside of a variable like we just wrap
0:32:11
it in curly braces
0:32:14
and now like if you put like inside of
0:32:17
the use state hook
0:32:19
you can you set inside the you state
0:32:22
hook a default value so you can just
0:32:26
or whatever or roar coders
0:32:37
and now if you open the page you should
0:32:41
the state value is your is your value
0:32:46
but now you can't change it
0:32:48
so that's where we got to do the second
0:32:50
so we got to hook up this state
0:32:54
this sets state to our um input
0:32:57
component and that's on the on change
0:33:01
or on change event handler i should say
0:33:07
so yeah just go to the event and write
0:33:13
and now um equal to open curly braces
0:33:20
you're going to write a function
0:33:24
so just use the arrow syntax
0:33:28
you can one-line it it's cool
0:33:31
and um the the first the first uh
0:33:34
parameter or argument is e or event
0:33:40
because this is an event uh inside of
0:33:51
you're doing good man you're doing great
0:33:54
and then um you're gonna write set state
0:33:59
and then this this is this is gonna this
0:34:02
is gonna update the state
0:34:04
um so this is a function this is a
0:34:06
function that takes in
0:34:08
your new state so your new state is
0:34:20
so basically this is just taking in the
0:34:22
value of your input and setting it
0:34:26
as the state of this used state hook
0:34:31
e dot target dot value i'm sorry
0:34:37
so now if you save this and go and type
0:34:45
you can you can change and i don't know
0:34:48
if you happen you probably don't because
0:34:54
doing a lot of front-end stuff but
0:34:56
there's like a there's a extension
0:34:58
called like react profiler and like in
0:35:01
in that ex react developer tool sorry
0:35:04
and like inside there you can actually
0:35:06
see the state of your react application
0:35:11
so like you would see like whatever you
0:35:13
put in there whatever you
0:35:14
um deleted like that's this that's the
0:35:17
stay now for that you state hook
0:35:26
yeah you could also like inside of that
0:35:29
um so the other way like the the other
0:35:33
is convention is to write like a handler
0:35:36
so you just write like on like on change
0:35:39
handler and then like you just drop that
0:35:41
function inside that on change instead
0:35:44
of like writing it out on the line but
0:35:47
we can do that like for the form
0:35:54
so now what we need
0:36:00
well actually why don't we do this too
0:36:02
so we don't trip ourselves up so just
0:36:07
of these like state and set state to
0:36:09
like whatever you want like input and
0:36:17
uh put this message
0:36:24
that's yeah and then just just update
0:36:29
there you go so yeah you can you can
0:36:41
what we want to do
0:36:43
is hook up our form to
0:36:46
an on submit event
0:36:52
um we can write a function above the
0:36:55
return method called like
0:36:58
usually the convention is to say like
0:37:12
and then this is going to take in an um
0:37:15
an event too because we want to prevent
0:37:18
um the uh submission of the form
0:37:22
so e prevent default because otherwise
0:37:26
by default like um
0:37:31
try to submit this form and refresh the
0:37:36
okay which totally defeats the purpose
0:37:45
i can't speak for the other like
0:37:47
frameworks actually so i can't say that
0:37:50
but yeah it's prevent default
0:37:54
default is capitalize
0:38:01
and then just call it you gotta call it
0:38:07
call call prevent default it's a method
0:38:16
all right and so and then um
0:38:20
on that handle so like um
0:38:23
why don't we just do this to start um
0:38:28
on the on the line below just console
0:38:32
or the your message rather like which is
0:38:35
the current state right of this input
0:38:43
all right and now you just need to hook
0:38:45
up this handle submit um function to
0:38:52
actually um with the type submit on the
0:38:57
automatically knows to submit the form
0:39:02
so on uh on your form component
0:39:06
just write on submit
0:39:09
uh attach it on on your form component
0:39:15
yep and then yeah on submit
0:39:19
and then just curly braces
0:39:23
and just drop in your handle submit and
0:39:26
you don't need to call it because it
0:39:27
it's automatically invoked
0:39:31
and now if you go to the application
0:39:36
and you just start
0:39:38
typing different stuff in in your input
0:39:42
you're gonna see it logged out
0:39:45
once you hit submit
0:39:54
yeah there you go all right so um
0:39:59
what we want to do like eventually with
0:40:02
this on submit handler is basically like
0:40:04
send that message right to uh pusher
0:40:08
um's like endpoint
0:40:10
so like that's that's something like we
0:40:13
can do implement later
0:40:18
the other thing is um
0:40:22
yeah so i think i think next we want to
0:40:31
another piece of state called messages
0:40:33
or something or like
0:40:36
messages and like this would this would
0:40:39
the the purpose of this piece of state
0:40:42
would be to take in
0:40:44
um and set the messages that are we're
0:40:49
um the listener which is from pusher
0:40:53
because like if we're gonna get in
0:40:55
um we're gonna set up a subscriber right
0:40:58
to this to this uh
0:41:01
end point that's gonna be listening for
0:41:03
messages in the background right um it's
0:41:05
a websocket it's basically just
0:41:07
websockets right so like
0:41:10
when something comes in like we want to
0:41:12
add this to our messages uh like chat
0:41:14
messages um state and then that's gonna
0:41:17
be rendered on the page
0:41:20
that's why like you have this div
0:41:23
name display i think you mean
0:41:26
like class name display or whatever i
0:41:28
don't care a name doesn't matter to me
0:41:32
inside there like we would render out
0:41:34
all the messages that were receiving and
0:41:39
cool yeah i go you mean
0:41:44
um so yeah just set up another piece of
0:41:49
and call it whatever you
0:41:53
could we would want an array here
0:41:57
uh yep that's right
0:42:12
like just mocking this out why don't we
0:42:14
just like above the function
0:42:16
app why don't we just make some like
0:42:20
we're definitely not gonna
0:42:27
let's just discover like we should uh we
0:42:29
should definitely continue it yeah i
0:42:31
mean if you guys aren't working on other
0:42:33
stuff in the future and you want to do
0:42:35
this like we can keep working on it
0:42:40
the messages would be like an array
0:42:43
and then inside the it's an array of
0:42:45
objects with all our messages
0:42:51
so like one thing we need is just like
0:42:56
like the message id and then
0:43:00
we can call it one or two but i don't
0:43:02
care or you can use random
0:43:06
we're just like mocking it out
0:43:10
we need to a value as well that's it
0:43:12
sure value like the message so this
0:43:14
would be the text for the message
0:43:20
i forget what these would actually be
0:43:22
called from the api but like we can
0:43:24
change it easily later
0:43:26
and then maybe we want like one more
0:43:29
or two more things actually we
0:43:31
and they're optional but like maybe we
0:43:34
would want a time stamp
0:43:39
and maybe we would also want
0:43:44
yeah you could just put like new date
0:43:48
or whatever is in javascript
0:44:00
um it's it's the new keyword and then
0:44:03
space date like it's an object
0:44:08
um well it's not up and then you call it
0:44:11
cement call it it's a method there you
0:44:20
and then we maybe would want the
0:44:31
and then and then i think that's like
0:44:35
what you would need for a super basic
0:44:38
chat application you don't even need the
0:44:40
timestamp necessarily but like
0:44:43
or the username but like it's good to
0:44:45
know like who's sending stuff
0:44:52
yeah why don't we just like copy that
0:44:54
one real quickly and we'll just make two
0:44:56
messages and then we'll just render them
0:45:01
and just just like change the
0:45:04
the values a little bit
0:45:11
i love roar coders
0:45:25
take the take the messages
0:45:29
um variable and drop it into your state
0:45:32
but just delete the
0:45:42
now what we're gonna do
0:45:51
another um well actually let's just
0:45:54
render this out first since we just have
0:45:56
mock data but like
0:45:58
so the way if you have an array of data
0:46:01
do you know do you remember how to
0:46:08
like render out like
0:46:11
different components
0:46:23
so you're gonna map over that
0:46:28
and then inside there
0:46:31
you're just creating those
0:46:33
creating a component like
0:46:36
it can be uh you know it can be like a
0:46:41
component or it can just be like a div
0:46:44
you know a message inside and then
0:46:51
so like what we would be rendering here
0:46:54
is just basically like you know
0:46:57
we have some text that we want to
0:46:58
display like username
0:47:07
don't quite remember
0:47:10
so uh the first thing you want to do is
0:47:12
because it's you because you're writing
0:47:14
um some you're you're writing like
0:47:18
variables your writing function is you
0:47:20
want to wrap it in curly braces like
0:47:26
so like in jsx yeah like if you're down
0:47:28
here in the return where you're like
0:47:30
actually rendering things
0:47:32
um you're gonna wrap it in curly braces
0:47:37
you just want to dot map and then map
0:47:40
over the different um
0:47:43
items in that array
0:47:50
we had hd or we had some gsx in here
0:47:58
you will yeah you will have this like um
0:48:01
you can actually like one line it right
0:48:04
now if you want for fun or you can write
0:48:06
like you would write return
0:48:13
you you don't use um curly braces you
0:48:15
actually use parentheses
0:48:17
to render a component
0:48:26
so inside here you would you would write
0:48:29
out you know you're like
0:48:31
paragraph this is a message paragraph
0:48:36
and then inside there you gotta wrap it
0:48:41
like so anything inside you want to put
0:48:43
like invert sure you like that's fine
0:48:46
there you go i mean like this
0:48:51
the only thing you're forgetting is like
0:48:52
in the map in the map callback the map
0:48:56
function like you need to
0:49:00
put a callback so uh um or not uh yeah
0:49:04
callback like you need a callback
0:49:05
parameter whatever parameter so like
0:49:14
maybe you've already used message i see
0:49:16
okay chat message chat message usually i
0:49:19
just take the name that was plural and
0:49:23
use its singular version and then
0:49:26
arrow functions fine
0:49:31
um but you will need you will need
0:49:36
i think you might need curly braces now
0:49:38
because you broke it on you broke the
0:49:43
yeah now you gotta you just gotta wrap
0:49:52
yeah i don't know there's some syntax
0:50:05
what is the winter telling you
0:50:11
what is the webster
0:50:12
this one oh i just meant like what is
0:50:20
where's the problem
0:50:31
maybe it doesn't like your empty curly
0:50:33
braces inside the message
0:50:38
this one yeah inside the paragraph
0:51:01
closes close the curly brace
0:51:05
oh you're you're missing so it's closed
0:51:08
curly brace then close parentheses then
0:51:15
or maybe you're true true
0:51:17
no no no you're right this happens to me
0:51:23
all right so now you've mapped out those
0:51:26
mock messages they should be displayed
0:51:30
nice okay we'll just i would just leave
0:51:32
this this one then
0:51:40
yeah like the other way too is like you
0:51:44
you don't have to use the the braces
0:51:46
from the arrow function but sometimes
0:51:49
i'm gonna like destructure the object
0:51:52
like up there because it's easier for me
0:51:57
but like anything you want to return as
0:51:59
a component like in jsx you have to wrap
0:52:05
um closing like you know like
0:52:07
complementary parentheses there like
0:52:10
that's the that's the distinction for
0:52:17
that happened to me so much in the
0:52:18
beginning like i'm like
0:52:22
forget to use like um parentheses
0:52:27
so that's like that's like basically the
0:52:32
and like yeah if you wanted to like you
0:52:34
can you can add some extra stuff to this
0:52:37
component like you could put you could
0:52:42
and then like the username so it's like
0:52:44
inlined or whatever but like
0:52:47
this is this is like
0:52:49
this is like the basic
0:52:54
like you know whatever the html
0:53:02
when you whenever you're done
0:53:06
yeah that's that's gonna make it look
0:53:15
i agree with that dude that was a good
0:53:20
i can't tell you being sarcastic
0:53:25
now it's like you can tell like who or
0:53:31
i like that that was a that was a good
0:53:37
so then so then the next and last thing
0:53:42
add another hook which is like the
0:53:45
second most common hook which is a use
0:53:49
which i think we imported
0:53:55
do you remember how to write a use
0:53:59
or what if it does
0:54:02
doesn't it render the start of the
0:54:06
when the page loads and then
0:54:09
that's one thing it does
0:54:12
um the user so they use effect hook is
0:54:15
the second most commonly used hook as i
0:54:18
said like you know you state is pretty
0:54:22
because you're just like adding state to
0:54:24
your application and it doesn't um
0:54:27
it's it's not it's not like
0:54:30
it's not destroyed like when react
0:54:33
re-renders right so like use effect
0:54:36
is this hook that allows you to
0:54:41
allow side effects
0:54:43
and that's basically why it's called use
0:54:49
so it's this it's this um
0:54:52
it's this function
0:54:55
that you're gonna add like
0:54:57
dependencies to so there's like
0:55:01
let's just write it out and then it's a
0:55:02
little bit easier to explain
0:55:04
okay as you're like writing it out
0:55:06
so you so yeah you just you don't like
0:55:09
this isn't like you stayed or other
0:55:13
yeah you actually just like call this
0:55:17
and then inside so inside of it
0:55:21
you're gonna you you're calling another
0:55:25
or an arrow function
0:55:28
just call an arrow function it doesn't
0:55:30
take so this one doesn't take as far as
0:55:32
i know and i would be surprised to learn
0:55:35
if it did take in any parameters or
0:55:37
arguments but it doesn't
0:55:40
and then and then so like the last
0:55:43
argument you're gonna write a comma and
0:55:44
this is like other
0:55:52
like i don't know like user like not use
0:55:55
reducer like reducer um method in
0:55:58
javascript or like other array methods
0:56:00
like you can yeah add that dependency
0:56:04
so like this this dependency array is
0:56:11
state usually it's almost usually state
0:56:17
always commonly states so whatever you
0:56:19
put inside that dependency it's gonna
0:56:22
tell react like when it should run this
0:56:27
and actually a lot of
0:56:28
hooks like there's some other ones
0:56:31
called use callback and use memo they
0:56:33
also have a dependency array and those
0:56:36
those like those um
0:56:39
basically have the
0:56:40
have the same idea where like they're
0:56:42
only gonna like be run if
0:56:45
whatever is in your dependency has not
0:56:49
in this context like
0:56:55
chat messages as our dependency
0:57:04
um or message for that matter actually
0:57:07
let's make it let's make a message for
0:57:09
this example because we're definitely
0:57:11
not going to finish
0:57:15
so like this use effect is going to hook
0:57:18
uh is going to run whenever message
0:57:26
it's not gonna trigger a re-render
0:57:30
it's only gonna trigger a re-render if
0:57:37
something else so like in this example
0:57:44
and then we can we can add we can like
0:57:49
we can append like another object
0:57:52
to our set chat messages like from the
0:57:55
input which isn't what we would
0:57:57
necessarily do for this application but
0:58:00
like for demonstration purposes like we
0:58:03
can just see like hey i'm going to type
0:58:04
some stuff in an input
0:58:06
hit submit and then and then it's going
0:58:08
to add like a new um message to the chat
0:58:15
you mean like append the array
0:58:17
or the chat messages eraser
0:58:31
the first thing the first thing you
0:58:32
should know though is that use effect is
0:58:35
gonna run even on the first render of
0:58:40
so if you try to put in a message and
0:58:45
then it's not gonna do anything so like
0:58:47
you can write conditionals
0:58:50
like above it to say like return out of
0:58:53
this use effect hook
0:58:55
if there's no message
0:59:00
what's that uh that was something i
0:59:02
don't remember but maybe you do tory but
0:59:05
wasn't there like um
0:59:08
it was like you add like three dots and
0:59:10
then you go spread operator
0:59:13
and then yeah well you do that inside
0:59:16
the set state method
0:59:23
yeah because in react react we
0:59:27
well yeah i mean that's just like
0:59:29
javascript like spread syntax
0:59:32
but like so the first thing you want to
0:59:33
do is like we don't have a message so we
0:59:36
don't want to set any state and cause a
0:59:40
it's it's pointless and
0:59:43
so like the first thing you want to do
0:59:46
you know there's no message
0:59:52
what i described won't help us for this
1:00:01
oh what i just said it's a i'm mistaking
1:00:04
what it does this one
1:00:07
well yeah we'll get there like you
1:00:09
almost got it you almost got it
1:00:30
you and actually if you want to do that
1:00:32
you can just like get rid of the curly
1:00:35
but it's just like simpler syntax i'm
1:00:42
totally up to you like yeah you can just
1:00:44
get rid of them you can bring up the
1:00:49
i just um i do that because i'm lazy
1:00:55
so now like if there is a if there isn't
1:00:57
a message this effect is just going to
1:01:00
exit and if there is a message
1:01:02
then we can set the state and add this
1:01:05
current message to our chat messages
1:01:13
so this is this set state
1:01:16
um part of the hook for st use state is
1:01:23
for objects and arrays like well for
1:01:26
arrays and in particular like yeah one
1:01:29
common way is just use the spread syntax
1:01:34
um but because like the
1:01:39
like the messages object or like
1:01:42
the id the value the timestamp the
1:01:45
username like you need to add that
1:01:50
to this to this message
1:01:54
so like just before you set it just
1:01:56
create and just create an object like
1:01:59
that you're gonna pass in the sent
1:02:01
messages with the id the value the date
1:02:07
uh in the user fact just do it in the
1:02:14
anything you put outside of a hook in
1:02:16
react is gonna be wiped clean like every
1:02:22
really okay yeah so if you write let
1:02:25
message and then like react right
1:02:29
that message is gone like
1:02:31
rap doesn't know about it it doesn't
1:02:33
keep it around that's why we have the
1:02:35
used state hook like
1:02:37
it persists on renders
1:02:50
i hope this is a good primer
1:02:56
well this helps me a lot because
1:02:58
tomorrow i'm gonna have to be talking
1:02:59
about this like for like a good two
1:03:03
yeah i appreciate you doing this
1:03:06
that's all good man i'm yeah hopefully
1:03:27
so the one thing is for your value
1:03:29
just set that equal to your message
1:03:32
because we're we're just going to take
1:03:34
what you submit on your form and pass
1:03:39
because your message is your is your
1:03:45
in your set state function or set sorry
1:03:49
set message function i mean set state
1:03:52
your set message function
1:03:56
yeah uh so call it yeah just call it
1:04:12
you can you can do that um
1:04:18
if you want like that's definitely one
1:04:20
way to do it so you can write like um
1:04:24
you can write do i have to um
1:04:27
yeah you can just write um open braces
1:04:34
you mean outside no inside inside
1:04:37
because you're gonna whatever you put
1:04:38
inside of the setstate function that's
1:04:40
going to update your state to be your
1:04:42
news to be this new state
1:04:46
um so now you're not going to have any
1:04:48
state like if you go back to the page
1:04:50
it's going to be gone
1:04:52
like let's just try it for fun like send
1:04:54
a message submit it
1:05:00
yeah it doesn't allow you
1:05:06
it's about to happen right because
1:05:12
i can't remember like what we wrote
1:05:15
but like i thought it would clear the
1:05:20
um oh oh you know why oh there's some
1:05:24
oh it's angry at you because you're like
1:05:26
changing the messages and then updating
1:05:31
huh wait there's some loop running let's
1:05:33
go back like there's there's some bug we
1:05:43
we want to set the chat messages
1:05:47
not the actual message
1:05:51
that's why it's that's why you're
1:05:52
getting that loop because it's like hey
1:05:57
that's like react like
1:06:00
stuff like you write a piece of state
1:06:03
that it's like or you put in a piece of
1:06:05
state that's a dependency
1:06:07
and then you're setting the state inside
1:06:09
there and then it just keeps like
1:06:11
re-rendering re-rendering
1:06:13
that's how you make an infinite loop and
1:06:15
react like the easy way
1:06:17
i see oh yeah i see what was happening
1:06:19
now because we have this dependency
1:06:20
right exactly yeah you got it man for
1:06:24
so now like um if you did this like you
1:06:27
would clear all the messages because
1:06:33
what you want to do is yeah see it's
1:06:35
gone right it's already gone
1:06:38
um so what you want to do is take your
1:06:42
your old messages your chat messages
1:06:46
your old chat spread them out
1:06:49
spread them out with the spread operator
1:06:54
and then add your new example message
1:07:05
uh you gotta you gotta use the spread
1:07:07
operator though the spread operator is
1:07:16
because that's that's just syntax and
1:07:18
javascript for how you
1:07:20
how you um it's just shorthand for how
1:07:26
uh what's the word concatenate um array
1:07:30
it's it's all good you could do the same
1:07:33
thing with like concat method but
1:07:37
then you'd be exposed um for
1:07:40
being like super old school
1:07:45
um okay cool let's check this out now so
1:07:49
now if we did everything right if you
1:07:51
write a message and hit submit it you
1:07:54
should see that message pop up
1:07:57
oh oops uh don't spread out the object
1:08:06
the second one because the second one is
1:08:13
you could also just wrap it in an array
1:08:15
and then it would work but
1:08:17
no need see wow okay already showed up
1:08:24
oh because it's on change that's why so
1:08:27
anytime you any time you
1:08:29
anytime you type in that input
1:08:32
um it's it's updating that piece of
1:08:34
state which is the message right
1:08:37
so that's why you're getting
1:08:39
that's why you're um you're spamming it
1:08:41
yeah so like the other way to do it
1:08:45
whenever we hit submit on the form and
1:08:48
like inside that handle submit it's then
1:08:51
going to set the message
1:08:54
instead of having this on change
1:08:57
we should uh we should put this in here
1:08:59
then in that case right
1:09:05
well that's the chat message well
1:09:15
like i was thinking about how we would
1:09:16
do it if we're actually building the
1:09:20
getting there but like
1:09:26
want there's another way to get the
1:09:29
value from the input field on the form
1:09:33
introducing like extra complexity
1:09:37
okay um and that is with
1:09:44
that's what i'm going to reach for like
1:09:49
uh it's called use ref
1:09:51
so like we'll learn some good stuff
1:09:53
today like these are like the three
1:09:55
hooks i use the most
1:10:00
that's running did you want to call it
1:10:03
oh wow yeah let's call it a day yeah
1:10:05
let's go there um and we can pick this
1:10:10
i don't know whenever we
1:10:12
we're not doing scramble enhancement
1:10:20
but yeah it's been been really good i
1:10:23
i got to yeah use react
1:10:26
um after a while how do you do you like
1:10:33
yeah yeah man i i hope uh i hope like it
1:10:37
a good like refresher on basic react
1:10:42
but like you know 90 of react is
1:10:45
this honestly like once you get your
1:10:49
once you get used to doing all this
1:10:50
stuff like these patterns like
1:10:54
that's pretty much like the core
1:10:56
competencies and react honestly
1:11:00
yeah that makes sense
1:11:05
get some practice on this i think but
1:11:08
anyways uh it's been a good good session
1:11:10
i think yeah thanks for having me
1:11:12
that's all good it's been a pleasure
1:11:15
um all right thanks everyone thanks for
1:11:18
um yeah today we worked on the chat
1:11:23
that tori guided me through
1:11:27
and depending on what we do next maybe
1:11:30
we'll go back to scrambler or we'll
1:11:32
continue this but yeah it's been really
1:11:34
um yeah thanks everyone for watching
1:11:37
i'll see you on thursday uh same time
1:11:42
and uh different tasks perhaps all right
1:11:45
thanks everyone see you later thank you
1:11:47
thanks dynash have a good night
1:11:49
yeah tori good luck tomorrow as well
1:11:52
thank you very thank you
1:11:54
i'll let you guys know
1:11:57
for sure or if you don't hear from me
1:11:58
that means i'm sad
1:12:03
let us know either way but i'm sure
1:12:05
i will thank you thanks uh have a good
