JS/WEB DEVELOPER TO MOBILE APP DEVELOPER IN A SINGLE WORKSHOP (USING REACT

NATIVE)

CHANDRA MOHAN

AGENDA

• WHAT’S REACT NATIVE? • WHY REACT NATIVE?• SEE SAMPLE APP• START CREATING IOS AND ANDROID APPS!• Q&A

WHAT’S REACT NATIVE?

• REACT NATIVE LETS YOU BUILD RICH MOBILE APPS BY WRITING DECLARATIVE COMPONENTS IN JAVASCRIPT.• IT’S NOT HTML5 ON WEBVIEW (A.K.A PHONEGAP)

• LIKE REACT, BUT USES NATIVE COMPONENTS INSTEAD OF WEB COMPONENTS AS BUILDING BLOCKS.

• SAME REACT CONCEPTS LIKE COMPONENTS, JSX, PROPS AND STATES

WHY REACT NATIVE?

• ENGINEERING PRODUCTIVITY • COMMON IOS AND ANDROID CODE (DEV, UNIT & INTEGRATION TESTS)• INSTANT REFRESH/INLINE DEBUGGING ON MOBILE LIKE WEB• NO FEATURE GAPS/BUGS IN ONE PLATFORM

• OFF-CYCLE RELEASES• CUSTOMERS DON’T HAVE TO MANUALLY UPGRADE TO GET FEATURE

UPDATES..• ENABLE FULL STACK DEVELOPERS ACROSS CROSS

DEVICES

DEMO

LET’S START CODING!

CHALLENGE 1

• HELLO JSFOO• REACT-NATIVE INIT REACTNATIVEWORKSHOP

• LET’S ADD SOME SIMPLE COMPONENTS• TEXT INPUT• BUTTONS• ALERT / CONSOLE.LOG

CHALLENGE 2

• IOS AND ANDROID DIFFERENT COMPONENTS• SWITCH• CHECKBOX (HINT OPENSOURCE LIBRARIES)

CHALLENGE 3

• LIST VIEW WITH IMAGES• SAMPLE JSON & IMAGES LINK

CHALLENGE 4

• MULTIPLE SCREENS (CALLED AS SCENES IN REACT NATIVE)• NAVIGATION TO DETAIL SCREEN

CHALLENGE 5

• CALL TO ANDROID NATIVE AND ADB LOG

REFERENCES

HTTPS://FACEBOOK.GITHUB.IO/REACT-NATIVE/SUPPORT: 1. HTTPS://WWW.FACEBOOK.COM/GROUPS/REACT.NATI

VE.COMMUNITY/2. HTTPS://DISCORDAPP.COM/CHANNELS/10286078432

9052160/102861040538120192

Q & A