SlideShare a Scribd company logo
16
moduscreate.com @ModusCreate
● JSX
● Flow
● Node JS
● NPM
● Chrome Debugger
● XCode
● React JS
● React Native
Technologies to get familiar with
https://facebook.github.io/react/docs/jsx-in-depth.html
http://flowtype.org/
https://facebook.github.io/react/index.html
https://facebook.github.io/react-native/index.html
Most read
19
moduscreate.com @ModusCreate
•Implements JSX
•Leverages the Web Component paradigm
•Syntax easy to learn
•Some design patterns can take getting used to
•Required to use React Native
React JS
http://facebook.github.io/react/docs/getting-started.html
Most read
22
Quick Tour
Most read
moduscreate.com @ModusCreate
Intro to React Native
Jay Garcia
@ModusJesus
@ModusCreate
04/30/2015
moduscreate.com @ModusCreate
• Introduction
• What is React Native
• Problems it solves
• What technologies does it comprise of?
• Getting started
• Example of extending React Native
• Overall thoughts
• Q&A
Agenda
moduscreate.com @ModusCreate
•A Library
•Binds JSX to
•iOS Cocoa Touch
•(soon) Android UI
•Custom Layout system
•Comprises a suite of technologies
•Applications run at near full speed*
•Architecture is scalable
•Library is extensible
•BSD Licensed
What is react Native?
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
*Business logic in JavaScript is fast, but still interpreted
moduscreate.com @ModusCreate
• Leverage existing skill sets to write apps with native
feel
• Gets you out of the “HTML5 Sandbox”
• Writing cross-platform high performance apps using
single business logic codebase
Problems React Native Solves
moduscreate.com @ModusCreate
• React Native wraps Existing
native UI controls
• Implementation of UI via JSX
Many UI components to choose from
moduscreate.com @ModusCreate
UI Component Library
Activity Indicator
Date Picker
Image
ListView
MapView
Navigator
Picker
ScrollView
Slider
TabBar
Text
TextInput
Touchable
TouchableOpacity
Touchable
Highlight
Touchable
WithoutFeedback
View
WebView
Alert
Border
StatusBarIOS
StatusBarIOS
ActionSheet
CameraRoll
moduscreate.com @ModusCreate
Device APIs & PolyFills
AppState
AsyncStorage
Interaction
Manager
LinkingIOS
NetInfo
Vibration
Flexbox
GeoLocation Timers
Network
moduscreate.com @ModusCreate
*Github project is Experimental!
Check it out for yourself
• Clone the React Native Repo
• *https://github.com/facebook/react-native.git
• In terminal:
cd react-native
npm_install
cd Examples/UIExplorer/
open UIExplorer.xcodeproj
• Requirements:
• Xcode
• NodeJS
• NPM
moduscreate.com @ModusCreate
• *Creating custom modules is not difficult
•Example patterns already exists in the library
•Patterns are well documented!
React Native is Extensible
https://facebook.github.io/react-native/docs/
*Objective C or Swift experience may be required
moduscreate.com @ModusCreate
React Native can work with existing apps
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
Your existing
application
moduscreate.com @ModusCreate
React Native can work with existing apps
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
WebView / JS Engine
React JS
moduscreate.com @ModusCreate
React Native can work with other libraries
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
Custom Library
Must conform to
the module or
view specs
Custom Library JS
moduscreate.com @ModusCreate
React Native can work with other libraries
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
MCModPlayerInterface
LibOpenMPT
MCModPlayerInterface.js
moduscreate.com @ModusCreate
React Native can work with other libraries
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
MCVgmPlayer
LibGME
MCVgmPlayer.js
moduscreate.com @ModusCreate
React Native can work with other libraries
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
MCEzAudioPlot
EZAudioPlot
MCEzAudioPlotJS
moduscreate.com @ModusCreate
● JSX
● Flow
● Node JS
● NPM
● Chrome Debugger
● XCode
● React JS
● React Native
Technologies to get familiar with
https://facebook.github.io/react/docs/jsx-in-depth.html
http://flowtype.org/
https://facebook.github.io/react/index.html
https://facebook.github.io/react-native/index.html
moduscreate.com @ModusCreate
● Merger of ES and HTML
● Enhances JavaScript semantics
● Forward-leaning ES6 syntax
● Requires a “Transpiler” (comes packaged with React Native projects)
● Really easy to learn
JSX
moduscreate.com @ModusCreate
● Static type checker for JavaScript
● Extremely easy to use
● Is optional for your apps
● Comes for free with React Native
Flow
http://flowtype.org/
moduscreate.com @ModusCreate
•Implements JSX
•Leverages the Web Component paradigm
•Syntax easy to learn
•Some design patterns can take getting used to
•Required to use React Native
React JS
http://facebook.github.io/react/docs/getting-started.html
moduscreate.com @ModusCreate
•Custom CSS implementation
•Very lightweight and easy to learn
•Takes some getting used to coming from the browser CSS
•Only two types of layouts
•Flexbox
•Absolute
React Native CSS
https://facebook.github.io/react-native/docs/style.html#content
moduscreate.com @ModusCreate
*Github project is Experimental!
Getting started with React Native
• In terminal:
npm install -g react-native-cli
react-native init MyProject
cd MyProject
open iOS/MyProject.xcodeproj
• Requirements:
• Xcode
• NodeJS
• NPM
Quick Tour
moduscreate.com @ModusCreate
Thoughts on developing with React Native
•Community is *vibrant*
•JSX is really easy to master
•Getting outside of the HTML5 sandbox is liberating
•The Facebook developers are very responsive
•Some exchanges have occurred nights & weekends
•Technology is still new
•Has some evolving to do
•More UI goodness to come from the FB React Native Team
moduscreate.com @ModusCreate
Thank you!
Jay Garcia
@ModusJesus
@ModusCreate

