React Native Workshop @CapitalFactory

Given by Vladimir Novick, the writer of “React Native – writing mobile apps with Javascript”, this workshop will give you the opportunity to develop a fully working mobile application using React Native.

Transcript

1. v n o v i c k . c o m React Native Workshop
2. 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
3. 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
4. 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 !
5. 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
6. 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
7. 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
8. v n o v i c k . c o m JSX
9. v n o v i c k . c o m Virtual DOM
10. 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) !
11. 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
12. v n o v i c k . c o m NodeJS
13. 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/
14. 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
15. 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
16. v n o v i c k . c o m VSCode ! Code editor ! react-naHve build in support ! Extensions ecosystem
17. 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
18. 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 !
19. v n o v i c k . c o m Phase3 checklist Install Firebase sdk ! Connect data to an app ! Create Firebase account !
20. v n o v i c k . c o m Contact me for consultation vnovick.com Thank you