hey everybody welcome to live coding
with jesse uh it's good to be back it's
been
a long time
so sorry i started a little bit later
then scheduled uh i'm having some issues
with um
with the stream so
let me know if you can hear me if you
can see me
um
the it it may be bad uh so i had to
force quit some applications
uh right now i have very little running
on my machine
so
today
i'ma wait to hear back and see if you
can hear me and see me before i go into
this
so let me know
all right well nobody's saying there's
something wrong usually
that happens quickly if something is
wrong so
uh i guess i'll just start
so
really quick uh
here's why i haven't been streaming
um
i got a new job
and before my old job i could live
stream while i was at work at my new job
i can't also i have a longer commute for
my new job so it's been tough to find a
time
where i can i can actually stream so the
plan now is i think i could consistently
stream around 8am eastern time
on wednesdays and fridays so i'm gonna
try to do that
and i'd like to do a project with react
native web that's what i'm working with
for my my new job so
i think it'll be better if i if i stick
with that
that way i'll know what's going on and
the stream and the project at work uh
can kind of like
play off of each other
so
hey everybody there's a lot of people
saying hi just say hello
um
so this stream is gonna be kind of like
a short stream compared to some of my
older ones so i'm going to keep it maybe
like a half an hour
[Music]
maybe a little bit longer
and
for this stream i'm just going to set up
a react native web project
so really quickly react native so
react is a javascript library
that helps you to build progressive web
apps
react native
is
a javascript library
that allows you to create
mobile apps
using react
you can also create other things so
essentially you have this base of of
react that you can code
and then it can be turned into other
applications
right that can run natively on different
devices so not just android and ios
or
you know windows
machine but also
you could
there there are other things so like a
vr application right or
in this case
we're going to
use react native
and have it run as a website
on the web it looks like my image is
frozen
so
right now i guess as long as you can
hear me i'm okay with that
so
why would we want to do this this sounds
crazy why not just use react well the
reason being you can write
most of your code
and
and react native
with
some slight alterations depending on
platform and run it on many platforms
so we build for the web but at the same
time
we could very easily
turn that into
an ios app an android app
and whatever else you know comes out
that
uh react native can
kind of compile into i guess so
that's why i'm using react native at
work so that we could very easily be
cross platform
and that's why i want to use it with
this project
so let's get to some code
and
if my image is frozen
well let's do this
i'm gonna get rid of the video for now
okay so
that should help
maybe a little bit with like frame rate
and stuff or with
the freezing
um the video seems to be a little bit
more resource intensive
so first thing we're going to do
i am on a mac so this may be slightly
different on windows but i want to open
visuals actually let's open
first things first let's open a
chrome
window
okay
[Music]
should be back now
let me know uh how it is now
it looks like
on my end it looks like it's better
so hopefully it is a bit better
um
let me know i'm gonna you know what it's
not the internet connection
for me it's um
it's my machine
so i just think that
my macbook pro is a little bit old it
doesn't have the the specs to handle
streaming like this so
i'll try to figure out something else
this may be a great excuse for me to get
a new computer
uh so we'll we'll see
okay
so the resolution is probably lower now
so i'm going to try to make the the font
as large as i possibly can
and
let's try to
huh
all right
yeah if if the um
if the video is too bad
then maybe check out the recording that
should be available a little later
hopefully it'll be better but anyway
this is create react app
you can check this out more on your own
if you'd like
but basically we're going to do
npx create react app and then we'll just
name the app
so let me open up a terminal
i use i term
remind me later okay
so
i'll make this as big as i can
so you can see it
all right so this is just you know
regular terminal
um i've gone into my projects folder
we're gonna do create react app and now
let's name it and for now um let's say
uh
fcc
um
react actually let's do
let's do it like this
it's going to be a weird name but
for
react native uh especially when you're
going to try to do this
your naming restrictions
oh you can't contain capital letters
okay
let's just call it um
it's gonna be all together
oops what am i doing
so
there's an issue when you try to
use this with mobile
that you can't have hyphens in your name
so that's why i was doing it all
together like that
alright so this is going to do its thing
and
it's probably gonna take a little while
since we're
streaming at the same time so i'm gonna
check out the live chat a little bit
uh
okay so it looks like the frame rate's
still really bad
and that's probably since i started
doing this
hmm
okay
[Music]
it's
yeah you know at this point
if i put the settings any lower
i'll be streaming at
480
and
that means the recording that will be
available afterwards will still be at
480.
so i really don't want that it's it's
really hard to see the code
so i may just have to try streaming from
a different machine next time
hopefully
what i'm going to shoot for for this
stream is
let's just try to get this installed so
i can at least show you the package json
file and how we're going to set that up
and also if anybody has any questions go
ahead and put it in the live chat right
now and at least i can answer some
questions while we're waiting
let's see
i'm just going to scroll down through
the chat a little bit to see if anybody
had asked anything
oh hey john hanson's here
how's it going
um
okay
all right giuliano says it's working at
uh 360 dpi
all right not ideal but
that's working
yeah sorry for the really bad quality of
the stream
this is way worse than it was the last
time i tried to stream on this computer
so
i'm not sure what
what changed
uh but it seems like something has
changed to make it even worse
so next time i stream
i am definitely going to change things
up
um kid brave it's definitely not you the
video is freezing a lot it's it's
entirely
um my fault
so
wow this might take a little while
hmm
yeah
and this is making this take forever
okay
so
i'm probably not going to make you all
suffer through that much more of this
is it actually done now
um
so
this stream will just basically be an
introduction to the project then hey
wonderful it did stop
all right so now that we've
created uh this project using create
react app
we're gonna actually go into the project
so we're gonna cd fcc
react native web now we're into the
project and now we can go
we can open that up in visual studio
code which is my code editor
of choice
and
basically we're going to do almost
everything from there so we don't even
need this terminal anymore so i'm going
to go ahead and shut that down
and
hopefully
visual studio code will actually load up
so for those of you that join maybe a
little bit later
we're starting a brand new project
this is going to be like a side project
for me
so
not would i
what i've done in the other streams
is no longer responding
let's just keep waiting a little bit
longer
so i can't stream my actual like work
projects anymore my full-time job but
i'm gonna do a side project and i'm
gonna try to use the same technology
that i am using in my project uh for my
my normal job
let's see
okay so
we're in here
and
this is our package json file you can
see right away it's very basic
but it has it definitely has what we
need
okay so what we need to add
in addition to this
is we need to add react um
react native
and react native web
i have to double check here maybe we
don't need react
native yeah we may just need react
native web
i'm actually not going to try to load
this package here seeing as it took
forever
uh to get this working before
so we'll add in react native web
and at that point we'll need to add in
some things so
we need to add this into
is this do we need to add this in our
config
clues built-in support
okay you know what we don't need to add
this i had to use it on a
a project at work but
we should be all right
basically react native web works by like
aliasing
um
parts of react
so you could see like if we were to do
it manually
we do it with webpack
also babel
but if we use create react app this
should
work
right off the bat and basically allow us
to write react native
code with create react app which is very
convenient
alright so we would add that in and then
in addition to our
normal
so basically
instead of our normal react script start
we would have a start for
like react native web
and that would bring up a react native
code in a web browser
and we'd be able to work on it like a
normal react project
at the same time we could also
use react native
to bring up the project
um as an ios app or an android app like
in a simulator or in a connected device
so
for now for the project
we're just going to stick with the web
version because
it obviously my my machine can't even
really handle this but when you try to
open up a simulator like ios simulator
it takes a lot of resources so even if i
had a really good computer it would
still probably mess up the stream so
we're just going to stick with the web
if you'd like
to
do it for as as an app
we can go over that
but i can't really stream that
successfully unless i get a really
awesome computer
so
i think i'm going to start wrapping
things up i'm going to answer a few
questions that i see here and then we're
going to wrap things up for today
i'll try to stream
again
at the very least i'll try to stream
like wednesday morning
with a better setup
uh it's possible that i might be able to
do some weekend streams too
uh if you want to get notified about
that subscribe to this channel free code
camp channel turn on your notifications
you can follow me on twitter infos below
you can follow me on instagram i notify
everyone on instagram and twitter when
i'm about to stream
um i have a lot of pre-recorded videos
if you want to see those you can go to
my youtube channel the links in the
description to this video
uh and
i think we got a react question so john
hanson says
what's the best place to use a switch
statement as a function
inside render or in the return the
switch will load different children
components based on
a state change
okay that's interesting
hmm
if i were doing it
i don't know that i've tried to use a
switch statement inside the render or
not but it seems like inside the render
function would be better
for those of you who aren't familiar
with
what we're talking about this might help
to show
something
if it'll come up
so like when we're talking about the
the render function
i'm sorry the return
so
if it allows it which i'm not sure if if
it would allow it or not to put a switch
statement in the return i've never tried
it
it would make sense
to put it in the return
and just have different things come up
you usually i just use ternaries
inside
the return
and
that that usually works but it could get
complicated if you had a lot of options
um let's see
yeah
john if you end up trying that and it
works let me know i'd really like to see
that because i've never attempted it
before
what i have done before is used a
ternary like out here
and the ternary would
change the state
right then depending on the value of
state it would render things in here so
there would be something like
for this component
it would say something like i don't know
route
let's just call it route
um
we would say right this
state
this state route
and then
i would say like equals
and let's just say
home
okay let's say we have a string of home
and
now we're going to say
um
and and then we'd put a component here
and then what that would do is say okay
if the route equals home we're going to
render this home component and then
you'd wrap each component in something
like this
but the value
of this state route would be different
for each one
then you have your switch statement up
here that changes state
so
that would essentially achieve the same
thing
you would add a bit more code
um but then you wouldn't put a switch
statement in the return
which i know this works i'm not sure if
a switch statement works
that makes sense
has anybody else tried to work with
switch statements in um in the return
all right uh neymar asks what's this for
uh we're working with react native um
it's just a live stream to show
like what is the process is like to code
without rehearsing
and there's there's a lot of mistakes
that happen and like we we just go
through them together
um
we have a question about suggesting a
good es6 through 8 course
um