More Related Content

What's hot (20)

ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentation
Thanh Tuong
 
React Native
React NativeReact Native
React Native
Artyom Trityak
 
Learn react-js
Learn react-jsLearn react-js
Learn react-js
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
React Native
React NativeReact Native
React Native
Craig Jolicoeur
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
Rob Quick
 
Reactjs
Reactjs Reactjs
Reactjs
Neha Sharma
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
Bojan Golubović
 
General overview low code/ no code
General overview low code/ no codeGeneral overview low code/ no code
General overview low code/ no code
Cedrik Dudek
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
DivyanshGupta922023
 
Developing Apps With React Native
Developing Apps With React NativeDeveloping Apps With React Native
Developing Apps With React Native
Alvaro Viebrantz
 
React js
React jsReact js
React js
Oswald Campesato
 
React native
React nativeReact native
React native
Mohammed El Rafie Tarabay
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 
The magic of flutter
The magic of flutterThe magic of flutter
The magic of flutter
Shady Selim
 
React js
React jsReact js
React js
Rajesh Kolla
 
ReactJs
ReactJsReactJs
ReactJs
Sahana Banerjee
 
Flutter vs React Native 2019
Flutter vs React Native 2019Flutter vs React Native 2019
Flutter vs React Native 2019
Rockers Technology
 
Flutter talkshow
Flutter talkshowFlutter talkshow
Flutter talkshow
Nhan Cao
 
C sharp
C sharpC sharp
C sharp
sanjay joshi
 
Java Tutorial | Java Programming Tutorial | Java Basics | Java Training | Edu...
Java Tutorial | Java Programming Tutorial | Java Basics | Java Training | Edu...Java Tutorial | Java Programming Tutorial | Java Basics | Java Training | Edu...
Java Tutorial | Java Programming Tutorial | Java Basics | Java Training | Edu...
Edureka!
 

Viewers also liked (20)

