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 installation and general getting started.
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] so welcome today we are going to be talking about react native and this is just kind of like getting started a quick look at setting up react native and just starting to code mobile apps using react today we are going to cover what is react native why you should consider using react native for your mobile development versus native uh development we're going to basically go through kind of a quick start guide and getting started approach to using react native we're going to look at the basics and basically build a hello world now within this process we're also going to be looking at setting up your environment today primarily we're going to be using a mac ios environment so that i can show you how to use ios so you can actually test your apps with ios and then in future classes i'm going to actually port all of this over to a raspberry pi using linux and then i'll show you how to do all your development using a linux raspberry pi let's start out by talking about what is react native well react native is an open source mobile application framework created by facebook it is used to develop applications for android android tv ios mac os tv os and so on uh it can also be used for windows and uwp by enabling developers to use react's framework along with native platform capabilities so basically this falls along the concepts of typical javascript modules or java where you essentially write one application and then you can deploy deploy it to multiple devices so first we're going to look at what you can and cannot do or really what you should use react native for versus native applications so first let's talk about what react native can do well it can establish a platform independence so react native was initiated excuse me it 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 bundling a native app with a single code base that works on both ios and android platforms next it's readily available reusable components it comes with a built in or built with reusable reusability at its core react native enables you to make use of the plug employee like features corresponding to ios and android this makes the app architecture consistent with the following features responsive ui and ux capabilities web-like style of development as compared to a hybrid framework look speed and feel of the native widgets next we have we can use it for revamped existing code base you can apply the ui components of react native to an app code that already exists this is an added advantage to the business that needs 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 rewriting next we have fast compilation through hot reloading and we'll see this in today's example here 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 edit simultaneously without having to recompile your code base also react native brings the speed and agility of web apps to the hybrid space and with the results of a native app now react native cannot what you really should be looking at uh native apps when you run into these these particular categories not fully scalable for custom modules now here we're talking about where react native has not addressed all of its glitches yet it has also missed it's also missing some of the 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 guarantee certainty well even if facebook has a development framework this is an uncertainty of its performance 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 is so popular and is only gain more popularity over time but again you have to remember this is a third-party tool so if the third party decides to get rid of it you're sol you have to basically go back to native react native is not great at handling complex ui and background processing if your apps are more integration or intensive then react native might not be able to provide the best native experience also apps that require a lot of background processing to work should not be built with react native it is even harder to get that performance benchmark for heavier apps and finally mitigating heavy cpu usage react native works on the interconnected native and javascript modules that combine the power of script combination and provide a native feel to the app the higher process in highly cpu intensive applications and is a major cause of low app performance so when should we really use react native to build our apps well react native should only be used for apps to fit into these categories typically traditional native like apps for cross-platform with lesser views less hardware api access budget apps and apps that require shorter development cycles next let's look at when we really need to build native apps versus react native native apps should be your first choice if you have a budget that supports long-term app development without compromising on specific features for instance fast and heavy calculations multi-threaded processing easy and parallel updates with sdks strong code apps with less bugs and apps with heavy ui and lots of animations now in order to use react native we need some additional resources so i've listed them here so we need react nodejs visual studios code android sdk and xcode now visual studio's code is the only one that's kind of optional in this case because you can really use any uh text editor to edit your code but visual studio's code really seems to be kind of the de facto uh editor for react and react native it's just so easy to use and you'll see that today so let me go over these real quick so you can understand what each of these are so let's start with react so react is an open source front end javascript library for building user interfaces or ui components it is maintained by facebook and a community of individual developers and companies react can be used as a base in the development of single page or mobile applications now in order to install react native and to use some of its command line tools we need to install node.js node.js is an open source cross-platform back-end javascript runtime environment that runs on chrome version 8 engine and executes javascript code outside of a web browser now for our editor like i said we're going to be using visual studio's code and visual studio's code is a free source code editor made by microsoft for windows linux and mac os its features include supporting for debugging syntax highlighting intelligence code compilation snippets code refactoring and embedded get in our case it also has some react and react native libraries that we can use for code editing next we need our android software development environment sdk this is the process by which the applications are created for devices running the android operating system google states that android apps can be written using copeland java and c plus plus languages using the android software development kit while using other languages is also possible now in our case here we aren't going to be using the android sdk for its editor capabilities we need the android sdk for its uh visual emulators so that we can actually run a emulated android device and last we have xcode which is mac only xcode is apple's integrated development environment for mac os it's used to develop software for mac os ios ipad watch os and tv os it was first released in 2003 and the latest stable release is version 12.3 or 14 uh depending upon where you uh which device you have and it's available via the mac app store free of charge for mac os sir users or even for some of the previous versions of mac os right now mac os big sur is the latest and greatest all right with that let's get started with our hands-on demo minimize this [Music] edge all right so the first thing we need to do is we need to get nodes js so we just google nodes.js and we want to go to nodesjs.org and you can download the current or the latest lts that's available for node.js you click the button it will download via the linux or the windows version for your machine you double click and you just follow the install process to install node.js now i've already done this so i'm not going to take you through the steps of these installers but you can if you get stuck you can easily go to the websites and they will walk you through how to set them up it's really straightforward just click continue next and set a destination once installed we want to open up our terminal and type in node to make sure that it is installed now here we will see welcome to node.js and we currently have 14 15 4 installed which is the latest lts version all right ctrl c twice to exit out alright next we want to go to react native we google react native and it is react native.dev and this is the site that you will probably spend most of your time on it has a slew of information not only does it give you steps on how to install the software it also gives you your online documentations for how to use react native it walks you through environment setups which we're going to go through some of these today it also gives you different workflows on how to run on the device we're going to cover a few of these as well also it gives you design recommendations interactions and so on it also gives you the components library so these are all the specific components you can use for building react native apps things like views text adding images adding text inputs scroll views and style adding user interface buttons or switches list views and specific components for android or ios and it also has some other javascript libraries like modals alert boxes status bars and so on and it also has a fast api of code library of things that you can actually use when building your react native applications and if you ever get stuck you can always go out to react community read what's uh some of the latest news or changes that are going on in the community and some of these have uh slack channels and things like that that you can go out to and actually ask questions and get help all right so let's go back over to the documentation and let's go to setting up a device so there are two ways you can actually install react native if you are new to development you want to use the expo command line interface otherwise if you are already have been developing mobile apps for some time you'll want to start with the native cli now starting with the expo versus react native really just kind of simplifies what your project looks like but at any given time if you need a more complex uh or your app gets more complex or you have to do unique integration components with android or ios you can easily convert your expo app into a native cli app for today we're going to focus strictly on expo this gets you started quickly and you can just kind of start diving in and playing around on your local systems so here we're going to go out to our command line and essentially follow these steps go back out to terminal here so the first thing you need to do is once you've installed node you're going to use npm and we're going to install sg xo or export dli and this will take just a minute to install now one thing i'm going to stop this i'm going to redo it because it's going to come back and it's going to yell at me because i'm on a mac and my security settings are very strict so i need to preface this with sudo now you may have the same issue on linux windows is a little more forgiving you should be able to just enter npm from the command line now since i already had this installed it just went ahead and updated one package so that i have the latest version of everything and once it's finished let's make sure that it's there so we'll do npm all right notes there and expo there we go and expo is installed you type npm that checks to make sure nodes install and expo checks to see if expo is installed if it's not you'll get an error command not found you
Transcript Segments
[Music]
so welcome today we are going to be
talking about react native and this is
just kind of like getting started a
quick look at
setting up react native and just
starting to code mobile apps using react
today we are going to cover what is
react native
why you should consider using react
native for your mobile development
versus native
uh development
we're going to basically go through kind
of a quick start guide and getting
started approach to using react native
we're going to look at the basics and
basically build a hello world now within
this process we're also going to be
looking at setting up your environment
today
primarily we're going to be using a mac
ios environment so that i can show you
how to use ios
so you can actually test your apps with
ios and then in future classes i'm going
to actually port all of this over to a
raspberry pi
using linux and then i'll show you how
to do all your development using a linux
raspberry pi
let's start out by talking about what is
react native well react native is an
open source mobile application framework
created by facebook
it is used to develop applications for
android android tv ios mac os tv os and
so on uh it can also be used for windows
and uwp by enabling developers to use
react's framework along with native
platform capabilities so basically this
falls along the concepts of typical
javascript modules or java where you
essentially write one application and
then you can deploy deploy it to
multiple devices
so first we're going to look at what you
can and cannot do
or really what you should use react
native for versus native applications
so first let's talk about what react
native can do
well it can establish a platform
independence so react native was
initiated
excuse me it 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 bundling a native app
with a single code base that works on
both ios and android platforms
next it's readily available reusable
components
it comes with a built in
or built with reusable
reusability at its core
react native enables you to make use of
the plug employee like features
corresponding to ios and android this
makes the app architecture consistent
with the following features
responsive ui
and ux capabilities
web-like style of development as
compared to a hybrid framework
look speed and feel of the native
widgets
next we have we can use it for revamped
existing code base
you can apply the ui components of react
native to an app code that already
exists
this is an added advantage to the
business that needs 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
rewriting
next we have fast compilation through
hot reloading
and we'll see this in today's example
here 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 edit simultaneously
without having to recompile your code
base
also react native brings the speed and
agility of web apps to the hybrid space
and with the results of a native app
now react native
cannot
what you really should be looking at uh
native apps when you run into these
these particular categories
not fully scalable for custom modules
now here we're talking about where react
native has not addressed all of its
glitches yet it has also missed
it's also missing some of the 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
guarantee certainty
well even if facebook has a development
framework this is an uncertainty of its
performance 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 is so popular
and is only gain more popularity over
time but again you have to remember this
is a
third-party tool so if the third party
decides to get rid of it you're sol you
have to basically go back to native
react native
is not great at handling complex ui and
background processing
if your apps are more integration or
intensive then react native might not be
able to provide the best native
experience
also apps that require a lot of
background processing to work should not
be built with react native
it is even harder to get that
performance benchmark for heavier apps
and finally mitigating heavy cpu usage
react native works on the interconnected
native and javascript modules that
combine the power of script combination
and provide a native feel to the app
the higher process in highly cpu
intensive
applications and is a major cause of low
app performance
so when should we
really use react native to build our
apps
well react native should only be used
for apps to fit into these categories
typically traditional native like apps
for cross-platform with lesser views
less hardware api access
budget apps
and apps that require shorter
development cycles
next let's look at when we really need
to build native apps versus react native
native apps should be your first choice
if you have a budget that supports
long-term app development without
compromising on specific features for
instance
fast and heavy calculations
multi-threaded processing
easy and parallel updates with sdks
strong code apps with less bugs
and apps with heavy ui and lots of
animations
now in order to use react native we need
some additional resources
so i've listed them here so we need
react nodejs
visual studios code
android sdk and xcode
now visual studio's code is the only one
that's kind of optional in this case
because you can really use any
uh text editor to edit your code but
visual studio's code really seems to be
kind of the de facto uh editor for react
and react native it's just so easy to
use and you'll see that today
so let me go over these real quick so
you can understand what each of these
are
so let's start with react
so react is an open source front end
javascript library for building user
interfaces or ui components it is
maintained by facebook and a community
of individual developers and companies
react can be used as a base in the
development of single page or mobile
applications
now in order to install react native and
to use some of its command line tools we
need to install node.js
node.js is an open source
cross-platform back-end javascript
runtime environment that runs on chrome
version 8 engine and executes javascript
code outside of a web browser
now for our editor like i said we're
going to be using visual studio's code
and visual studio's code is a free
source code editor made by microsoft for
windows
linux and mac os
its features include supporting for
debugging syntax highlighting
intelligence code compilation snippets
code refactoring and embedded get
in our case it also has some
react and react native libraries that we
can use for code editing
next we need our android software
development environment sdk
this is the process by which
the applications are created for devices
running the android operating system
google states that android apps can be
written using copeland java and c plus
plus languages
using the android software development
kit
while using other languages is also
possible
now in our case here we aren't going to
be using the android sdk for its editor
capabilities we need the android sdk for
its uh visual emulators so that we can
actually run
a emulated android device
and last we have xcode which is mac only
xcode is apple's integrated development
environment for mac os
it's used to develop software for mac os
ios ipad watch os and tv os
it was first released in 2003 and the
latest stable release is version
12.3 or 14
uh
depending upon where you uh
which
device you have
and it's available via the mac app store
free of charge for mac os sir users
or even for
some of the previous versions of mac os
right now mac os big sur is the latest
and greatest
all right with that let's get started
with our hands-on demo
minimize this
[Music]
edge
all right so the first thing we need to
do is we need to get
nodes js so we just google nodes.js
and we want to go to
nodesjs.org
and you can download the current or the
latest
lts
that's available for node.js
you click the button it will download
via the linux or the windows version for
your machine
you double click and you just follow the
install process to install node.js
now i've already done this so i'm not
going to take you through the steps of
these installers but you can if you get
stuck you can easily go to the websites
and they will walk you through how to
set them up it's really straightforward
just click continue next and set a
destination
once installed we want to open up our
terminal
and type in node to make sure that it is
installed now here we will see welcome
to node.js
and we currently have 14 15 4 installed
which is the latest
lts version
all right ctrl c twice to exit out
alright next we want to go to react
native
we google react native and it is react
native.dev
and this is the site that you will
probably spend most of your time on it
has a slew of information not only does
it give you steps on how to install the
software
it also gives you
your online documentations for how to
use react native
it walks you through environment setups
which we're going to go through some of
these today
it also gives you different workflows on
how to run on the device we're going to
cover a few of these as well
also it gives you design
recommendations interactions and so on
it also gives you the components library
so these are all the specific components
you can use for building react native
apps
things like views text adding images
adding text inputs scroll views and
style
adding
user interface buttons or switches
list views and specific components for
android or ios
and it also has some other javascript
libraries like modals alert boxes
status bars and so on
and it also has a fast api of
code library of things that you can
actually use when building your react
native applications
and if you ever get stuck you can always
go out to react community read what's uh
some of the latest
news
or changes that are going on in the
community and some of these have uh
slack channels and things like that that
you can go out to and actually ask
questions and get help
all right so let's go back over to the
documentation and let's go to
setting up a device
so there are two ways you can actually
install
react native if you are new to
development you want to use the expo
command line interface
otherwise if you are already have been
developing mobile apps for some time
you'll want to start with the native cli
now
starting with the expo versus react
native really just kind of simplifies
what your project looks like but at any
given time if you need a more complex
uh or your app gets more complex or you
have to do
unique integration
components with android or ios you can
easily convert your expo app into a
native cli app
for today we're going to focus strictly
on expo this gets you started quickly
and you can just kind of start diving in
and playing around on your local systems
so here we're going to go out to our
command line and essentially follow
these steps
go back out to terminal here
so the first thing you need to do is
once you've installed node you're going
to use npm
and we're going to install
sg
xo or export
dli
and this will take just a minute to
install
now one thing i'm going to stop this i'm
going to redo it because it's going to
come back and it's going to yell at me
because i'm on a mac and my security
settings are very strict so i need to
preface this with sudo
now you may have the same issue on linux
windows is a little more forgiving you
should be able to just enter npm from
the command line
now since i already had this installed
it just went ahead and updated one
package so that i have the latest
version of everything and once it's
finished let's make sure that it's there
so we'll do
npm
all right notes there
and expo
there we go
and expo is installed
you type npm that checks to make sure
nodes install
and expo checks
to see if expo is installed if it's not
you'll get an error command not found
you