SlideShare a Scribd company logo
INTRO TO REACT NATIVE
WHAT IS REACT ?
React is a declarative, efficient, and flexible JavaScript library for
building user interfaces. It lets you compose complex UIs from small
and isolated pieces of code called “components”.
WHAT IS REACT NATIVE ?
React Native is a framework developed by Facebook for creating
native-style apps for iOS & Android under one common language,
JavaScript .React Native lets you build mobile apps using only
JavaScript. It uses the same design as React
HOW DOES REACTJS AND REACT
NATIVE WORK ?
REACT NATIVE ARCHITECTURE
TERM’S DESCRIPTION
• Main Thread:- This is the main thread which gets spawned as soon as the application
launches. It loads the app and starts the JS thread to execute the Javascript code. 
• Shadow Thread :- Once the Javascript loads, the JS thread sends the information on
what needs to be rendered onto the screen. This information is used by a shadow node
thread to compute the layouts
• JS Thread :- The Javascript Queue is the thread queue where main bundled JS thread
runs. The JS thread runs all the business logic, i.e., the code we write in React Native.
• Native Modules :- Apart from the threads spawned by React Native, we can also
spawn threads on the custom native modules we build to speed up the performance
of the application
THE BRIDGE
In React Native, the bridge endorses the message broker role, handling
asynchronous commands between the two different worlds. The bridge
is built in C/C++ and thus, can be run on multiple platforms
THE NATIVE SIDE
• Let’s begin with the iOS platform. Since Obj-C is an extension of the C
language, it can communicate with it natively.
• On Android, we need to rely on the Java Native Interface to dialog
with the bridge.
WHAT HAPPEAN TO
OUR JAVASCRIPT
CODE ?
The UI is compiled by the
component exposed by the
React Native. But, the logic
which is written in Javascript
is going to stay Javascript
.React Native create a
Javascript environment can
run
HOW REACT NATIVE PROJECT
START
PROBLEMS WITH REACT
NATIVE
No or very little Cross-
Platform Styling of
Components
Only a Basic Set of
Pre-Built Components
Tools to create
Responsive Designs
but no
Responsiveness out
of the Box
Intro to react native

More Related Content

What's hot

AngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic FrameworkAngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic Framework
Troy Miles
 

What's hot (20)

.NET Everywhere and for Everyone
.NET Everywhere and for Everyone.NET Everywhere and for Everyone
.NET Everywhere and for Everyone
 
Introduction to React native
Introduction to React nativeIntroduction to React native
Introduction to React native
 
Intro to mobile apps with the ionic framework & angular js
Intro to mobile apps with the ionic framework & angular jsIntro to mobile apps with the ionic framework & angular js
Intro to mobile apps with the ionic framework & angular js
 
MS Experiences 17 - Xamarin: Future of Mobile Development
MS Experiences 17 - Xamarin: Future of Mobile DevelopmentMS Experiences 17 - Xamarin: Future of Mobile Development
MS Experiences 17 - Xamarin: Future of Mobile Development
 
Ionic in 30
Ionic in 30Ionic in 30
Ionic in 30
 
Workshop Ionic Framework - CC FE & UX
Workshop Ionic Framework - CC FE & UXWorkshop Ionic Framework - CC FE & UX
Workshop Ionic Framework - CC FE & UX
 
Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3
 
Intro Angular Ionic
Intro Angular Ionic Intro Angular Ionic
Intro Angular Ionic
 
Getting started with the Ionic Framework
Getting started with the Ionic FrameworkGetting started with the Ionic Framework
Getting started with the Ionic Framework
 
Monorepo: React + React Native. React Alicante
Monorepo:  React + React Native. React Alicante Monorepo:  React + React Native. React Alicante
Monorepo: React + React Native. React Alicante
 
Hybrid Mobile App Development - Xamarin
Hybrid Mobile App Development - XamarinHybrid Mobile App Development - Xamarin
Hybrid Mobile App Development - Xamarin
 
Monorepo: React Web & React Native
Monorepo: React Web & React NativeMonorepo: React Web & React Native
Monorepo: React Web & React Native
 
