React Native in a Nutshell CS498RK Who Am I? Im Sujay, a full - PowerPoint PPT Presentation

React Native in a Nutshell CS498RK

Who Am I? I’m Sujay, a full stack engineer at Samsara UIUC CS Bachelor’s and Master’s 2018 Working with Professor Kumar’s research group from 2014 to the end of time

Where Do I Work?

Some Details Our stack - $530 Million in Funding ($6 Billion Valuation) - React + Typescript - React Native - GraphQL - ~200 Engineers - Go - Offices in SF, San Jose, Atlanta, London

We use React Native!

Let’s Talk Mobile - Increasingly shift from desktop to mobile in the world - Virtually everybody has a smartphone - Mobile development primarily works in Swift and Java for iOS and Android

Native Mobile Dev Advantages Disadvantages - Availability of specific UI components - Re-compiling is slow - Gesture systems - New languages to learn - Device compatibility - Two separate code-bases for each - Sophisticated threading models language https://code.fb.com/android/react-native-bringing-modern-web-techniques-to-mobile/

Using WebViews - Popularized by Cordova, Ionic, Xamarin - Writing Javascript code inside of WebViews - Slow, doesn’t provide access to native libraries and processes

Enter React Native - Facebook’s solution to writing cross-platform apps - Use familiar, popular web technologies like React and flexbox - Make development fast!

Who Uses React Native?

React https://facebook.github.io/react-native/

React <div> === <View> <span> === <Text> https://facebook.github.io/react-native/

Styling Inline: - Javascript objects “Classes” - camelCased properties What’s best practice?

Flexbox! flexDirection, alignItems, justifyContent, etc

Getting Started

Let’s Get Started Choose your own adventure Expo CLI Quickstart - Requires no native editor installations, easy to get started React Native CLI Quickstart - Requires native editor installations, more feature robust More Info: https://facebook.github.io/react-native/docs/getting-started

Expo is Magical https://expo.io/

My Preferred Editor & Environment CLI: React Native CLI Editor of Choice: VSCode (lots of nice plugins out of the box) OS : Mac App: iOS

Development in React Native - Fast Refresh - Live Reloading - Debugging through your browser - Cmd + R

Demo Time

React Native Development === Mobile Development

Handling Text Input - The keyboard pops up and covers a third of the screen

Difgerences between iOS & Android

Touchable Areas Clicking is different from touching a screen!

Follow Native UI Guidelines Try to use your app on an actual device! iOS : https://developer.apple.com/design/human-interface-guidelines/ios/overview/them es/ Android: https://material.io/

Understand Native App Modules - Create your own native bridges between a native module and React Native! - When importing new libraries and npm modules, you may need to link native dependencies through XCode and Android Studio

React Native Limitations - Performance Bottlenecks - Crossing the React Native Bridge

Popular Libraries & Resources

Redux - Manage global state - Works well by connecting to AsyncStorage https://redux.js.org/

React Navigation Manage screen transitions between your app https://reactnavigation.org/

React Native Docs https://facebook.github.io/react-native/docs/getting-started

Awesome React Native http://www.awesome-react-native.com/

https://github.com/facebook/flipper

Data Driven Design Group

Opico Try it at: onelink.to/opico Want to dev on it? Talk to Ranjitha

Say Hi! Twitter: @sujaykhandekar Github: sskhandek My Website: sujay.io Email: sujay@samsara.com