React native-meetup-talk
-
Upload
kiranabburi -
Category
Internet
-
view
62 -
download
2
Transcript of 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