hey everybody welcome to live coding
with jesse i'm jesse
and today we're going to work on the
react native web app that
we started
two a couple weeks ago i don't remember
when we started it
um let me know
what the stream quality is like
last time we had really good quality but
the time before that it was terrible so
hoping we have good quality again
all right and youtube's telling me that
the quality is okay so i hope that's the
case
um
all right cool so it looks like it's
looking good
uh hey everybody uh in the chat
and
all right so i'm gonna go ahead and get
started and then i'll go back to the
chat if you've never joined in before
this is how it works uh i will
do uh pomodoro sessions so let me get a
pomodoro timer running
um
let's go
this is fine
there we go tomato timer will work
so
i'm going to start this pomodoro timer
it's 25 minutes when 25 minutes is up
i'm going to stop coding and i'm going
to answer some questions okay we're
going to try to get through two pomodoro
cycles uh see how that goes uh and then
at the end of both pomodoro cycles if
there are any questions left i'll answer
those
and uh if it starts to go
really long i will have to cut it off
and
so i may not be able to answer all the
questions depending on how many
questions we have
because i'll have to go to my normal
day job as a software engineer
all right so let's check out what we
have so far here's the actual app
so
this is as far as we got last time uh we
just have a an input a button
and a title on the page but the cool
thing was we did all this in react
native and it's showing up
uh in
in like dom primitives basically so
these are divs right um
so that's
that's the idea behind react native web
you can write in react native
and render it
as a web app
and you'd be able to render it
not only as a web app but since it's in
react native you can render that same
code
uh
you can
i don't know if render is the right word
when we're talking about mobile but
uh basically that same code could be
used to make an ios app
and an android app and potentially other
things as well
um so let's go to the code
all right hopefully that's all big
enough for you the only thing that's
blocked out by my face right now is just
the uh the terminal that that actually
is running the local server so
not really anything there that
would be useful to see
let's give ourselves a little bit more
space for code
all right so you can see our package
json at this point is very very basic we
have react
react dom and react native web react
native web includes
react native so that's why we don't
actually have react native here
in our our main dependencies
this package json will grow as we
continue and uh eventually if
we we'd like to turn this into a mobile
app as well so it it'll get a lot more
complex but right now it's it's pretty
simple
and we only really have one component
and that's app.js
and
it's also very very basic okay so this
will get broken out into separate
components but for now
i'd like to just work on building out
the ui a little bit
and we this is going to be a game like
basically a math game
so i used to play this math game with uh
with my oldest son when he was just
learning basic math
and
uh i think we demoed it last week
but
the the whole idea is you have to get
math problems correct
to win the game right
uh so we want to build out a basic ui
i'm not going to worry about graphics at
this point
so we're probably just going to use like
color divs to represent
the characters in the game for right now
and then later on i'm not really a
graphics person so
still have to figure out what i'm going
to use uh for the characters but
we just need to get something on the
screen visually so that we can test out
the logic
all right so for right now the
the input
is there that's that's what we need
uh
let's get
some
i guess let me explain first
what what i'm thinking at first is just
a basic thing so
let me make this bigger
all right
so
this
will probably just be at the top as our
title we're gonna
center uh this on the page uh the input
all right so above the input there'll be
a math problem right just for now it'll
just be a simple addition problem you
type your answer in here and you hit
submit right that's basic
but then above that
or even on the sides depending on the
screen size
uh we'll have
the hero character on one side and the
enemies on the other side
right and
if you get the math problem right
an enemy will disappear if you get it
wrong an enemy will appear
right so the way to win the game is to
get so many questions right
consecutively so that all the enemies
disappear
right
um
so that's the very basic idea level one
simple
um the simplest version of this game all
right and then we could think about
adding in some more complex things later
maybe like
having high scores
being able to save um
your your data things like that
but for today i'd like to just get that
basic ui uh built out
okay
and i see so there's some action in the
chat so hey everybody that's uh that's
joining us
um if you're uh if you didn't catch the
beginning and you're wondering why i'm
not checking the chat just hang in there
i have a timer going when that timer
goes off i'm going to check the the chat
and answer all your questions
all right so in react native we don't
have the concept of divs uh or spans or
you know p tags and things like that
we have these other primitives which are
base the very basic is the view
and the text
all right so we're going to be using
mostly views here
so
this main view is going to stay our our
root view
right
um
but then we're also going to make
let's let's call this our
oops
i actually i wrote div again i'm
so used to that okay so this view is
going to be our hero view so for now
we're just going to give it like a class
basically a style of of hero later on
we'll probably break these out into
their own components but it's a lot
easier to work with them in one place
when we're starting out
so we're going to say style
hero
and
that's all we're going to have in that
view
oops view
and this one is going to be enemy
okay
um
so for now since i know there's we're
going to start out with multiple enemies
i'm going to make three
okay
we're
obviously not gonna keep copy and
pasting these
you know but for now we we're just gonna
kind of hard code
um a demo of the layout
so
down here
where we have our styles and react
native so react native comes with this
this style sheet
dot create and you can put styles in
there basically the styles are a
javascript object
so instead of normal css you have these
camel case versions
of css
not
all of css is available here so it's
it's a subset of what you would could
normally use on on a website
so uh it'll
your your app probably won't break but
you'll get a little error in the console
letting you know
um if you're using something
that's not supported by react native
so for now we're gonna add so this is an
object
object syntax so we're gonna add a comma
and then we're gonna add our hero
okay and let's just give them a height a
width and a height
and in react native the units
uh
are just plain numbers right so we don't
say pixels or em or whatever it's just
just flat out uh a number
right so for now uh let's keep things
small let's just say 40
and height
40. okay so we're gonna keep them at
this point just squares right just
really basic
and then
let's give it a color so
so we're going to say background color
and
i don't really know x value for
off the top of my head
i'm just gonna put in
i wonder if you know i've never tried
this but i wonder if i could say just
like blue
i know you can do this on the web but i
don't know if you do it react native so
i'd like to know if you can do it so i'm
just going to try it
all right so i just copied and pasted
oops
there we go i just copied and pasted
hero
and we're going to call this enemy
and let's just say red for the enemy
and let's save that
see what we get
hey here we go so it actually works
although
i don't know about you but to me this
blue looks purple
maybe just because it's up against the
red it's like
messing with my eyes here but anyway so
here's our hero and here's our three
enemies
great
uh so i definitely learned something
that you you can just put
uh
the names of colors in there
uh so that's useful
especially when we're trying to just
mock things up really quickly
all right so the positioning is an issue
right now like we just put them on the
page but they're not at all where we
want them to be so let's try to get them
positioned properly
so
first thing we can do
is
move them down below
the title
and
let's add
all right here's what i'm thinking
probably should add a container for our
hero
and a container for our enemies
so let's do that now so basically our
we're gonna have a view
and
uh
styles that
um
i'm gonna say container for now because
i i suspect that these containers are
gonna be very similar
so that
we'll just have this container class
and oops we don't want to self close
that we want to actually
close this view
around the hero
and then we're gonna have another
container
around
all of these and you know what i don't
have oops there we go
i don't have like my auto
there we go the auto format wasn't
working i was worried for a second i
never had that set up
okay so now we have containers around
here
we haven't given the containers any
styles though yet
so let's let's do that
right now everything inside the root is
getting this justify content a line item
center let's let's take the root and
make it um
heights
um
i think we can do
we can do percentage let's see if this
will work
and we need to put that
all right so we're going to try height
100
on that route i'm not sure if it'll work
or not
i can't even really tell no
no it didn't work so
oh actually you know what we should do
um
let's go with
um
flex one
is this it
let me see there's some property on flex
that will make it take up the entire
um
the entire container no that's not it
i may have to look that up now
so our our actual
this says id root but that's not really
our root um
let's just mess around in dev tools for
a minute to try to get this right
so
this should have our flex
yeah our flex grow a
one see what this one does um
so
let's not do anything and are even our
bodies on this too at least on this too
let's just look this up i had to look
this up for a project that i'm working
on now
but it was like two months ago and i've
already forgotten so let's say uh full
height
view react native there we go
uh
is it possible to make view 100
and react native
yep this looks good
all right
so flex one
is is suggested here which we tried
uh
let's do this take up the full screen
position absolute lose two if it doesn't
solve your problem
okay so we can go with this position
absolute
we could also try to get the dimensions
first and then set that as width and
height okay
okay
looks like they're doing the flex one
thing
yeah i think let's just try this um
position absolute
that will probably be the quickest
to test
all right so
i apologize if somebody already put this
in the uh
chat let me see
each element inside a flex container if
you put flex one for each of them will
give all the same width height if it's
flux section column okay so uh john
hanson was talking about the flex uh
as well
let's try this
and i don't want or need
these
all right let's see what this gives us
yay all right
this is is the full
um
the full height now
right
and
okay great
all right so now we know we have a full
full height and with uh
view
uh and then
within this view
let's all right we're at the containers
let's style the containers
get sidetracked there
we have container and
within the containers
um
[Music]
let's see how we want to do this um
i think the normal flex
will work
for these containers
because flex direction is column by
default
and so i believe that's what we want
uh so um in react native flex direction
by default is column
okay
um
but here's what we want to do so
let's take this route and say
let's put up here
let's check flex direction row
and
[Music]
actually
let's comment this out for now
really could do this in dev tools okay
so this is like
what i mean by flex direction
uh so
by default on the web
so if you're using regular react
this is would be the layout if you set
if you're using flexbox
by default on
react native in react native the flex
direction is column which would have
been like the first view that we saw
all right so
we we're going to within our views
probably switch back and forth to get
the layout that we want
okay so
we're going to pro like basically we're
going to nest views with different
flexbox properties
to do our layout right so we're using
flex uh flexbox because that's what what
the layout stuff is for react like built
in to react native
right
so
we're going to need a um a wrapper
around
this
right so we want to leave our main root
as just flex direction column
but then
we'll need a wrapper around this
to
set these
to flex direction row
so these line up like this we're going
to space them out but for now like we
this is a better lineup okay
let me check my time in about five
minutes i'm gonna go to the questions uh
the chat and answer some questions
okay
so let's add
yeah let's add this
another view
the views are going to start to get
crazy it'll get simplified once we split
these out into separate components
though
all right so this view we're going to
set a style
of
and we're gonna say this is uh
battlefield
all right so this is gonna contain our
our battlefield right where our hero and
our enemies
um
do their their math battling
and this will encompass
both of our containers for
uh our heroes and enemies
now
we can go down here
for our battlefield
we can grab this flex direction row
we'll remove it
here and then just add it in down here
and let's see if that gives us what we
want
i don't like that space
oops we forgot a comma
all right let's check it out now okay
great so that that does give us what we
want so the main layout remains flex
column right flex direction column but
then within
this
see if we can get
get the outline here this div
so within this container
we've switched to flex
direction row
and then once we're outside of that
container we're back to the normal
normal layout again okay so
not bad now of course we want to
separate these
these warring parties here
and
well let's while we have this open
uh let's just add some
styling right here so we can get
immediate feedback
uh so
okay so the flex
one here
on this element is gonna give
us it's gonna spread us out
uh vertically but what we really want
i guess here is
let's
see what this gives us hmm
let's see if we can get rid of
there we go
okay
so we're going to give this container
this is our battlefield container we're
going to give it a width of 100 percent
i'm going to stretch out
um
the the battle here now i don't really
want this to take up the full
width of the screen
um
for now i'm going to add some padding on
this one it might not be a bad idea just
to add padding on the root but
we can change that if we need to later
so i'm going to say
actually let's just we'll add the
padding in on
in here because it's a little bit
different for react native at least we
have a different option so
our battlefield width
is going to be
100
percent
and then we're going to say padding
we're going to say padding horizontal
right and then
we can give it a a padding so i'm going
to say 16.
see how that looks
okay
so here we have 16 here and i think i
forgot to add in
i had added in flex
one yeah
so
flex one
when i added flex one here all right so
this is basically what it's doing it's
making this first one
this first container for our hero
the full width
with the exception of the tiny bit of
space that we give to our enemies
okay so this this will actually
achieve what we want for right now so
i'll leave it
but we may want to switch that up at
some point uh because it's logically
like
uh it may end up being confusing for us
because we'll expect
there to be kind of like an even
battlefield
in terms of our containers
um
actually let's see what happens if i do
this
oops
didn't want that
all right this this actually will work
out better uh it doesn't look better
right now but it will in a minute
let's add flex 1
to both of these containers so we do get
that middle
that split down the middle unit
so basically each one would be
50 percent
all right
let's verify that yep this is what we
have now
what we can do uh in these containers as
well is say
like how
we want the elements inside to be
displayed
so
flex
let's say flex direction and then we
have some some options right so
oops that's not what i want
um
is it justify content
all right so it's not just like content
and then it'll be a line items
there we go
so
if you're trying to like center
something vertically or horizontally
it's always either going to be justify
content or align items i can never keep
straight which one is which so i always
just try both
so
this will give us
you know what where we want them to be
for now i think center is perfectly fine
so
let's add our align items
center oops we gotta put that
all right so we're going to add our line
item center and then that should center
both of them there we go so now we have
our our little battlefield right
uh
now also like we we do have an issue
with
spacing right and we ought to justify
our content as well so we get that
vertical align
we're going to center that too
okay
all right so now you see our hero
centered our enemies are also centered
we want to give some space between our
enemies and there's there's two ways we
could we could try to do this
we could
set this container to be larger
in terms of vertical height
and then whoops my timer went off
all right sorry about that
all right let's pause that for a second
and
let me go to the
the chat
and answer some questions
all right
okay so philip says
philip dares me to code a program which
makes a new random language i know it's
possible i tried and it works
um
all right that's that's pretty
interesting i don't know
i i'm not sure how i would go about that
but that's a good idea for a future
project thank you
rob says good morning
social stock says good morning all right
so a lot of people are saying good
morning so i'm just gonna say good
morning to everyone
um
thanks for watching
um
surendra asks if i can explain the
python language
i my experience in python is very
limited so
uh i'm i'm not the person to explain
that all right if anybody else watching
is really good with python maybe in the
chat you could try to explain a bit uh
the only thing i really would say about
python is um the syntax is based on a
lot on indentation
so that's that's kind of all i remember
from the brief time i spent
learning python
uh
let's see koval asked about my ide my
code editor and it is visual studio code
uh john hanson says should the input
type be text or number uh it's probably
gonna it should be number so
i don't remember what i have in there
now i probably just copied and pasted it
from somewhere the last time
okay look at there are some questions
here that i think i i actually just
answered as i was going along so i'm
going to skip some of those
um
let's see someone which i i can't
pronounce her name because it's in
different characters says what about
flutter um
flutter is really interesting and it
would be a different way to create
mobile apps i don't know that you can
create a web app with flutter
so flutter seems really interesting i
just i don't know enough about it to do
a stream on it yet
but i've
i've read a little about it and it
it seems pretty cool
okay
um
we had a question about whether this
will be uploaded to the channel later
yes all the live streams get
automatically uploaded uh to the channel
later on
i'm gonna adjust my monitor here it's
easier for me to read
okay
okay uh say the question what are we
trying to make in the web page uh so i
explained a little bit earlier but just
very briefly we're gonna make a math
game
where the user will have to answer
basic math problems in order to defeat
the the enemy
sebastian says i enjoy watching you on
my five minute break
that's cool
uh i'm glad that you enjoy it i have
another question do you use php
uh so php i i have used it in the past
uh i don't currently use it
for my job
so my php knowledge is really basic
though so i've done just some like file
uploading
um
yeah i made like a basic file uploader
for php and then all the other php i've
done is like wordpress plugins
uh so
definitely not
a php expert you know by any means
and
all right
hey i can't believe i made it through
all the questions i think i did i made
it through all the questions in the five
minutes so
let's uh
let's start another timer
i may have to finish up
a little early but for now this should
be good i'm going to check the stream
quality really quick all right it looks
good
quality looks good awesome if anybody
has any issues with the stream quality
let me know
um i just see a question how long will
this stream go the stream's probably
going to end in about a half an hour so
another half hour you could always catch
the the rest of it
in the recording if you if you want to
alright so let's go back to our app and
let me kind of continue on with what i
was explaining
i got to change the song i'm listening
to it's kind of
i can't focus when the song is off
okay this is better
uh
all right so we have two options we
probably have more than two but
to my mind there are two options i'm
thinking of here we can make this
container
um bigger right so the the goal here is
to space these divs out because this is
three divs right
uh we can make this container
like
larger vertically
then we could use flexbox to space these
out evenly within that container or we
could just add a little bit of padding
or i'm sorry margins
to each one of these
uh the easier thing to do right now i
think is just to add the margins
so
i wonder
actually not i have a different idea
maybe for the ui we would want
to like let's say push this down a bit
so
yeah i think this would be better let's
set a standard height for this container
uh what i'm thinking is like at some
point when we start adding and taking
away enemies it's going to cause this
input to jump up and down
right because
it's positioned based on
the height of this
container above it
so it'll be uh
nice it'll look nicer if this doesn't
jump up and down when the enemies do it
so
let's take
these containers
and give them
some sort of height i wonder if we could
do it these ones or maybe
maybe this container
yeah let's do it on this container
let's try it right now and see if we can
go
um
i think we tried this already let's try
it i'm gonna try it again there we go
i guess i didn't try it so basically
what i'm doing here is flex one and
we're bumping this down this looks weird
now but we'll get down to here and and
fix this up a little bit
so if we have flex one here
now when we go down to this we can say
um
justify content
space around
we could do space between we could do
space evenly
right space evenly looks the best to me
so we're gonna go space evenly okay so
we need to make two changes back here
so on our battlefield
we're gonna go
flex one
and then on our containers we're going
to change justify content from center to
space
evenly and i will give a shout out to
john hanson because he was mentioning
this further up in the
chat um and i skipped over because i
knew i was just going to do it here but
um john you were like 100 on the right
track there uh with this so now
we have our battlefield with our enemies
spaced evenly uh our heroes over here
so this is looking more like
like what i have in my mind and with
what the original game looked like the
original game was really basic it's on
my github page uh if you want to check
it out it's it's one of my very first
repos but the original uh page the
original game was just built with uh
jquery
so
it was in my early days of of coding
uh so now we have this
let's add in
we need an actual math problem so we're
just gonna hard code one in just to see
how it'll look in the ui
so the math problem will be here
or
yeah for now we'll put it here
i was actually it might not be
if we put it in the middle of the
battlefield that might be cool too but
let's keep it here for now
and then
this input definitely doesn't need to be
this big if they're just going to put in
a number that's probably going to be
like two or three digits
so we can adjust that
and
then put some space in here at the
bottom so we're not right up against the
the bottom of the window
okay
all right so let's put in our
let's see view
let's put in a container div
so
let's say
let's call it math container
uh i don't want to waste too much time
thinking about names so
that'll do for now
all right so we're gonna put wrap
uh our button our input and then our
math problem which we're about to put in
now
we're going to wrap that in in that
container
and then we're going to have this text
uh
so like in react native i could never
just type text outside of a container so
i couldn't just have text here right
that would throw an error it has to be
inside this this text so let's put um
so we're going to just put two plus two
for now okay
that'll be uh
that'll be good enough i guess
hey porter gray border
okay
so i'm not giving any style to this
maybe i should
uh let's say
math text
all right
so
we'll do some basic styles here for
math container
um
we'll definitely want this to be
hmm
i guess we'll just give it some some
padding for now
uh and really we just want vertical
padding right so we're going to do
padding vertical
and um
let's say 16 as well uh just like we did
with our other container so we're going
to give this some vertical padding
and then here we're going to give
our
math
text oops
math text
um let's just say
font size and let's make the font size i
don't know 20 right we'll see how that
looks
and
that should be okay for now just to
give us an idea okay so we have our
little padding here and
we have our math problem
we could
if our math problems are going to be
like this we definitely have space to
put our input up here
that might not be a bad idea
i'd like to see that uh let me know what
you think right um so just take a look
at it like this and then we'll we'll see
what it's going to be like when we
switch the input to be in line here and
then we'll see which one we like better
okay so
though the way we're going to do this is
we're going to have a container just
around here
and we'll set the flex direction to row
and then that should give us what we
want here
and we'll keep the submit button below
and we'll we'll style that
kind of as our next step
alright so we need
another view
um
let's say
there's a math container let's say
math row
we'll call it math row
since
it's going to be in a row
flex direction row
all right that's one a a little piece of
advice that i have is is never spend
more than a couple seconds trying to
name something because it's so easy to
change the name later on
and you may actually completely get rid
of that view or whatever you're working
on
it might have different functionality
later it might
there's so many reasons why that name
could change it's it's a waste of time
trying to figure out what to name it so
the first thing that pops in your head
just just use that
like i've
i've spent
too much time
like wasting time on naming things and
seeing it happen with other people it's
it's definitely not not worth it
so we have this math row
and we're gonna put
a flex direction
of row
on a math row
and let's not forget the comma and let's
see what that does for us
hopefully what i thought it would hey
there it is okay
so
that worked it doesn't look great right
now but
um
yeah you know i think i'll keep it like
this for now
i want to make this smaller definitely
add some padding here some some spacing
and then make sure that this text is
lined up
with
at the very least it should be
its baseline should be the bottom of
this input or it should be centered
vertically
let me check my timer and check okay
i think we're good
okay
i'm gonna check i am gonna check the
chat now that we've i've showed you both
ways just to see what you all think as
well
okay i don't see anything about that in
particular so i'm gonna go back to the
here
and i did see a few more questions in
the chat so i'll get to those in a few
minutes
uh
let's
yeah let's trim this input down
yeah so it can definitely be trimmed
down significantly
so i believe we have some inline styles
on this input
we can bring these down to
so let's switch this up and do
styles dot
input
and
you can see i'm trying to keep my styles
in the order uh that things are in the
page
uh for now
that is helping me keep track of them
may not be like the best way of
organization
maybe better ways but it's working right
now
oops
i don't need that
okay
there we are
uh it usually makes sense
to put your styles down below uh
otherwise when you start to get a lot up
here it just it's way too cluttered to
have your styles in line
as well i mean i won't say never put
them in line but
it's
it's definitely cleaner to put your
styles down down below
all right so on the input let's give it
a
width
why don't we cut down the height too uh
you know what i do i do want to leave it
at 40 um just so it's a decent tap
target
for like on a touch screen
but we can change
the width
and
want it to be pretty small
um
[Music]
let's go
80. let's see if
if 80 works for this
and then
for a text
here for our math row
we could put
justify content
center
and that should help us
with our text there
okay so they made it a little bit better
it looks like
hmm
that's interesting
it still didn't exactly help us with our
alignment for our text so we'll have to
look into that
actually we could still go even smaller
with this input
so let me try that
i'm going to go with 60.
see how that looks
all right that's more reasonable
yeah 60 does seem a little more
reasonable there
okay
all right let's work out some of this
this padding
right here in the inspector so
um on our
let's see what's going on here
this comes out as a div
with just some
hmm
what if we could do a line height
whoa
that was crazy
um
oh now i know why that was crazy
there we go so if we change the line
height we can make this go up and down
right so
we could do it like that
i mean i guess that works this doesn't
feel like the best solution but it'll
it it'll work for now
i could just try let's just try
increasing the font size for now
um
actually i'm not i'm not like entirely
opposed to a larger font size um
you know this is a
like a kids game so like the larger font
is
not um
like in terms of the genre of like kids
books and games and things usually they
go with a larger font uh especially if
they're just learning to recognize their
their numbers and things it's easier if
it's larger so
uh let's go with this size 26 font it
looks like it fits well with this uh 40
pixel height for the input
so that that'll be a good font size for
us so we'll go with that and then
let's add a little
um
so we're going to say padding
uh let's go with our padding left
right sorry right
let's go with 8 pixels there we go so
that space out a little bit
alright i think i think that works
so we're going to bump this up to 26 and
then add
a padding right
of 8 pixels
or eight unitless
numbers
uh
all right that works that's cool uh we
need some space in between the submit
button and this row so we're gonna go on
the container itself
i don't want a huge amount of space so
i'm going to try a padding
bottom
of 8.
and we'll see how that looks
all right great
all right not bad
i mean i'm not this is not gonna win any
awards for design here but like
uh
it's it's good enough that's not going
to drive me crazy to look at
okay
um let's see
what else we can do i mean i'm gonna
probably change the color of this button
i i kind of want to leave the button
really large too especially when we
consider
the um
this running on a phone
um if if children are going to be
playing this game like
uh their dexterity
you know with their fingers probably not
great so you want to make sure tap
targets are like probably larger than we
would even normally make them
okay
all right this is not bad
not bad we got the basic ui
uh i'm okay with this for right now
right uh i think on the next stream i'd
like to move on to some of the logic of
what's happening maybe actually getting
these to appear and disappear
uh depending on what's what's put into
here
so
yeah i'm okay for now uh so i'm gonna go
to the chat right now
and
i know we i went a little over on the
last pomodoro session i didn't notice
when this was actually the timer was up
so i'm gonna end this one a little early
so i have time for questions
but definitely
want to commit this
so that
you all have access to the code that
we've done today so let's do git status
and see okay we modified app.js
great just like we thought that's the
only file we worked in let's do a git
commit
and i'm going to give it an am flag
right which means we're adding
and we're committing
and we're going to add a commit message
too so
we're going to say i like to kind of
prefix all my commit messages
so that we kind of know what this is
about so this is a new feature right
the the addition of this ui element so
uh if you add ui
for
characters
all right so that's kind of basic we did
we did more than that but
essentially like what really what we
really added the biggest part we added
was we we have these these characters
now on the screen
and so now we're gonna push this up to
github
if you're wondering like how we set all
this up
uh we did do some setup in the last
stream and then on my channel uh i go in
depth more into like how to use get and
set it up on your computer so uh the the
link to my youtube channel is in the
description if if you
you know need a little bit of extra um
extra help like getting up to speed on
what we're doing here maybe check out
some of those tutorials and that should
should help you
okay
cool so all that code should now be on
github let me show you the repo and so
you can go to it uh
let's give it a refresh
right so
here's our commit
and i'm gonna put i forgot to put this
in the description to the video so i'm
gonna copy and paste it right now in the
chat uh this is the link to the github
repo
i'll try to remember to put it in the
description
uh
for next time
okay
um so i'm gonna do just uh a little bit
more question and answer before we end
this
stream and let me find
okay so
uh samuel says uh
i'm the newbie uh of a front-end
engineer what language do you recommend
except for javascript and php so you
want a language recommendation that's
not javascript or php and you're a
front-end engineer
um
honestly like if you're doing anything
with front-end like javascript is the
language
you need to know that
now if you want to pair that with
something back-end and that's not php
it kind of depends on what you want to
work on
you could go with you could go with java
you could go with like.net
um
it it just kind of depends on like
different factors like what you already
know
what you're interested in
uh if you have a certain job you really
want like what does that company use
you know maybe you want to go with that
so it's it's hard to say but
um
you know if you want to focus on front
end you know javascript really is uh
necessary
uh costa says hello is it worth learning
django in 2019 thank you all right so
i would say
if something is worth learning it's just
it is definitely dependent on your
situation right um
i'm gonna it's kind of me to be like the
same thing i just said
if you know the company you really want
to work for the technology you really
want to work with or whatever is is
django based
then it is worth it for you to learn it
now just
if you are just getting into
uh you know software engineering or web
development
and you want to know what to learn i
would not
really even think of django
as something to learn
to be honest like
i would say more focus on javascript
and you could run full stack javascript
um
and like see where that takes you where
you end up getting a job what your
clients need and and then kind of decide
like okay well all my clients are using
django or my company's using django but
um
i i wouldn't
give the advice to someone who's new to
say like focus on django right now
does that make sense
hopefully i i answered your question
um oh by the way django is um
correct me if i'm wrong but i believe
django is like um
uh python based am i right
see
john hanson says the answer's four so
did i defeat the anime yes you that is
the correct answer
let's see
uh in empty says how to create custom
roms uh i have no idea how to create
custom rom so i'm sorry i don't really
know about it
um
habib says is this css coming from react
also um
yeah so like this uh the stylesheet
object that that we have here
this is built into react native so this
actually does some cool optimizations
with your styles so if you're using
react native i definitely recommend
doing your styles like this it's not the
only way but
because it's built in with um
i don't know how it does it all in the
background but basically it it will
apply these styles in
a way that's going to be most helpful to
your performance
all right so peter asks why are you
using react native for building a web ui
is that a real scenario actually yeah
that's a really good question because
this concept of using react native for
the web instead of using just regular
react is a weird concept right
but the idea is
if you use react native
to build a web app you can use that same
code base
for your android and ios app
and then if you have a desktop app as
well
the same code base for that could be
used right because you could use
something like electron
um to run your
your react
native web app
on the desktop so the the idea is like
you know you have your your team or just
you and you don't have the resources to
hire people who are experts in
ios
and separate experts and android and
separate experts in web so you want to
be able to
share the code
and be able to do more
with
you know your developers that you
already have
so it is a real scenario so i'm actually
using react native web currently at my
job uh my normal job and the the idea
behind it is we want to be cross
platform
uh with one code base
michael cross's views and views and
views yeah actually it does uh
you you definitely end up getting a lot
of views once we break these out into
components though it it won't be all
these views together
you know these will have their own names
as components so it will it will look
better like in terms of what gets added
to the dom it's going to be divs and
divs and divs but at least for the
development of it it'll be a lot cleaner
let's see
all right we had another question about
what am i building uh basically i'm
building a a game a math game for for
children to help them learn how to uh
learn about math
um
let's see i lost my place
okay so uh michael then adds um
saying that the point to build it like
is to build it like this initially but
also be clock cross platform so yeah
that's a good point michael i forgot
about that too like
it is the developer experience for
developing a web app is
a lot better
than trying to develop uh on a mobile
device or even with an emulator so
building it like this actually is really
fast at least like for the basics and
then switch over to testing it on mobile
um
it's it's just a faster like the
feedback loop is faster
it's it's easier to figure out what the
errors are
so
i i definitely prefer this
uh peter says my opinion is react plus
material ui would be more practical
um
yeah so i'm i'm assuming you wrote that
before my explanation so i'm just i
think my explanation kind of deals with
that although i definitely love material
ui and i really wish that i could use
material ui with react native
so
i'm going to throw that out there
material ui is awesome
let's see
uh uros ask when the next stream is uh
i'm planning on friday
so hopefully everything will go well on
friday morning and i can get another
stream in um so probably like 8 a.m
eastern time again
jarvis says love your work keep going oh
awesome thank you so much
um
tarcissia says what are these clothes
behind you
oh this
all right let me let me show you what's
behind me so i'm currently in the corner
of my basement like right next to
my washer and dryer for for clothes
right so in order to make this feel more
like an office i hung up tablecloths
from the ceiling
to give me like walls right so this has
the added benefit too is that when my
kids and stuff like pass through here
like they don't get in the the view
because i do have um i've had in the
past
kids potty training and i currently have
one kid potty training so they will at
times run through here
naked on their way to the bathroom so i
can't have that on youtube so this is
this was the cheapest way for me to have
some walls up here so
um
we're right now i'm in the process of uh
trying to buy a house another house
where i can then have a proper office
but for now this is like my temporary
solution
i know it looks really weird uh the
people on my team make fun of me and
says it looks like i'm in some type of
dungeon or like fallout shelter or
something
yeah hello from russia and germany hey
how's it going
cool hey i might speak at a conference
in russia i'm waiting to hear back to
see if i got selected so i'm excited
about about that uh
and i was in germany a couple months ago
i loved it
all right ronald says can you tell me
what i can learn to be a front-end
developer and what kind of course or
path you recommend i definitely
recommend free code camp so check out
freecodecamp.org and start through their
lessons and then
they'll also have a lot of links for
extra information that you can go out to
but
if you go through the free code camp
stuff you're definitely going to be on
on the right track
let's see
uh
md
uh hussein says subscribe thank you so
much
uh julio says did you consider flutter
uh i thought about flutter but i i'm i'm
not
sure
as far as i know flutter you can't build
a web app with flutter it's just for
mobile apps so correct me if i'm wrong
i probably still would have gone with
react native because um it's been around
longer it has a larger community
uh there are more
like large companies with like apps in
production
um
you know they're actually live
so i feel better about that
but i think flutter is going to be a
good option as it matures though
habib says can't we use any front-end
framework with react i think that was in
response to like um
using material ui uh i can't use
material ui with react native so it was
built for react based on dom primitives
so it you can't use it with react native
that has its own primitives
uh jion says why do you have a computer
next to your washer uh because i have a
small house and it was the only place
that i could go that uh wasn't already
being used by my wife and kids
um dr hezekiah asks what software i use
for
the video and screen capture
um
uh obs so the software is called obs
it's free it's cross-platform so check
that out michael creole says
uh remember the spaghetti of the last
project yes
so glad that i i'm not
i don't have to do anything more with
that project like it was i was proud of
it you know what what we did with that
last one but it is kind of a relief to
just
uh be able to move on
tarziu says hello from brazil uh says
it's a really good channel ah thank you
um yogesh says hello from india also if
i mispronounce any of your names please
let me know because i'd love to be able
to pronounce them right so just
let me know how to pronounce them
correctly
um vishal says what should i learn react
to react native
uh if you want to do mobile apps
react native is the way to go if you're
just interested in web apps then go with
react
although it's very easy um to switch
between them like once you learn one
it's easy to learn the other one because
a lot of the concepts are the same
oh okay so evidently you can create a
web flutter project now
um but it might be in beta so all right
thank you for that um cool i have to
check that out so i like i said i think
flutter potentially could be really
awesome but it's just it's too new for
me to be like comfortable um and it does
make me nervous that as far as i know
google is not really using it for
anything big yet
uh so i i kind of worry like
that google might not work on it anymore
so they do have the reputation of like
starting projects and then abandoning
them uh somewhat quickly
um
so whereas like facebook and react like
very significant portions of facebook
are built with react and react native so
um it it wouldn't they couldn't just
drop it right it would it would have to
be
um
a process to rewrite parts of facebook
right so there's a little bit more
security built in just because of how
dependent facebook is on react at this
point
google is
not at all dependent on flutter at this
point for very much of anything
so maybe that'll change
okay
um yeah so a
a-o-del a a-o-del not sure to pronounce
that that says i'm connecting all the
way from nigeria many thanks for your
videos i really appreciate it can
someone who is new catch up with this
tutorial you're working on now oh yeah
for sure we're only on the third video
so
you could definitely catch up not a
problem if you're watching the
recordings i definitely recommend
watching him on two-time speed uh i talk
slow enough that i think that's doable
and i sound way smarter on two-time
speed because i solve all the problems
twice as fast
so um
uh yeah but that'll help you get through
them a lot quicker since they are kind
of like an hour in length which
actually i'm gonna have to wrap this one
up quickly
so let me get to these last few
questions
says hello from india every time i watch
your video and follow and instagram
please say my name there we go sumendra
uh samandra pratrap singh
um hello from camp so uh rhian says
hello from cambodia can i start to learn
react native if i'm a beginner uh
definitely learn
javascript like make sure you know
javascript know like
your basics of css
um
so learn that first if you already know
some of that then yeah go into react
native but if you're like totally new
check out freecodecam.org and go through
there like html css and like basic
javascript stuff
then they'll they'll kind of ease you
into react and then you should be ready
for react native
uh
let's see
uh this is uh
mahesh says what is the minimum
requirement of react native you get a
job i haven't started yet it it just
entirely depends on the company really
um you know maybe for like a junior
position you might only need like a year
of react native experience or whatever
like but i mean it
if you pick it up really fast and can
build something awesome with it you
could probably convince a company to
hire you
based on your portfolio so it's it's
it's really hard to say
uh vishal says what will be your next
video on react to react native um my
next stream will be react native my next
video uh i'm i'm not sure
um i might do something with graphql in
my next video actually
uh so
we'll uh
we'll see
omar says hello is react native like
native script uh yeah it would be in the
same like category as as native script
for sure
um
all right
i gotta go and get to my my real job i
was so awesome uh being able to start
the day off with the live stream with
you all uh thank you so much for
watching for all your questions and and
your advice your help
uh hopefully i'll be back again on
friday morning
so friday morning eastern time uh
definitely like check out i announce on
instagram on twitter
um before i do the stream so you can
follow me on there links to those
accounts are in the description um
check out my youtube channel uh if if
you're interested if you liked what i
did here i have more like this on my
youtube channel
and um
yeah have a great uh
what day is it wednesday yeah have a
great wednesday