An introduction to React Native and an overview of its developer experience to an audience primarily made up of iOS developers and designers.
Event: CocoaHeads Montreal Location: Shopify Montréal
An Introduction toReact Native
View Slide
Hi, I’m NaoufalNaoufal
Hi, I’m No-FellSenior UI Engineer @ Unsplash
UnsplashDo whatever you want high-resolution photos
What is React Native
First, What is React
React• JavaScript Library• A new declarative way of building UIs• One-way data flow
Declarative UI
Example
Example• Liked• Count• Color• Transition
The Imperative Way• Liked• Count• Color• Transition
The Declarative Way• Liked• Count• Color• Transition
Declarative Wins• Less Code• Easier to Reason about the Application• Faster Development
React Structure
React StructureReactReact NativeReact DomObjective-C/Swift/Java
React Native
React Native• It’s React• Manipulates Native UI Components• Powerful Native Plugin API• CSS Style with Flexbox• Apple Approved OTA Updates
Development Tools
Development Tools• Live Reload• Hot Module Replacement• Inspector• Chrome Debugger
Apps
Demo
Connect@naoufal on Twitter & GitHub