Алексей Волков "Введение в React Native"
Алексей Волков "Введение в React Native"Алексей Волков "Введение в React Native"
Алексей Волков "Введение в React Native"
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react native
 
Academy PRO: .NET Core intro
Academy PRO: .NET Core introAcademy PRO: .NET Core intro
Academy PRO: .NET Core intro
 
ASP.NET
ASP.NETASP.NET
ASP.NET
 
Building real time app by using asp.Net Core
Building real time app by using asp.Net CoreBuilding real time app by using asp.Net Core
Building real time app by using asp.Net Core
 
AngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic FrameworkAngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic Framework
 
Php development
Php developmentPhp development
Php development
 
Ionic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile appsIonic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile apps
 

Similar to Intro to react native

React-JS.pptx
React-JS.pptxReact-JS.pptx
React-JS.pptx
jatinkumarchhabra101
 
What is React Native.docx
What is React Native.docxWhat is React Native.docx
What is React Native.docx
MUDDUKRISHNA14
 

Similar to Intro to react native (20)

React native
React nativeReact native
React native
 
ReactJS Vs React Native: Understanding Differences, Advantages, Disadvantages
ReactJS Vs React Native: Understanding Differences, Advantages, DisadvantagesReactJS Vs React Native: Understanding Differences, Advantages, Disadvantages
ReactJS Vs React Native: Understanding Differences, Advantages, Disadvantages
 
React Native - Build Native Mobile App
React Native - Build Native Mobile AppReact Native - Build Native Mobile App
React Native - Build Native Mobile App
 
Reactjs Vs React Native – Key Difference, Advantages, And Disadvantages
Reactjs Vs React Native – Key Difference, Advantages, And DisadvantagesReactjs Vs React Native – Key Difference, Advantages, And Disadvantages
Reactjs Vs React Native – Key Difference, Advantages, And Disadvantages
 
AFTAB AHMED.pptx
AFTAB AHMED.pptxAFTAB AHMED.pptx
AFTAB AHMED.pptx
 
React native
React nativeReact native
React native
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I started
 
Lecture 1 Introduction to React Native.pptx
Lecture 1 Introduction to React Native.pptxLecture 1 Introduction to React Native.pptx
Lecture 1 Introduction to React Native.pptx
 
React vs React Native
React vs React NativeReact vs React Native
React vs React Native
 
Skill practical javascript diy projects
Skill practical javascript diy projectsSkill practical javascript diy projects
Skill practical javascript diy projects
 
Getting Started With React Native Presntation
Getting Started With React Native PresntationGetting Started With React Native Presntation
Getting Started With React Native Presntation
 
React-JS.pptx
React-JS.pptxReact-JS.pptx
React-JS.pptx
 
Introduction to React Native - Lev Vidrak, Wix
Introduction to React Native - Lev Vidrak, WixIntroduction to React Native - Lev Vidrak, Wix
Introduction to React Native - Lev Vidrak, Wix
 
Combining react with node js to develop successful full stack web applications
Combining react with node js to develop successful full stack web applicationsCombining react with node js to develop successful full stack web applications
Combining react with node js to develop successful full stack web applications
 
Difference between React JS and React Native
Difference between React JS and React NativeDifference between React JS and React Native
Difference between React JS and React Native
 
Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
 
Nodejs vs react js converted
Nodejs vs react js convertedNodejs vs react js converted
Nodejs vs react js converted
 
What is React Native.docx
What is React Native.docxWhat is React Native.docx
What is React Native.docx
 
Reactjs Basics
Reactjs BasicsReactjs Basics
Reactjs Basics
 
learning react
learning reactlearning react
learning react
 

Recently uploaded

Industrial Training Report- AKTU Industrial Training Report
Industrial Training Report- AKTU Industrial Training ReportIndustrial Training Report- AKTU Industrial Training Report
Industrial Training Report- AKTU Industrial Training Report
Avinash Rai
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
joachimlavalley1
 

Recently uploaded (20)

slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptxslides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
 
NLC-2024-Orientation-for-RO-SDO (1).pptx
NLC-2024-Orientation-for-RO-SDO (1).pptxNLC-2024-Orientation-for-RO-SDO (1).pptx
NLC-2024-Orientation-for-RO-SDO (1).pptx
 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
