REACT
NATIVE
APPLICATION
DEVELOPMENT
“ LEARN ONCE WRITE ANYWHERE “
Introduction
1. React JS 2. React
Native
3. Adobe XD 4.
Restful API
REACT JS
• React is a JavaScript library for
building fast and interactive user
interfaces for the web as well as mobile
applications
• It is open-source, reusable
component-based front-end library
• In a model view controller
architecture, React is the ‘View’ which
is responsible for how the app looks
and feels
Why REACT
??? Easy creation of dynamic web
applications
Performance enhancements
Reusable Components
Unidirectional data flow
Small learning curve
Can also be used for mobile apps
Dedicated tools for easy debugging
How React Works
Search
Compone
nt
Profile
Stories Descriptio
Compone n
nt Compone
nt
Post Lists
Single Compone
Post nt
Compone
nt
REACT NATIVE
What is React Native
• React native is a JavaScript framework
for writing real, natively rendering
mobile applications for IOS and
Android…
1. It’s build by FaceBook
2. Based on React Js
3. Create Android and IOS Apps
4. Not a framework it’s library
React native is a Extension of
React
Environment Set Up
REACT NATIVE
REACT
EXPO - CLI NATIVE - CLI
• React Native CLI requires Xcode or Android Studio to get started.
•• Expo
If you is a set of
already tools
have onebuilt around
of these React
tools Nativeyou should be
installed,
• able
It can get up
to get youandwriting a React
running withinNative app within minutes.
a few minutes.
• IfYouthey are
will notneed
only installed, you version
a recent should expect to spend
of Node.js and aabout
phonean
hour installing and configuring them.
or emulator.
NA RE
LI TI AC
-C VE T
P O -C
EX choco install -y nodejs, install
LI
python2
npm jdk8
install -g expo-cli
npm install Android studio, Android
Sdk
expo init AwesomeProject cd
npx react-native init
AwesomeProject npm start
AwesomeProject
cd AwesomeProject
you can also use: expo start
npx#react-native run-android
Components
• Components are the building blocks of any
React application, and a single app usually
consists of multiple components
• A components is essentially a piece of the
User Interface. It is like a function that
returns HTML elements
• It splits the user interface into independent,
reusable pieces that can be processed
separately
States
• State of a component
is an object that
holds some data
• This data influences
the output of a
component
Props
• Props is short for properties, that allow us to
pass arguments or data to components
• Props are passed to components in the way
similar to that of HTML-tag attributes
AD
OB
EX
• Adobe XD is a vector-based user
D
experience design tool for web
apps and mobile apps, developed
and published by Adobe Inc.
• It is available for macOS and
Windows, although there are
versions for iOS and Android to
help preview the result of work
directly on mobile devices.
RESTFUL API
R E
S T
REST
? • REST stands for
•
POST
REST is just a pattern GET
Representational State Transfer
making APIs and using api you
of
• In simple word rest is an
can access resources.
architecture of restful services
• Like images, posts, videos, text
PUTcontent and so on. DELETE
REST
A service which is built on
architecture is called a RESTful service.
the rest FUL
?
In simple words developer who create api
WH
using rest pattern this pattern or you can say AT?
this api is known as restful api.
It enables web applications that are built on
various programming languages to
communicate with each other.
WH
With the help of RESTful services, these web Y?
applications can reside on different
environments, some could be on Windows and
other could be on Linux
CONCLUSION
React JS has come at a good time helping the
developers to build highly engaging web apps
and user interfaces within quick time.
It allows you to break down the components and
create a single page application with less
coding.
We can develop large scale apps with frequently
changing data.
React native is a framework for building cross-
platform mobile apps to both the iOS App Store
and the Google play store.
