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

▶
react native in a nutshell
SMART_READER_LITE
LIVE PREVIEW

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

Mar 02, 2023 288 likes •688 views

React Native in a Nutshell CS498RK Who Am I? Im Sujay, a full stack engineer at Samsara UIUC CS Bachelors and Masters 2018 Working with Professor Kumars research group from 2014 to the end of time Where Do I Work? Some Details

slide-1
SLIDE 1

React Native in a Nutshell

CS498RK

slide-2
SLIDE 2

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

slide-3
SLIDE 3

Where Do I Work?

slide-4
SLIDE 4

Some Details

Our stack

  • React + Typescript
  • React Native
  • GraphQL
  • Go
  • $530 Million in Funding

($6 Billion Valuation)

  • ~200 Engineers
  • Offices in SF, San Jose,

Atlanta, London

slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7

We use React Native!

slide-8
SLIDE 8

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

slide-9
SLIDE 9

Native Mobile Dev

https://code.fb.com/android/react-native-bringing-modern-web-techniques-to-mobile/

Advantages

  • Availability of specific UI components
  • Gesture systems
  • Device compatibility
  • Sophisticated threading models

Disadvantages

  • Re-compiling is slow
  • New languages to learn
  • Two separate code-bases for each

language

slide-10
SLIDE 10

Using WebViews

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

Enter React Native

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

Who Uses React Native?

slide-13
SLIDE 13

React

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

slide-14
SLIDE 14

React

<div> === <View> <span> === <Text>

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

slide-15
SLIDE 15

Styling

Inline:

  • Javascript objects

“Classes”

  • camelCased properties

What’s best practice?

slide-16
SLIDE 16

Flexbox!

flexDirection, alignItems, justifyContent, etc

slide-17
SLIDE 17

Getting Started

slide-18
SLIDE 18

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

slide-19
SLIDE 19

Expo is Magical

https://expo.io/

slide-20
SLIDE 20

My Preferred Editor & Environment

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

slide-21
SLIDE 21

Development in React Native

  • Fast Refresh
  • Live Reloading
  • Debugging through your browser
  • Cmd + R
slide-22
SLIDE 22

Demo Time

slide-23
SLIDE 23

React Native Development === Mobile Development

slide-24
SLIDE 24

Handling Text Input

  • The keyboard pops up and covers a

third of the screen

slide-25
SLIDE 25

Difgerences between iOS & Android

slide-26
SLIDE 26

Touchable Areas

Clicking is different from touching a screen!

slide-27
SLIDE 27

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/

slide-28
SLIDE 28

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

slide-29
SLIDE 29

React Native Limitations

  • Performance Bottlenecks
  • Crossing the React Native Bridge
slide-30
SLIDE 30

Popular Libraries & Resources

slide-31
SLIDE 31

Redux

  • Manage global state
  • Works well by connecting to AsyncStorage

https://redux.js.org/

slide-32
SLIDE 32

React Navigation

Manage screen transitions between your app

https://reactnavigation.org/

slide-33
SLIDE 33

React Native Docs

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

slide-34
SLIDE 34

Awesome React Native

http://www.awesome-react-native.com/

slide-35
SLIDE 35

https://github.com/facebook/flipper

slide-36
SLIDE 36
slide-37
SLIDE 37

Data Driven Design Group

slide-38
SLIDE 38

Opico

Try it at:

  • nelink.to/opico

Want to dev on it? Talk to Ranjitha

slide-39
SLIDE 39

Say Hi!

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