How to Split Bills in the Odoo 17 POS Module
How to Split Bills in the Odoo 17 POS ModuleHow to Split Bills in the Odoo 17 POS Module
How to Split Bills in the Odoo 17 POS Module
 
Mattingly "AI & Prompt Design: Limitations and Solutions with LLMs"
Mattingly "AI & Prompt Design: Limitations and Solutions with LLMs"Mattingly "AI & Prompt Design: Limitations and Solutions with LLMs"
Mattingly "AI & Prompt Design: Limitations and Solutions with LLMs"
 
How to Break the cycle of negative Thoughts
How to Break the cycle of negative ThoughtsHow to Break the cycle of negative Thoughts
How to Break the cycle of negative Thoughts
 
Solid waste management & Types of Basic civil Engineering notes by DJ Sir.pptx
Solid waste management & Types of Basic civil Engineering notes by DJ Sir.pptxSolid waste management & Types of Basic civil Engineering notes by DJ Sir.pptx
Solid waste management & Types of Basic civil Engineering notes by DJ Sir.pptx
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
 
PART A. Introduction to Costumer Service
PART A. Introduction to Costumer ServicePART A. Introduction to Costumer Service
PART A. Introduction to Costumer Service
 
MARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptxMARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptx
 
Gyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptxGyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptx
 
The Art Pastor's Guide to Sabbath | Steve Thomason
The Art Pastor's Guide to Sabbath | Steve ThomasonThe Art Pastor's Guide to Sabbath | Steve Thomason
The Art Pastor's Guide to Sabbath | Steve Thomason
 
Industrial Training Report- AKTU Industrial Training Report
Industrial Training Report- AKTU Industrial Training ReportIndustrial Training Report- AKTU Industrial Training Report
Industrial Training Report- AKTU Industrial Training Report
 
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
 
Sectors of the Indian Economy - Class 10 Study Notes pdf
Sectors of the Indian Economy - Class 10 Study Notes pdfSectors of the Indian Economy - Class 10 Study Notes pdf
Sectors of the Indian Economy - Class 10 Study Notes pdf
 
Application of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesApplication of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matrices
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
 
2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx
 

Intro to react native

  • 1. INTRO TO REACT NATIVE
  • 2. WHAT IS REACT ? React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.
  • 3. WHAT IS REACT NATIVE ? React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript .React Native lets you build mobile apps using only JavaScript. It uses the same design as React
  • 4. HOW DOES REACTJS AND REACT NATIVE WORK ?
  • 6. TERM’S DESCRIPTION • Main Thread:- This is the main thread which gets spawned as soon as the application launches. It loads the app and starts the JS thread to execute the Javascript code.  • Shadow Thread :- Once the Javascript loads, the JS thread sends the information on what needs to be rendered onto the screen. This information is used by a shadow node thread to compute the layouts • JS Thread :- The Javascript Queue is the thread queue where main bundled JS thread runs. The JS thread runs all the business logic, i.e., the code we write in React Native. • Native Modules :- Apart from the threads spawned by React Native, we can also spawn threads on the custom native modules we build to speed up the performance of the application
  • 7. THE BRIDGE In React Native, the bridge endorses the message broker role, handling asynchronous commands between the two different worlds. The bridge is built in C/C++ and thus, can be run on multiple platforms
  • 8. THE NATIVE SIDE • Let’s begin with the iOS platform. Since Obj-C is an extension of the C language, it can communicate with it natively. • On Android, we need to rely on the Java Native Interface to dialog with the bridge.
  • 9. WHAT HAPPEAN TO OUR JAVASCRIPT CODE ? The UI is compiled by the component exposed by the React Native. But, the logic which is written in Javascript is going to stay Javascript .React Native create a Javascript environment can run
  • 10. HOW REACT NATIVE PROJECT START
  • 11. PROBLEMS WITH REACT NATIVE No or very little Cross- Platform Styling of Components Only a Basic Set of Pre-Built Components Tools to create Responsive Designs but no Responsiveness out of the Box