Slide 1

Slide 1 text

v n o v i c k . c o m React Native Workshop

Slide 2

Slide 2 text

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