SlideShare a Scribd company logo
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
24
moduscreate.com @ModusCreate
Thank you!
Jay Garcia
@ModusJesus
@ModusCreate
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)

React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
Bojan Golubović
 
React Native
React Native React Native
React Native
vishal kumar
 
How native is React Native? | React Native vs Native App Development
How native is React Native? | React Native vs Native App DevelopmentHow native is React Native? | React Native vs Native App Development
How native is React Native? | React Native vs Native App Development
Devathon
 
Intro to React
Intro to ReactIntro to React
Intro to React
Justin Reock
 
React Hooks
React HooksReact Hooks
React Hooks
Joao Marins
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 
React Native
React NativeReact Native
React Native
ASIMYILDIZ
 
reactJS
reactJSreactJS
reactJS
Syam Santhosh
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
Emanuele DelBono
 
React js
React jsReact js
React js
Alireza Akbari
 
ReactJS
ReactJSReactJS
ReactJS
Hiten Pratap Singh
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
Mohammed Fazuluddin
 
React js
React jsReact js
React js
Rajesh Kolla
 
Intro to React
Intro to ReactIntro to React
Intro to React
Eric Westfall
 
Flutter workshop
Flutter workshopFlutter workshop
Flutter workshop
Vishnu Suresh
 
Basic Concept of Node.js & NPM
Basic Concept of Node.js & NPMBasic Concept of Node.js & NPM
Basic Concept of Node.js & NPM
Bhargav Anadkat
 
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
namespaceit
 
Learn react-js
Learn react-jsLearn react-js
Learn react-js
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
WEB DEVELOPMENT USING REACT JS
 WEB DEVELOPMENT USING REACT JS WEB DEVELOPMENT USING REACT JS
WEB DEVELOPMENT USING REACT JS
MuthuKumaran Singaravelu
 
Reactjs
Reactjs Reactjs
Reactjs
Neha Sharma
 

Viewers also liked (20)

React Native
React NativeReact Native
React Native
Artyom Trityak
 
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
 
React Native
React NativeReact Native
React Native
Craig Jolicoeur
 
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
 
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
 
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
 
Introduzione a React Native - Facebook Developer Circle Rome
Introduzione a React Native - Facebook Developer Circle RomeIntroduzione a React Native - Facebook Developer Circle Rome
Introduzione a React Native - Facebook Developer Circle Rome
Matteo Manchi
 
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Codemotion
 
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
 
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
Codemotion
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
GreeceJS
 
React js vs react native a comparative analysis
React js vs react native a comparative analysisReact js vs react native a comparative analysis
React js vs react native a comparative analysis
Shelly Megan
 
React native the good parts - react boston lightning talk
React native   the good parts - react boston lightning talkReact native   the good parts - react boston lightning talk
React native the good parts - react boston lightning talk
stan229
 
How Can the Hermes Engine Help React Native Apps.docx.pdf
How Can the Hermes Engine Help React Native Apps.docx.pdfHow Can the Hermes Engine Help React Native Apps.docx.pdf
How Can the Hermes Engine Help React Native Apps.docx.pdf
Techugo
 
How Can the Hermes Engine Help React Native Apps.
How Can the Hermes Engine Help React Native Apps.How Can the Hermes Engine Help React Native Apps.
How Can the Hermes Engine Help React Native Apps.
Techugo
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Waqqas Jabbar
 
Build a real app with react native
Build a real app with react nativeBuild a real app with react native
Build a real app with react native
John Pham
 
React Native.pptx (2)
React Native.pptx (2)React Native.pptx (2)
React Native.pptx (2)
Emilio Rodriguez Martinez
 
React Native Building Mobile Apps with React.pptx
React Native Building Mobile Apps with React.pptxReact Native Building Mobile Apps with React.pptx
React Native Building Mobile Apps with React.pptx
Ahex Technologies
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Waqqas Jabbar
 
Lessons from a year of building apps with React Native
Lessons from a year of building apps with React NativeLessons from a year of building apps with React Native
Lessons from a year of building apps with React Native
Ryan Boland
 
"React Native" by Vanessa Leo e Roberto Brogi
"React Native" by Vanessa Leo e Roberto Brogi "React Native" by Vanessa Leo e Roberto Brogi
"React Native" by Vanessa Leo e Roberto Brogi
ThinkOpen
 