A tour of React Native
A tour of React NativeA tour of React Native
A tour of React Native
Tadeu Zagallo
 
React native - What, Why, How?
React native - What, Why, How?React native - What, Why, How?
React native - What, Why, How?
Teerasej Jiraphatchandej
 
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptReact Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
Kobkrit Viriyayudhakorn
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Polidea
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
ModusJesus
 
React Native 入門
React Native 入門React Native 入門
React Native 入門
Seiichi Okumiya
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Rami Sayar
 
What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?
Evan Stone
 
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
Kobkrit Viriyayudhakorn
 
React Native GUIDE
React Native GUIDEReact Native GUIDE
React Native GUIDE
dcubeio
 
Introduction to React Native & Redux
Introduction to React Native & ReduxIntroduction to React Native & Redux
Introduction to React Native & Redux
Barak Cohen
 
Lecture 3 - ES6 Script Advanced for React-Native
Lecture 3 - ES6 Script Advanced for React-NativeLecture 3 - ES6 Script Advanced for React-Native
Lecture 3 - ES6 Script Advanced for React-Native
Kobkrit Viriyayudhakorn
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom components
Jeremy Grancher
 
SONY BBS - React Native
SONY BBS - React NativeSONY BBS - React Native
SONY BBS - React Native
Mehmet Ali Bağcı
 
Lecture 2: ES6 / ES2015 Slide
Lecture 2: ES6 / ES2015 SlideLecture 2: ES6 / ES2015 Slide
Lecture 2: ES6 / ES2015 Slide
Kobkrit Viriyayudhakorn
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
Andrew Hull
 
[React Native Tutorial] Lecture 6: Component, Props, and Network
[React Native Tutorial] Lecture 6: Component, Props, and Network[React Native Tutorial] Lecture 6: Component, Props, and Network
[React Native Tutorial] Lecture 6: Component, Props, and Network
Kobkrit Viriyayudhakorn
 
[React-Native Tutorial] Map
[React-Native Tutorial] Map[React-Native Tutorial] Map
[React-Native Tutorial] Map
Kobkrit Viriyayudhakorn
 
Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)
Devin Abbott
 
Power of React Native
Power of React NativePower of React Native
Power of React Native
Murugan Durai
 
A tour of React Native
A tour of React NativeA tour of React Native
A tour of React Native
Tadeu Zagallo
 
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptReact Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
Kobkrit Viriyayudhakorn
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Polidea
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
ModusJesus
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Rami Sayar
 
What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?What's This React Native Thing I Keep Hearing About?
What's This React Native Thing I Keep Hearing About?
Evan Stone
 
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
Kobkrit Viriyayudhakorn
 
React Native GUIDE
React Native GUIDEReact Native GUIDE
React Native GUIDE
dcubeio
 
Introduction to React Native & Redux
Introduction to React Native & ReduxIntroduction to React Native & Redux
Introduction to React Native & Redux
Barak Cohen
 
Lecture 3 - ES6 Script Advanced for React-Native
Lecture 3 - ES6 Script Advanced for React-NativeLecture 3 - ES6 Script Advanced for React-Native
Lecture 3 - ES6 Script Advanced for React-Native
Kobkrit Viriyayudhakorn
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom components
Jeremy Grancher
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
Andrew Hull
 
[React Native Tutorial] Lecture 6: Component, Props, and Network
[React Native Tutorial] Lecture 6: Component, Props, and Network[React Native Tutorial] Lecture 6: Component, Props, and Network
[React Native Tutorial] Lecture 6: Component, Props, and Network
Kobkrit Viriyayudhakorn
 
Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)
Devin Abbott
 
Power of React Native
Power of React NativePower of React Native
Power of React Native
Murugan Durai
 
Ad

Similar to Intro to react native (20)

Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native BostonPutting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston
stan229
 
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
Techtic Solutions
 
React native
React nativeReact native
React native
NexThoughts Technologies
 
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...
Simplilearn
 
