INTRODUCTION TO
REACT NATIVE
WHAT IS REACT NATIVE?
▰
React native is a framework for building native Apps for iOS and
Android using JavaScript
▰
If you are familiar with JavaScript, you can use your skills to develop
real native Apps for iOS and Android
▰
The React Native Apps are truly native; they are not web Apps that
look like a mobile App
▰
In React Native, you don’t need to know iOS or Android programming
unless you want to build a very complex App that targets directly with
the native API of the platform
1
WHAT IS REACT NATIVE?
JavaScript
▰
A lot of companies these today prefer to build their Apps using react
native; because they don’t need to hire two different developers
maintaining two different code bases—one for Android and one for
iOS
2
APPS BUILT IN REACT NATIVE?
3
WAYS TO BUILD REACT NATIVE APP
Expo CLI
React Native CLI
4
Expo
▰
Expo is a set of tools and a framework that sits on top of react native
and hides a lot of complexity from us
▰
Expo makes react native development way faster and easier
5
REACT NATIVE CLI
▰
The other option that we can develop a react native app is by using
CLI command-line
▰
The process is more suitable for people who have a solid background
with Android and iOS development
▰
If you don’t have a prior knowledge about developing Android and iOS,
Expo is very good way to begin with
6
1
Installing Prerequisite
REACT NATIVE
7
Installing Node
Install Node.js
Check Node Version
Check npm
Node helps you to run
JavaScript on your
computer.
It’s recommended that
you are running node
version 12 or higher.
Node also installs npm;
which is node package
manager.
Node -v
Npm is a repository
code that other people
have worked on. To
check run the
command (npm –v)
https://nodejs.org/en/
8
2
Setting up the Development
Environment
REACT NATIVE
9
Setting up the Environment
Install Expo CLI
Globally
Go to the directory
you want to install
your project
Run the below command
Example:
npm install -g expo-cli
C:\Users\PC\ReacNative Projects
Create Project
run the following commands to
create a new React Native project
called "AwesomeProject":
expo init MyApp
cd AwesomeProject
npm start # you can also use: expo star
11
Open Project with VS-Code
▰
After creating the project you can use the command below to open in
visual studio code
C:\Users\PC\ReacNative Projects\MyApp> code .
6
INSTRUCTIONS FOR USE
13
VS-Code Extensions
7
Unrestricting Expo
▰ Run the command below to unrestrict the
expo
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy unrestricted
15