v n o v i c k . c o m
Vladimir Novick
S o f t w a r e A r c h i t e c t & C o n s u l t a n t
Web, Mobile, Virtual Reality, Augmented Reality, Mixed
Reality & Internet of Things
@VladimirNovick
Slide 3
Slide 3 text
v n o v i c k . c o m
https:/
/goo.gl/mYiVmF
React Native build
mobile apps with
JavaScript
w
Your go-to guide to creating native iOS
and Android mobile applications using
React and JavaScript
Slide 4
Slide 4 text
v n o v i c k . c o m
Assumptions
! You are familiar with JavaScript and Web development
You’ve at least heard about ReactJS library
!
You are interested to learn React NaHve
!
Slide 5
Slide 5 text
v n o v i c k . c o m
Agenda
! Phase 1 - Setup your React NaHve app and add basic
screens
! Phase 2 - LayouHng and styling your app
! Phase 3 - ConnecHng to real data
Slide 6
Slide 6 text
v n o v i c k . c o m
What is ReactJS
Declara5ve Component
Based
Learn once
A J a v a S c r i p t l i b r a r y f o r b u i l d i n g u s e r i n t e r f a c e s
Slide 7
Slide 7 text
v n o v i c k . c o m
React can run anywhere
! Browser
Physical devices (react-iot)
!
Mobile (React NaHve)
!
Desktop
!
! VR (React VR)
! Server
! Other
Slide 8
Slide 8 text
v n o v i c k . c o m
JSX
Slide 9
Slide 9 text
v n o v i c k . c o m
Virtual DOM
Slide 10
Slide 10 text
v n o v i c k . c o m
The ecosystem
! Npm (Node package manager) community packages
Flux architecture (Redux/MobX/MST)
!
! Webpack (bundling, hot module reload, transpilaHon)
Modern JavaScript (ES6/7/next)
!
Slide 11
Slide 11 text
v n o v i c k . c o m
Phase1 - Getting started
g i t h u b . c o m / v n o v i c k / r e a c t - n a t i v e - w o r k s h o p
Slide 12
Slide 12 text
v n o v i c k . c o m
NodeJS
Slide 13
Slide 13 text
v n o v i c k . c o m
Exponent
! Built on top of React NaHve
! Desktop XDE
! AddiHonal NaHve APIs
! Mobile Client
! Expo Snack playground h[ps:/
/snack.expo.io/
Slide 14
Slide 14 text
v n o v i c k . c o m
React Native Debugger
! Auto connects with React
naHve remote debugging
! Let us inspect react naHve structure
! Let us inspect network
Slide 15
Slide 15 text
v n o v i c k . c o m
CRNA
B u i l t w i t h E x p o n e n t
Slide 16
Slide 16 text
v n o v i c k . c o m
VSCode
! Code editor
! react-naHve build in support
! Extensions ecosystem
Slide 17
Slide 17 text
v n o v i c k . c o m
Phase1 checklist
React NaHve Debugger - h[ps:/
/github.com/jhen0409/react-naHve-debugger/releases
!
VSCode - h[ps:/
/code.visualstudio.com/
!
CRNA
!
Expo - h[ps:/
/docs.expo.io/versions/latest/introducHon/installaHon.html
!
Setup folder structure
!
Add navigaHon: h[ps:/
/reactnavigaHon.org/docs/intro/basic-app
!
g i t h u b . c o m / v n o v i c k / r e a c t - n a t i v e - w o r k s h o p
Slide 18
Slide 18 text
v n o v i c k . c o m
Phase2 checklist
Retrieve mocked data from api service
!
Style your chat app
!
Create Message, MessageList and Compose components
!
Slide 19
Slide 19 text
v n o v i c k . c o m
Phase3 checklist
Install Firebase sdk
!
Connect data to an app
!
Create Firebase account
!
Slide 20
Slide 20 text
v n o v i c k . c o m
Contact me for consultation
vnovick.com
Thank you