React Native
React NativeReact Native
React Native
Huqiu Liao
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
Mike Melusky
 
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
Andolasoft Inc
 
Putting the Native in React Native - React Native NYC
Putting the Native in React Native - React Native NYCPutting the Native in React Native - React Native NYC
Putting the Native in React Native - React Native NYC
stan229
 
7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient
Narola Infotech
 
GDG Workshop on React (By Aakanksha Rai)
GDG Workshop on React (By Aakanksha Rai)GDG Workshop on React (By Aakanksha Rai)
GDG Workshop on React (By Aakanksha Rai)
gdgoncampuslncts
 
React Alternatives Frameworks- Lightweight Javascript Libraries.pdf
React Alternatives Frameworks- Lightweight Javascript Libraries.pdfReact Alternatives Frameworks- Lightweight Javascript Libraries.pdf
React Alternatives Frameworks- Lightweight Javascript Libraries.pdf
Katy Slemon
 
React native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile AppsReact native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile Apps
Jimit Shah
 
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementMidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
Zach Lendon
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Zach Lendon
 
What's New in NetBeans IDE 7.x
What's New in NetBeans IDE 7.xWhat's New in NetBeans IDE 7.x
What's New in NetBeans IDE 7.x
Geertjan Wielenga
 
What’s New & Cool in NetBeans IDE 7.x
What’s New & Cool in NetBeans IDE 7.xWhat’s New & Cool in NetBeans IDE 7.x
What’s New & Cool in NetBeans IDE 7.x
Erik Gur
 
React Native? A developer's perspective
React Native? A developer's perspectiveReact Native? A developer's perspective
React Native? A developer's perspective
BorisConforty
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web Framework
Rajitha Pathiraja
 
Erica Cooksey Reactathon 2018
Erica Cooksey Reactathon 2018Erica Cooksey Reactathon 2018
Erica Cooksey Reactathon 2018
🏡 Erica Cooksey
 
Why Should You Choose ReactJS for Game Development_.pdf
Why Should You Choose ReactJS for Game Development_.pdfWhy Should You Choose ReactJS for Game Development_.pdf
Why Should You Choose ReactJS for Game Development_.pdf
ReactJS
 
Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native BostonPutting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston
stan229
 
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
Techtic Solutions
 
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...
Simplilearn
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
Mike Melusky
 
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
Andolasoft Inc
 
Putting the Native in React Native - React Native NYC
Putting the Native in React Native - React Native NYCPutting the Native in React Native - React Native NYC
Putting the Native in React Native - React Native NYC
stan229
 
7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient
Narola Infotech
 
GDG Workshop on React (By Aakanksha Rai)
GDG Workshop on React (By Aakanksha Rai)GDG Workshop on React (By Aakanksha Rai)
GDG Workshop on React (By Aakanksha Rai)
gdgoncampuslncts
 
React Alternatives Frameworks- Lightweight Javascript Libraries.pdf
React Alternatives Frameworks- Lightweight Javascript Libraries.pdfReact Alternatives Frameworks- Lightweight Javascript Libraries.pdf
React Alternatives Frameworks- Lightweight Javascript Libraries.pdf
Katy Slemon
 
React native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile AppsReact native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile Apps
Jimit Shah
 
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementMidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
Zach Lendon
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Zach Lendon
 
What's New in NetBeans IDE 7.x
What's New in NetBeans IDE 7.xWhat's New in NetBeans IDE 7.x
What's New in NetBeans IDE 7.x
Geertjan Wielenga
 
What’s New & Cool in NetBeans IDE 7.x
What’s New & Cool in NetBeans IDE 7.xWhat’s New & Cool in NetBeans IDE 7.x
What’s New & Cool in NetBeans IDE 7.x
Erik Gur
 
React Native? A developer's perspective
React Native? A developer's perspectiveReact Native? A developer's perspective
React Native? A developer's perspective
BorisConforty
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web Framework
Rajitha Pathiraja
 