React native
React nativeReact native
React native
NexThoughts Technologies
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react native
Ali Sa'o
 
React Native - Build Native Mobile App
React Native - Build Native Mobile AppReact Native - Build Native Mobile App
React Native - Build Native Mobile App
Mobio Solutions
 
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
 
Introduzione a React Native - Facebook Developer Circle Rome
Introduzione a React Native - Facebook Developer Circle RomeIntroduzione a React Native - Facebook Developer Circle Rome
Introduzione a React Native - Facebook Developer Circle Rome
Matteo Manchi
 
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Codemotion
 
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
 
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
Codemotion
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
GreeceJS
 
React js vs react native a comparative analysis
React js vs react native a comparative analysisReact js vs react native a comparative analysis
React js vs react native a comparative analysis
Shelly Megan
 
React native the good parts - react boston lightning talk
React native   the good parts - react boston lightning talkReact native   the good parts - react boston lightning talk
React native the good parts - react boston lightning talk
stan229
 
How Can the Hermes Engine Help React Native Apps.docx.pdf
How Can the Hermes Engine Help React Native Apps.docx.pdfHow Can the Hermes Engine Help React Native Apps.docx.pdf
How Can the Hermes Engine Help React Native Apps.docx.pdf
Techugo
 
How Can the Hermes Engine Help React Native Apps.
How Can the Hermes Engine Help React Native Apps.How Can the Hermes Engine Help React Native Apps.
How Can the Hermes Engine Help React Native Apps.
Techugo
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Waqqas Jabbar
 
Build a real app with react native
Build a real app with react nativeBuild a real app with react native
Build a real app with react native
John Pham
 
React Native Building Mobile Apps with React.pptx
React Native Building Mobile Apps with React.pptxReact Native Building Mobile Apps with React.pptx
React Native Building Mobile Apps with React.pptx
Ahex Technologies
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Waqqas Jabbar
 
Lessons from a year of building apps with React Native
Lessons from a year of building apps with React NativeLessons from a year of building apps with React Native
Lessons from a year of building apps with React Native
Ryan Boland
 
"React Native" by Vanessa Leo e Roberto Brogi
"React Native" by Vanessa Leo e Roberto Brogi "React Native" by Vanessa Leo e Roberto Brogi
"React Native" by Vanessa Leo e Roberto Brogi
ThinkOpen
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react native
Ali Sa'o
 
React Native - Build Native Mobile App
React Native - Build Native Mobile AppReact Native - Build Native Mobile App
React Native - Build Native Mobile App
Mobio Solutions
 
Ad

Recently uploaded (20)

Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and ImplementationAI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
Christine Shepherd
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
Edge AI and Vision Alliance
 
Soulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate reviewSoulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate review
Soulmaite
 
GIS and FME: The Foundation to Improve the Locate Process of Utilities
GIS and FME: The Foundation to Improve the Locate Process of UtilitiesGIS and FME: The Foundation to Improve the Locate Process of Utilities
GIS and FME: The Foundation to Improve the Locate Process of Utilities
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
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
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0
RodrigoMori7
 
FME Beyond Data Processing Creating A Dartboard Accuracy App
FME Beyond Data Processing Creating A Dartboard Accuracy AppFME Beyond Data Processing Creating A Dartboard Accuracy App
FME Beyond Data Processing Creating A Dartboard Accuracy App
Safe Software
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and ImplementationAI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
Christine Shepherd
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
Edge AI and Vision Alliance
 
Soulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate reviewSoulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate review
Soulmaite
 
GIS and FME: The Foundation to Improve the Locate Process of Utilities
GIS and FME: The Foundation to Improve the Locate Process of UtilitiesGIS and FME: The Foundation to Improve the Locate Process of Utilities
GIS and FME: The Foundation to Improve the Locate Process of Utilities
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
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
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0
RodrigoMori7
 
FME Beyond Data Processing Creating A Dartboard Accuracy App
FME Beyond Data Processing Creating A Dartboard Accuracy AppFME Beyond Data Processing Creating A Dartboard Accuracy App
FME Beyond Data Processing Creating A Dartboard Accuracy App
Safe Software
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 

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