Detailed Notes
Started Using React Native For Your Mobile Applications begins our new segment on React-Native. In this introductory episode we begin our journey by looking at what React Native is and why you should consider React Native for Mobile Development. Followed by a complete hands on session covering everything you need to get started, environments setup, libraries, etc. Once we're done with the setup we jump right into what you need to begin writing your first application.
In this episode, we wrap up the getting started series and prepare for delving deeper into these tools.
What is React-Native
React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use React's framework along with native platform capabilities.
What React Native Can Do? 1. Establishes Platform Independence
React Native was initially developed by Facebook to sustain iOS. However, it now supports all the methods specific to the Android operating system. So, it’s just like building a native app with a single codebase that works on both iOS and Android platforms.
2. Readily Available Reusable Components
Built with re-usability at its core, React Native enables you to make use of plug and play like features corresponding to iOS and Android. This makes the app architecture consistent with the following features:
Responsive UI and UX Web-like style of development as compared to hybrid frameworks Look, speed and feel of the native widgets 3. Revamp Existing Code
You can apply the UI components of React Native to an app code that already exists. This is an added advantage to businesses that need to supplement an app that exists but do not want to rebuild it. Embedding React Native UI components is a quick process and does not require re-writing.
4. Fast Compilation Through Hot Reloading
JavaScript is one of the fastest programming languages. It introduces another unique concept of Hot Reloading to provide better development experience. This feature combines the small compilation time of JavaScript and other capabilities. That means, you can make edits simultaneously without having to recompile it altogether. React Native brings the speed and agility of web app to the hybrid space and with the results of a native app.
What React Native Can’t Do? 1. Not Fully Scaled for Custom Modules
React Native has not addressed all its glitches. It also has missing custom modules which may take a lot of your time to build as well as to create modules of your own. You will require a specialized developer to address the technical challenges and bugs from time to time.
2. Guarantee Certainty
Even if Facebook has a developed framework, there is an uncertainty of its permanence because it still has the rights to do away with the project at any time. However, this is not likely to occur because of the technology popularity it has gained with time.
3. Handling Complex UI and Background Processing
If your apps are more interaction-intensive, then React Native might not be able to provide the best native experience. Also, apps that require a lot of background processes to work should not be built with React Native. It is even harder to get that performance benchmark for heavier apps.
4. Mitigate Heavy CPU Usage
React Native works on the interconnected Native and JavaScript modules that combine the power of script compilation and provide a native feel to the app. This process is highly CPU intensive and is a major cause of low app performance.
When To Started Using React Native Apps React Native should only be used for apps that fit into these categories: Traditional native-like apps for cross platforms with lesser views Less Hardware API access Budget apps Apps that require short development cycle When To Build Native Apps
Native apps should be your first choice if you have a budget that supports long term app development without compromising on specific features like:
Faster and heavy calculations Multi-threaded processes Easy and parallel updates with SDKs Strongly coded app with less bugs Apps with heavy UI and a lot of animations
Additional Resources React - https://reactjs.org/ Node - https://nodejs.org/en/ Visual Studio Code - https://code.visualstudio.com/ Android Development - https://developer.android.com/studio Xcode - https://apps.apple.com/us/app/xcode/id497799835?mt=12
Transcript Text
[Music] all right that's going to take a minute to load and we'll come back to kicking that off in a minute so now let's look at setting up the android sdk so we need to first go out to the android sdk which will be [Music] developer.android.com so you want to install android studios so you click the button download android studios and it'll look like something like this once you install it so once it's installed you'll start up android studio and roll that guy's starting up we'll jump back over here to our metro bundle for a moment so we have our metro we're going to close our old iphone x get rid of that guy and we're going to run on an ios simulator it may go back to iphone x because it wasn't already loaded yep okay so we should see iphone x open again let's see android oh there's iphone x we'll close code some of these again there we are okay so we have android studio open once it opens we need to go to the configure option down here the first thing you want to do is select the sdk manager and the sdk manager tells you the different software development kits that are installed so you want to make sure that you have the android 11 or the latest android version of the software install then you want to go to the sdk tools tab here and then you want to make sure that you have the android sdk build tools selected the android emulator the android sdk platform tools android sdk tools and if you're in an intel base or testing an intel based emulator you want to also check the intel x86 emulator now if you have the new macbook pros with the m1 chip you need to do one additional step here you need to go to the sdk update sites make sure that all these are installed then click ok now when we go to actually configure our device the we need to go to configure the avd manager tab or manager button here and this gives us our virtual devices now because i am on an m1 mac i need to create a new virtual device we want a mobile device with the play store so we can install expo on our mobile device so we'll take pixel 4 next we want to install the uh android operating system now if you're on an intel based uh an intel based mac or an intel based windows machine you want to install the x86 operating system however if you're on linux or an arm based uh laptop you want to go to other images and make sure you install the arm 64-v8 a operating system if you do not do this you will not be able to run the emulator on your machine click next give it a name you can start it by landscape or portrait i just leave it as the defaults so here we have a pixel 4 phone with the our android arm build so arm is for the linux or the m1 max click finish once it's set up click run to make sure your email alert and here we now have our android emulator running now i can close out of my android studios let the android emulator start up and now if i go back to metro it's over here room now if i click run on android emulators it's going to install expo and load our application now one step i did leave out is uh on mac and windows you'll need to make sure that your environment is set up correctly to actually use the android emulator to do that you can go out to terminal or command on windows and you want to enter or edit the environment path so on mac i need to go to my profile directory and we need to edit our zbash the rc and we need to make sure that we add the path export android sdk and use the path that was provided in the android software and then we also need to add not only android sdk but add to the path users your library the android and sdk without this metro will throw an error again saying you cannot find the sdks now once expo is installed for the first time you get this wonderful little uh kind of welcome menu here and what this is telling you is this will tell you how to use the expo software on your virtual device or your mobile device so if you're actually on your physical device you just have to shake the device and it will pull up this little menu here so you can go to projects search you can share with people great start running it again there it goes so now we have our application running on android and ios and if we wanted to test our application on a physical device we could scan this code here with our phone app and then you will see expo install on your device and you will see this live on your physical device or in your browser so if we want to make changes to the project we need to go back into code and here is the text that's currently being displayed open up app.js to start working on your app so here it is in ios minimize this guide just a little bit and let's do the same thing for android app now let's change our text here be hello world and save and it is immediately deployed to ios and android are you not redeploy that back to android there it goes so now you see we have it on hello world hello world and if we go look at our web hello world so it's real time testing real-time development so as your make changes and save it immediately updates all your devices now if you have any problems you can go back out to metro and you can republish the project which will re install the application to all the devices sometimes you have to do that if the device gets hung up or as you saw every now and then expo kind of flaked out on me on the android emulator so this is just kind of a quick how-to on how to get going with react native now for debugging purposes because it can be deployed in a web browser you essentially can use your development environments in your browser to actually debug your application you can bring up your chrome uh development tools here and you can debug your app this way or you can load that react native debugger which is a standalone debugger without needing the browser window open like this so it's a little uh less memory intensive and more debug friendly uh than the browser sometimes so with that i'll back up my slides so does anyone have any questions um are you gonna he had a bunch of links are you gonna include that in the i guess the notes as you go through this or is it in the slides uh it's in the slides um right here and it will also be well and it will also be in the uh the blog when i do when i publish it okay especially because some of those things like the uh like expo and some of those kinds of things were um especially as you got into the plug-ins and things like that that may be useful to well it's actually funny because the um the plugins the expo mainly for your device um like if you actually were to scan that qr code your phone would come up and it would if you don't have expo installed it should take you to the expo app or it will give you the link saying that you need expo they really made it pretty straightforward and as you saw i didn't even have to install it in the play store earlier versions of this you had to actually physically go into the emulator go into the play store and actually download expo first uh but it's getting to be where it's pretty streamlined now yeah it seems like uh yeah react in particular has changed a lot uh there's a lot of work going on there so it changes fairly regularly and and does seem to be getting better on a on a regular basis as well so okay yeah because that's part of us it's just a it is one of those at the it's a little bit feels like drinking from the fire hose to get it set up but of course once you get going then it's you know pretty straightforward so cool right and like i said this is just a quick start getting you started um and i'll have some additional courses on actually getting in adding components doing debugging things of that nature so this is just strictly uh getting started getting your environment set up and uh yeah i'll add the link to the expo as well it's on that main site that i showed you for react as well actually i think it's so i think if i copy that ah yeah so you have to actually do this inside of expo nice shake i shake it and go to home so there's so as you let me make this a little bit bigger here so when you copy that qr code or you copy this link if you do the qr code what's cool about that is if expo is not installed it will then take you to the app store and have you download expo if you already have expo installed you can then add a project and paste in the link or type in the link that is over here the exp19216 and then you can put it in your project so what's cool about this though is you can actually have expo running multiple applications so you can actually test different apps simultaneously not really the greatest idea but if you're just doing qa or testing it's actually a very if you're a tester it's it makes it easy for you to jump back and forth between apps without having to reload the app time and time again so react is strictly for mobile apps isn't it only can it be used for let me say a regular software development or something like that well no native can be used for web apps as well because this is a web page okay so here we have it on a web and on um an android phone and an iphone and i could even do it for uh apple tv i could do it for pretty much almost any mobile type or ios device and android device questions any other questions so is this something that has been around for some time i mean i've heard about react and and the only thing i saw that you didn't download was an angular probably because i've gone through a process like this downloading visual code or something like that so i was wondering whether react has been around all the native react native reacts been around for a while uh react uh that's here so react has been around oh probably have the actual date on here it's been around for quite a while uh react native uh facebook uh added on to that i probably say what what do you think rob maybe a couple years now three four years yeah i don't remember because it started to me because i was not really in react initially um and didn't really i mean it was just stuff that i saw buzz about it and i just it was somewhere along the way where it became react native it has to have been at least i think back at least three or four years ago um and it's probably still there a good deal before that i mean react is still there i mean react is still used for oh yeah it's it's used a lot i've i've used uh react in several little projects here and there as well as react native it's just react native is just a um a piece on top of it i guess that's probably not exactly correct but um there's a reaction used in a lot of places uh not necessary not react native but actual react is used uh i think sharepoint uses it pretty extensively um and there's several other platforms like that where react is has sort of become the uh i guess the javascript of choice uh and it is a it is um you know once you get into and we'll see that i think in in future uh of these types of uh sessions and tutorials is it actually is a pretty powerful and maybe not necessarily the cleanest it's maybe not as formal as like you know if you come from a c-sharp or c-plus plus or java background but it's still it's a it's a pretty solid language it's got a lot of contributors and um as far as i can tell for the most part i'm sorry go ahead i was just gonna say for that i'll stop my verbal rant here a little whatever but as far as i can tell the stuff that you learn as part of react transfers very easily over to react native and vice versa the tools are a little different but they are you know definitely very very much in the same line well react native is pretty much built on top of react so it's kind of like c and c plus plus so it's like a bunch of mobile libraries built on top of the core so if you know react you'll have no problem doing react native and kind of vice versa the only difference is you'll have different apis going backwards to react um you'll be doing things just a little bit differently than you would with react native yeah you've got a little bit yeah it's like it's yeah it's probably very much like a a c plus plus and c kind of thing is where there's going to be slightly different um libraries that you have available and things like that but but a lot of them they will work for both so it does make it like i said it tends to be a pretty smooth transition from one to the other and uh for people that i know that have done that are you know quote react developers and have done react native as well uh it does seem that it's pretty uh pretty seamless transition the difference being what you would expect which would be things like if i'm building a web application i have very different resources available from a mobile application and vice versa yeah it looks like react native maybe it's been around for six years but like the updated copyright like two years ago so yeah i would probably say it's probably become very popular in the last two to three years i mean again it was probably more for facebook internal use and then once they figured out it was uh they got most of the bugs worked out they probably opened it up to the public all right any other questions with that so today we went over what is react we looked at the different uh things that you can use react for versus native development we also kind of walked through a quick start guide on how to set up your environments and get react native working for you locally so that you can actually start getting your hands dirty and developing mobile apps we covered some of the quick basics and we did our hello world and as always we would like to thank you for joining us we appreciate your time and if you'd like to discuss any of these topics further or any of our other topics from our other classes you can send us questions comments or suggestions through any of these methods you can reach us via email at info developernerd.com you can reach us on our webpage at developernerd.com contact us we now have a youtube page at youtube.com slash channel and this gobbledygook here and vimeo we're also on vimeo.com developer our goal is making every developer better have a great day [Music] you
Transcript Segments
[Music]
all right that's going to take a minute
to load and
we'll come back to kicking that off in a
minute
so now let's look at setting up the
android sdk
so we need to first
go out to
the android
sdk which will be
[Music]
developer.android.com
so you want to install android studios
so you click the button download android
studios and it'll look like something
like this once you install it
so once it's installed you'll start up
android studio
and roll that guy's starting up
we'll jump back over here to our metro
bundle for a moment
so we have our metro we're going to
close
our old iphone x
get rid of that guy
and we're going to run on an ios
simulator
it may go back to iphone x because it
wasn't already loaded
yep okay
so we should see iphone x open again
let's see android
oh there's iphone x
we'll
close code
some of these
again
there we are
okay so we have android studio open
once it opens we need to go to the
configure
option down here
the first thing you want to do is select
the sdk manager
and the sdk manager
tells you the different
software development kits that are
installed
so you want to make sure that you have
the android 11 or the latest android
version of the software install
then you want to go to the sdk tools tab
here
and then you want to make sure that you
have the android sdk build tools
selected
the android emulator
the android sdk platform tools
android sdk tools
and if you're in an intel base or
testing an intel based emulator you want
to also check the intel x86 emulator
now if you have the new macbook pros
with the m1 chip you need to do one
additional step here you need to go to
the sdk update sites make sure that all
these are installed
then click ok
now when we go to actually configure our
device the we need to go to configure
the avd manager tab or manager button
here
and this gives us our virtual devices
now
because i am on an m1
mac
i need to create a new virtual device
we want a
mobile device with the play store so we
can install expo on our mobile device
so we'll take pixel 4
next
we want to install
the uh
android operating system
now if you're on an intel based
uh
an intel based mac or an intel based
windows machine you want to install the
x86 operating system
however if you're on linux or an arm
based
uh
laptop
you want to go to other images and make
sure you install the arm 64-v8
a
operating system if you do not do this
you will not be able to run the emulator
on your machine
click next
give it a name
you can start it by landscape or
portrait i just leave it as the defaults
so here we have a pixel 4 phone with the
our android
arm build so arm is for the linux or the
m1 max
click finish
once it's set up click run to make sure
your email
alert
and here we now have our android
emulator running
now i can close
out of my android studios
let the android emulator start up
and now if i go back to metro
it's over here
room
now if i click run on android emulators
it's going to install expo and load our
application
now one step i did leave out
is
uh on mac and windows you'll need to
make sure that your environment is set
up
correctly to actually use the android
emulator
to do that
you can go out to terminal
or command on windows
and you want to enter or edit the
environment path
so on mac
i need to go to my
profile directory and we need to edit
our zbash
the
rc
and we need to make sure that we add the
path
export android sdk
and use the path that was provided in
the android software
and then we also need to add not only
android sdk but add to the path
users
your library
the android and sdk
without this
metro will throw an error again saying
you cannot find the sdks
now once expo is installed for the first
time you get this wonderful little uh
kind of welcome
menu here and what this is telling you
is this will tell you how to use the
expo software on your virtual device or
your mobile device so if you're actually
on your physical device
you just have to shake the device and it
will pull up
this
little menu here so you can go to
projects
search you can share with people
great
start running it again
there it goes
so now we have our application running
on android and ios
and if we wanted to test our application
on a physical device we could scan this
code here with our phone app and then
you will see expo install on your device
and you will see this live on your
physical device
or in your browser
so if we want to make changes to the
project we need to go back into
code
and here
is the text that's currently being
displayed open up app.js to start
working on your app so here it is in ios
minimize this guide just a little bit
and let's do the same thing
for android app
now let's change our text here
be hello world
and save
and it is immediately deployed to ios
and android
are you not
redeploy that back to android
there it goes so now you see we have it
on hello world
hello world
and if we go look at our web hello world
so it's real time
testing real-time development so as your
make changes
and save it immediately updates all your
devices
now if you have any problems you can go
back out to metro
and you can republish the project which
will re
install the application to all the
devices sometimes you have to do that if
the device gets hung up or as you saw
every now and then expo kind of flaked
out on me on the android emulator
so this is just kind of a quick how-to
on how to get going with
react native now for debugging purposes
because it can be deployed in a web
browser you essentially can use your
development environments in your browser
to actually debug
your application
you can bring up your chrome uh
development
tools here and you can debug your app
this way
or
you can
load
that react native debugger which is a
standalone debugger without needing the
browser window open like this so it's a
little uh
less memory intensive and more debug
friendly uh than the browser sometimes
so with that
i'll back up my slides
so does anyone have any questions
um are you gonna
he had a bunch of links are you gonna
include that in the
i guess the notes as you
go through this or
is it in the slides
uh it's in the slides um
right here
and it will also be
well and it will also be in the uh the
blog when i do when i publish it okay
especially because some of those things
like the uh like expo and some of those
kinds of things were
um especially as you got into the
plug-ins and things like that that may
be useful to
well it's actually funny
because the um
the plugins the expo
mainly for your device
um
like if you actually
were to scan that qr code
your phone would come up and it would if
you don't have expo installed it should
take you to the expo app
or it will give you the link saying that
you need expo they really made it pretty
straightforward and as you saw
i didn't even have to install it in the
play store
earlier versions of this you had to
actually physically go into the emulator
go into the play store and actually
download expo first uh but it's getting
to be where it's pretty streamlined now
yeah it seems like uh yeah react in
particular has changed a lot uh there's
a lot of work going on there so it
changes fairly regularly and and does
seem to be getting better on a on a
regular basis as well so
okay yeah because that's part of us it's
just a
it is one of those at the it's
a little bit feels like drinking from
the fire hose to get it set up but of
course once you get going then it's you
know pretty straightforward so cool
right and like i said this is just a
quick start getting you started
um and i'll have some additional courses
on actually getting in adding components
doing debugging things of that nature so
this is just strictly
uh getting started getting your
environment set up and uh yeah i'll add
the link to the expo as well
it's on that main site that i showed you
for react as well
actually i think it's
so i think if i copy that
ah yeah so you have to actually do this
inside of expo
nice
shake
i shake it
and
go to home
so there's
so as you let me make this a little bit
bigger here
so when you copy that qr code or you
copy this link
if you do the qr code what's cool about
that is if expo is not installed it will
then take you to the app store
and
have you download expo
if you already have expo installed you
can then
add a project
and paste in the link
or type in the link that
is over here the
exp19216
and then you can put it in your project
so what's cool about this though is you
can actually have expo running multiple
applications so you can actually test
different apps simultaneously
not really the greatest idea but if
you're
just doing qa or testing it's actually a
very if you're a tester it's
it makes it easy for you to jump back
and forth between apps without having to
reload the app time and time again
so react is strictly for mobile apps
isn't it only can it be used for let me
say a regular
software development or something like
that
well no native can be used for web apps
as well because this is a web page
okay so here we have it on a web
and on um an android phone and an iphone
and i could even do it for uh apple tv i
could do it for
pretty much almost any mobile type or
ios device
and android device
questions any other questions
so is this something that has been
around for some time i mean i've heard
about react and
and
the only thing i saw that you didn't
download was an angular probably
because i've gone through a process like
this downloading visual code or
something like that
so i was wondering whether react has
been around all the native react native
reacts been around for a while uh
react uh
that's here
so react has been around oh probably
have the actual date on here it's been
around for quite a while
uh react native uh facebook uh added on
to that i probably say what what do you
think rob maybe a couple years now three
four years
yeah i don't remember
because it started to me because i was
not really in react initially
um
and didn't really i mean it was just
stuff that i saw buzz about it
and i just it was somewhere along the
way where it became react native it has
to have been at least
i think back at least three or four
years ago um and it's probably still
there a good deal before that
i mean
react is still there i mean react is
still used for
oh yeah it's it's used
a lot i've i've used uh react in several
little projects here and there
as well as react native it's just react
native is just a um
a piece on top of it i guess that's
probably not exactly correct but
um
there's a reaction used in a lot of
places uh not necessary not react native
but actual react is used
uh i think sharepoint uses it pretty
extensively
um and there's several other platforms
like that where react is
has sort of become the uh i guess the
javascript of choice
uh and it is a it is um
you know once you get into and we'll see
that i think in in future
uh of these
types of uh sessions and tutorials is it
actually is a pretty powerful
and
maybe not necessarily the cleanest it's
maybe not as formal as like you know if
you come from a c-sharp or c-plus plus
or java background but it's still it's a
it's a pretty solid language it's got a
lot of contributors
and um
as far as i can tell
for the most part
i'm sorry go ahead i was just gonna say
for that
i'll stop my
verbal rant here a little whatever but
as far as i can tell the stuff that you
learn
as part of react transfers very easily
over to react native and vice versa the
tools are a little different but they
are you know definitely very
very much in the same line
well react native is pretty much built
on top of react so it's kind of like c
and c plus plus so it's like a bunch of
mobile libraries built on top of the
core
so if you know react you'll have no
problem doing react native and kind of
vice versa the only difference is you'll
have different apis going backwards to
react
um
you'll be doing things just a little bit
differently than you would with react
native
yeah
you've got a little bit yeah it's like
it's yeah it's probably very much like a
a c plus plus and c kind of thing is
where there's going to be slightly
different
um libraries that you have available and
things like that but but a lot of them
they will work for both so it does make
it
like i said it tends to be a pretty
smooth transition from one to the other
and uh for people that i know that have
done that are you know quote react
developers and have done react native as
well
uh it does seem that it's pretty
uh pretty seamless transition the
difference being what you would expect
which would be things like if i'm
building a web application i have very
different
resources available from a mobile
application and vice versa
yeah it looks like react native maybe
it's been around for six years
but like the updated copyright like two
years ago so
yeah i would probably say it's probably
become very popular in the last two to
three years
i mean again it was probably more for
facebook internal use and then once they
figured out it was uh
they got most of the bugs worked out
they probably opened it up to the public
all right any other questions
with that
so today we
went over what is react we looked at the
different uh things that you can use
react for versus
native development
we also kind of walked through a quick
start guide on how to set up your
environments
and get
react native working for you locally so
that you can actually start getting your
hands dirty and developing mobile apps
we covered some of the quick basics and
we did our hello world
and as always we would like to thank you
for joining us we appreciate your time
and if you'd like to discuss any of
these topics further or any of our other
topics from our other classes you can
send us questions comments or
suggestions through any of these methods
you can reach us via email at info
developernerd.com
you can reach us on our webpage at
developernerd.com contact us we now have
a youtube page at youtube.com slash
channel and this gobbledygook here
and vimeo we're also on vimeo.com
developer
our goal is making every developer
better have a great day
[Music]
you