Why Should You Choose ReactJS for Game Development_.pdf
Why Should You Choose ReactJS for Game Development_.pdfWhy Should You Choose ReactJS for Game Development_.pdf
Why Should You Choose ReactJS for Game Development_.pdf
ReactJS
 
Ad

Recently uploaded (20)

Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure ModesCognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Dr. Tathagat Varma
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
Create Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent BuilderCreate Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent Builder
DianaGray10
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
Dev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API WorkflowsDev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API Workflows
UiPathCommunity
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
Measuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI SuccessMeasuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI Success
Nikki Chapple
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AI Emotional Actors:  “When Machines Learn to Feel and Perform"AI Emotional Actors:  “When Machines Learn to Feel and Perform"
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AkashKumar809858
 
AI Trends - Mary Meeker
AI Trends - Mary MeekerAI Trends - Mary Meeker
AI Trends - Mary Meeker
Razin Mustafiz
 
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Peter Bittner
 
Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...
pranavbodhak
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Microsoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentationMicrosoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentation
Digitalmara
 
European Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility TestingEuropean Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility Testing
Julia Undeutsch
 
Introducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and ARIntroducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and AR
Safe Software
 
The case for on-premises AI
The case for on-premises AIThe case for on-premises AI
The case for on-premises AI
Principled Technologies
 
Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025
Prasta Maha
 
Agentic AI - The New Era of Intelligence
Agentic AI - The New Era of IntelligenceAgentic AI - The New Era of Intelligence
Agentic AI - The New Era of Intelligence
Muzammil Shah
 
Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure ModesCognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Dr. Tathagat Varma
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
Create Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent BuilderCreate Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent Builder
DianaGray10
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
Dev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API WorkflowsDev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API Workflows
UiPathCommunity
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
Measuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI SuccessMeasuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI Success
Nikki Chapple
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AI Emotional Actors:  “When Machines Learn to Feel and Perform"AI Emotional Actors:  “When Machines Learn to Feel and Perform"
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AkashKumar809858
 
AI Trends - Mary Meeker
AI Trends - Mary MeekerAI Trends - Mary Meeker
AI Trends - Mary Meeker
Razin Mustafiz
 
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Peter Bittner
 
Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...
pranavbodhak
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Microsoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentationMicrosoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentation
Digitalmara
 
European Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility TestingEuropean Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility Testing
Julia Undeutsch
 
Introducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and ARIntroducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and AR
Safe Software
 
Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025
Prasta Maha
 
Agentic AI - The New Era of Intelligence
Agentic AI - The New Era of IntelligenceAgentic AI - The New Era of Intelligence
Agentic AI - The New Era of Intelligence
Muzammil Shah
 

