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 focus on getting your code on to a simulator.
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] now if you want to test your application on your mobile device or on a tablet or say another computer you'll need to install the expo app now you can go expo client so you can get the expo client app from ios or android uh on your computers you can do it straight from a browser and i'll show you that a little bit later for android you'll have to go to your android play store and download expo and ios you'll go to the app store to itunes this way because it's not for desktop but it'll look something like this on the app store so expo with the funky looking a with the little half moon there right once you have all that installed close some of these tabs you'll want to install visual studio code and i'll be at code.vigilstudio.com and just click the download link and install it for your local os now i've already done that so i will open up my copy of visual code now once visual studios code is installed we want to install some extensions so that we can actually do react native development so you click the little package icon here the extensions and we want to search for some extensions so you want to search for react and the ones you want are going to be react native tools this one here and you're going to want this one here uh es 7 react redo graphical and let's see what else do i have i have this uh this one here yeah react native so this one uh this one and this one are already installed don't see the install link next to them there install and react there we go so you should have these three extensions installed or in order to use react native then there's a couple other libraries you can install that will make your coding easier so you want code formatter or printer this is pretty cool because what it will do is this will allow us to format our code every time we save our code i'll show you how to set that up in a second and then the other one we want is material icon themes this guy is pretty neat i ran across him uh when i started doing development with react native this allows you to have custom design icons for your mobile application so it kind of gives you an out of the box tool kit that allows you to quickly design icons for your applications all right once your extensions are installed up in our search bar here we can we need to type in the let's see type in form on save and it's not an actual code or extension so it's actually in settings so we open up settings and over here we want to type for format on save there we go so what we want to do here is we want to enable format on save so this is for that printer extension so we check that and then we save and we close our settings and what this will do now is every time we save our code it will automatically format our code so if we don't need to worry about indenting our tabs as we're actually coding alright so that sets up our vigil studios environment so let's start by creating our first application here let me close visual code minimize this and go back out here all right so i'm going to go into my development folder created a react workspace here and let's get rid of my hello world and we'll just recreate all right there we go all right so now we just have a couple react projects in here but we're going to create a new one so to do that at the command line you type expo init and your project name or your application name so in our case we're going to use hello world now it gives you a couple options we can create a template using blank we can create a manage workflow which sets up a pure javascript project without native folders for ios and android and their workflows allows us to set up a project with native folders for ios or android so we can do blank we can do tab we can do minimal or minimal with typescript so in this particular case we're going to do blank i'm going to download the installer and then it's going to install the javascript dependencies and build the project for us take just a second okay i like took a few more seconds there we go now once the project is set up it gives you the steps on what you need to do in order to edit your project and to run your project so first let's go into our project directory because we are still in the root so we need to go cd hello world and in here we have our files for our project now we we don't necessarily want to do everything from the command line so we can type in code dot and this will open up visual code to our current folder so here we go we have hello world and here is our project structure so we have our assets folder here this contains all of your images videos uh specific files anything that you essentially want to wrap within your application within your mobile app and then our apps.js is the essentially your running file this is what gets kicked off when you run your app so let's look at how we actually start our application by kicking off expo and then look at configuring our environment so that we can actually see the app run in both ios and android so the first thing we want to do is we want to go to file uh terminal so within xcode or within visual code we can actually run our terminal so we don't have to keep jumping back and forth anymore from visual studio and our terminal window so we can do all of our work now from within visual code all right so we have terminal and if we do new terminal it opens this up right into our hello world folder so we don't have to go digging around for this in our environment now in our terminal let's type mnpm start and this will start expo so it started our project now if we want to look at our development tools we can load localhost into our browser if i open up edge put in localhost 1902 so here is our dev management tool so we can actually see all the what's going on with our application within expo come back to that oh yeah one other thing to mention about that so this application it it's loaded this is actually called the metro bundler uh over here so this is kind of telling you what is running within expo uh this is the javascript bundler for react native now if you're on a mac you can actually download the debug tools the react native debugger and you'll see this as well within the app take a minute to open this is also responsible for compiling all of your javascript files into a single file it starts the app as either ios android or a web browser it sends a link to test the app via email and it allows you to publish or republish your project so as you see here you have the little qr code which you could take a picture of on your phone and then you could actually test this app directly from your phone you could run this in a web browser by clicking the button open up here browser and open up a browser and you can also kick off the ios or android these are the same commands that you see here so here's our app running in a browser now if we go back over here to our terminal window we can hit i to open up ios we can go to our browser you can go back into our metro here we could also click run on ios simulator as you can see it's doing the same thing here opening on iphone x and opening on iphone x so everything you see in the terminal here is also displayed here in your metro bundler now if i try to run on android we got the error message that our android device is not set up yet and i'll walk you through doing that in just a second now before we talk about android since i am on a mac let's start by looking at how to set up an ios simulator now i've already done this so because i did click start on ios we will see the emulator start up momentarily but let's walk through how to actually configure for a different emulator so we want to first start up xcode now once xcode is loaded you want to go down to open development tools and go to simulator one other thing you will need not just simulator is uh if we go back over here to xcode other development tools more developer tools when xcode installs out of the get go it doesn't always install the command line tools for your local environment so you'll have to actually go out to the apple developer website and actually look for the command line tools for xcode you'll select the latest version for your version of xcode click the little plus and then click the command line tools and download now since xcode is only available for mac you only need to do this if you're on a mac once you download it then the simulator will work if you try to run the simulator first xcode will fail because it can't communicate with the simulator without this tool here all right so let's go back over here xcode simulator now simulator is open it's already deployed our app but up here we can go and do file new simulator and we can then go pick the device that we want to test so we can do anything from watch tv ipads or iphones so say i want to do an iphone 12 pro max and by selecting the device it will automatically use that device name for your name if you don't enter in anything and then you can also change your os versions now by default xcode will always be loaded with the latest ios tv os or watch os if you need to test your simulator on an older version of the ios you will need to actually download that sdk for that particular device so we'll create this one as you can see i'm currently running the iphone x so let's change this to the iphone 12 pro max we'll create this guy close the iphone x now if i do file open simulator ios 14 3 i can select my iphone 12 pro max and that'll take a minute to start you
Transcript Segments
[Music]
now if you want to test
your application on your mobile device
or on a tablet or say another computer
you'll need to install the expo app
now you can go
expo client
so you can get the expo client app from
ios or android
uh on your computers you can do it
straight from a browser and i'll show
you that a little bit later
for android you'll have to go to your
android play store and download expo
and ios you'll go to the
app store to itunes
this way because it's not for desktop
but it'll look something like this on
the app store so expo with the funky
looking a with the little
half moon there
right once you have all that installed
close some of these tabs
you'll want to install visual studio
code
and i'll be at code.vigilstudio.com
and just click the download link and
install it for your local os
now i've already done that so i will
open up my copy of visual
code
now once
visual studios
code is installed
we want to install some extensions so
that we can actually do react native
development so you click the little
package icon here the extensions
and we want to search for some
extensions so you want to search for
react
and the ones you want are going to be
react native tools this one here
and you're going to want this one here
uh
es
7 react redo graphical
and let's see what else do i have i have
this uh this one here yeah react native
so this one
uh this one
and this one
are already installed
don't see the install link next to them
there install
and react
there we go so you should have these
three
extensions installed or in order to use
react native
then
there's a couple other libraries you can
install that will make your coding
easier so you want code
formatter or printer
this is pretty cool because what it will
do is this will allow us to
format our code every time we save our
code i'll show you how to set that up in
a second and then the other one we want
is
material icon themes this guy is pretty
neat i ran across him uh when i started
doing development with react native this
allows you to have custom design icons
for your mobile application so it kind
of gives you an out of the box tool kit
that allows you to quickly design icons
for your applications
all right once your extensions are
installed
up in our search
bar here we can we need to type in
the
let's see
type in form
on save
and
it's not an actual code or extension so
it's actually in settings so we open up
settings
and over here
we want to type for
format on
save
there we go so what we want to do here
is we want to enable format on save so
this is for that printer extension
so we check that and then we save and we
close our settings
and what this will do now is every time
we save our code it will automatically
format our code so if we don't need to
worry about indenting our tabs as we're
actually coding
alright so that sets up our vigil
studios environment
so let's start by creating our first
application here
let me close visual code
minimize this and go back out here
all right so i'm going to go into my
development folder
created a react workspace here
and let's
get rid of my
hello world and we'll just recreate
all right
there we go
all right
so now we just have a couple react
projects in here but we're going to
create a new one so to do that
at the command line you type expo
init
and your project name or your
application name so in our case we're
going to use hello world
now it gives you a couple options
we can
create a template using blank
we can
create a manage workflow which sets up a
pure javascript project without native
folders for ios and android
and
their workflows allows us to set up a
project with native folders for ios or
android so we can do blank we can do tab
we can do minimal or minimal with
typescript so in this particular case
we're going to do blank
i'm going to download
the installer and then it's going to
install the javascript dependencies and
build the project for us
take just a second
okay i like took a few more seconds
there we go
now once the project is
set up it gives you the steps on what
you need to do in order to edit your
project and to run your project so first
let's go into our project directory
because we are still in the root
so we need to go cd
hello world
and in here we have our files for our
project
now
we
we don't necessarily want to do
everything from the command line
so we can type in code
dot and this will open up visual code to
our current
folder
so here we go we have hello world
and here is our project structure
so we have our assets folder here
this contains all of your images videos
uh specific files
anything that you essentially want to
wrap within your application within your
mobile app
and then our apps.js is the essentially
your running file this is what gets
kicked off when you run your app
so let's look at how we actually start
our application
by kicking off expo and then look at
configuring
our environment so that we can actually
see the app run in both ios and android
so the first thing we want to do is we
want to
go to file
uh
terminal so within xcode or within
visual code we can actually run our
terminal so we don't have to keep
jumping back and forth anymore
from
visual studio and our terminal window so
we can do all of our work now from
within
visual code
all right so we have terminal
and if we do new terminal it opens this
up right into our hello world folder so
we don't have to go digging around for
this in our environment
now in our terminal let's type mnpm
start and this will start expo
so it started our project now if we want
to look at our development tools
we can load localhost
into our browser
if i open up
edge
put in localhost 1902 so here is our
dev management tool so we can actually
see
all the what's going on with our
application within expo
come back to that
oh yeah one other thing to mention about
that so this application it
it's loaded this is actually called the
metro bundler uh over here so this is
kind of telling you what is running
within expo
uh this is the javascript bundler for
react native
now if you're on
a mac you can actually download the
debug tools
the react native debugger
and you'll see
this as well
within the app
take a minute to open
this is also responsible for compiling
all of your javascript files into a
single file
it starts the app as either ios android
or a web browser
it sends a link to test the app via
email and it allows you to publish or
republish your project so as you see
here
you have the
little qr code which you could take a
picture of on your phone and then you
could actually test this app directly
from your phone
you could run this in a web browser by
clicking the button
open up here browser
and open up a browser
and you can also kick off the ios or
android these are the same commands
that you see here
so here's our app running in a browser
now if we go back over here
to our terminal window we can hit i
to open up ios
we can go
to our
browser
you can go back into our metro here we
could also click run on ios simulator
as you can see it's doing the same thing
here opening on iphone x
and opening on iphone x so everything
you see in the terminal here
is also displayed here in your metro
bundler
now if i try to run on android we got
the error message that our android
device is not set up yet and i'll walk
you through doing that in just a second
now before we talk about android since i
am on a mac let's start by looking at
how to set up an ios simulator
now i've already done this so because i
did click start on ios we will see the
emulator start up momentarily
but
let's walk through how to actually
configure for a different
emulator
so we want to first start up xcode
now once xcode is loaded you want to go
down
to open development tools and go to
simulator
one other thing you will need not just
simulator is uh if we go back over here
to
xcode
other development tools more developer
tools
when xcode installs
out of the get go it doesn't always
install the command line tools for your
local environment so you'll have to
actually go out to the apple developer
website
and actually look for the command line
tools for xcode
you'll select the latest version for
your version of xcode
click the little plus and then click the
command line tools and download
now since xcode is only available for
mac you only need to do this if you're
on a mac
once you download it then the simulator
will work if you try to run the
simulator first xcode will fail because
it can't communicate with the simulator
without this tool here
all right so let's go back over here
xcode
simulator
now
simulator is open it's already deployed
our app but up here we can go and do
file new simulator
and we can then go pick the
device that we want to test
so we can do anything from watch tv
ipads or iphones so say i want to do an
iphone
12 pro max
and
by selecting the device it will
automatically use that device name for
your name if you don't enter in anything
and then you can also change your os
versions now by default
xcode will always be loaded with the
latest ios tv os or watch os
if you need to test your simulator on an
older version of the ios you will need
to actually download that sdk for that
particular device
so we'll create this one
as you can see i'm currently running the
iphone x so let's change this to the
iphone 12 pro max
we'll create this guy
close the iphone x
now if i do file open simulator
ios 14 3
i can select my iphone 12 pro max
and that'll take a minute to start
you