react native-meetup-talk

INTRODUCTION TO REACT NATIVEPresentation by / Kiran Abburi @kiran_abburi

ABOUT MEFreelance web developerMostly working on frontend projectsCurrently focusing on React.js

MEETUPInvite for speakersGeneral feedbackFacebook group reactjs-bangalore

AGENDAIntroductionWhy react-native ?ComponentsStylingLayoutWalk through code samples

REACT.JSAwesome for web development

Composable componentsDeclarativePredictable

React Native brings these ideas to mobile

WHY REACT NATIVE ?Native apps vs Web appsNative is hard but feels goodWeb apps are familiar but compromises user eperienceReact native brings best of both worlds

WHY NATIVE IS HARDER THAN WEB ?Huge learning curveSlow development cycleHard to debug

WHY NATIVE IS BETTER THAN WEB ?Better feeling and experienceNative componentsSophisticated touch handlingParallelize work onto multiple threads

REACT NATIVELearn once and write everywhereEasy of learning and debugging from webNative experience and performance

QUICK STARTInstall depedencies: Xcode, node, watchmannpm install -g react-native-clireact-native init MyProjectOpen MyProject.xcodeproj and hit run in XcodeLook at project structure and index.ios.js

DEBUGGINGreact packager watches file changes and bundles on everychangeCMD + R to load code changesChrome developer tools & React developer tools

APIReact.createClass to create componentsBunch of react native componentsAppRegistry.registerComponent to register rootcomponentsStyleSheet.create for creating style sheets

COMPONENTSReact Native components are wrapper around native uicomponentThey provide declarative APIView -> divText -> spanImage -> imgTextInput -> input

STYLESCSS in javascriptSupport for only selected css properties

LAYOUTImplemented for layoutFlexbox is new layout module for web

Flexbox

CODE SAMPLE