Intro to react native

  • 1. moduscreate.com @ModusCreate Intro to React Native Jay Garcia @ModusJesus @ModusCreate 04/30/2015
  • 2. moduscreate.com @ModusCreate • Introduction • What is React Native • Problems it solves • What technologies does it comprise of? • Getting started • Example of extending React Native • Overall thoughts • Q&A Agenda
  • 3. moduscreate.com @ModusCreate •A Library •Binds JSX to •iOS Cocoa Touch •(soon) Android UI •Custom Layout system •Comprises a suite of technologies •Applications run at near full speed* •Architecture is scalable •Library is extensible •BSD Licensed What is react Native? Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code *Business logic in JavaScript is fast, but still interpreted
  • 4. moduscreate.com @ModusCreate • Leverage existing skill sets to write apps with native feel • Gets you out of the “HTML5 Sandbox” • Writing cross-platform high performance apps using single business logic codebase Problems React Native Solves
  • 5. moduscreate.com @ModusCreate • React Native wraps Existing native UI controls • Implementation of UI via JSX Many UI components to choose from
  • 6. moduscreate.com @ModusCreate UI Component Library Activity Indicator Date Picker Image ListView MapView Navigator Picker ScrollView Slider TabBar Text TextInput Touchable TouchableOpacity Touchable Highlight Touchable WithoutFeedback View WebView Alert Border StatusBarIOS StatusBarIOS ActionSheet CameraRoll
  • 7. moduscreate.com @ModusCreate Device APIs & PolyFills AppState AsyncStorage Interaction Manager LinkingIOS NetInfo Vibration Flexbox GeoLocation Timers Network
  • 8. moduscreate.com @ModusCreate *Github project is Experimental! Check it out for yourself • Clone the React Native Repo • *https://github.com/facebook/react-native.git • In terminal: cd react-native npm_install cd Examples/UIExplorer/ open UIExplorer.xcodeproj • Requirements: • Xcode • NodeJS • NPM
  • 9. moduscreate.com @ModusCreate • *Creating custom modules is not difficult •Example patterns already exists in the library •Patterns are well documented! React Native is Extensible https://facebook.github.io/react-native/docs/ *Objective C or Swift experience may be required
  • 10. moduscreate.com @ModusCreate React Native can work with existing apps Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code Your existing application
  • 11. moduscreate.com @ModusCreate React Native can work with existing apps Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code WebView / JS Engine React JS
  • 12. moduscreate.com @ModusCreate React Native can work with other libraries Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code Custom Library Must conform to the module or view specs Custom Library JS
  • 13. moduscreate.com @ModusCreate React Native can work with other libraries Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code MCModPlayerInterface LibOpenMPT MCModPlayerInterface.js
  • 14. moduscreate.com @ModusCreate React Native can work with other libraries Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code MCVgmPlayer LibGME MCVgmPlayer.js
  • 15. moduscreate.com @ModusCreate React Native can work with other libraries Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code MCEzAudioPlot EZAudioPlot MCEzAudioPlotJS
  • 16. moduscreate.com @ModusCreate ● JSX ● Flow ● Node JS ● NPM ● Chrome Debugger ● XCode ● React JS ● React Native Technologies to get familiar with https://facebook.github.io/react/docs/jsx-in-depth.html http://flowtype.org/ https://facebook.github.io/react/index.html https://facebook.github.io/react-native/index.html
  • 17. moduscreate.com @ModusCreate ● Merger of ES and HTML ● Enhances JavaScript semantics ● Forward-leaning ES6 syntax ● Requires a “Transpiler” (comes packaged with React Native projects) ● Really easy to learn JSX
  • 18. moduscreate.com @ModusCreate ● Static type checker for JavaScript ● Extremely easy to use ● Is optional for your apps ● Comes for free with React Native Flow http://flowtype.org/
  • 19. moduscreate.com @ModusCreate •Implements JSX •Leverages the Web Component paradigm •Syntax easy to learn •Some design patterns can take getting used to •Required to use React Native React JS http://facebook.github.io/react/docs/getting-started.html
  • 20. moduscreate.com @ModusCreate •Custom CSS implementation •Very lightweight and easy to learn •Takes some getting used to coming from the browser CSS •Only two types of layouts •Flexbox •Absolute React Native CSS https://facebook.github.io/react-native/docs/style.html#content
  • 21. moduscreate.com @ModusCreate *Github project is Experimental! Getting started with React Native • In terminal: npm install -g react-native-cli react-native init MyProject cd MyProject open iOS/MyProject.xcodeproj • Requirements: • Xcode • NodeJS • NPM
  • 23. moduscreate.com @ModusCreate Thoughts on developing with React Native •Community is *vibrant* •JSX is really easy to master •Getting outside of the HTML5 sandbox is liberating •The Facebook developers are very responsive •Some exchanges have occurred nights & weekends •Technology is still new •Has some evolving to do •More UI goodness to come from the FB React Native Team
  • 24. moduscreate.com @ModusCreate Thank you! Jay Garcia @ModusJesus @ModusCreate