1 of 52

React Native

Overview

Bonnie Eisenman

NYC JavaScript React Group

​

Slides: http://bit.ly/03-23-slides

2 of 52

Hi, I'm Bonnie.

Slides: http://bit.ly/03-23-slides

3 of 52

So what is React Native?

Slides: http://bit.ly/03-23-slides

4 of 52

Using JavaScript to write truly native, cross-platform apps for iOS & Android.

Slides: http://bit.ly/03-23-slides

5 of 52

Slides: http://bit.ly/03-23-slides

6 of 52

React is a JavaScript library

for building user interfaces.

Slides: http://bit.ly/03-23-slides

7 of 52

Slides: http://bit.ly/03-23-slides

8 of 52

Components

React component

properties, state

In React, UI is a function of state and props.

Slides: http://bit.ly/03-23-slides

9 of 52

Describe your UI with React,

& React renders it for you.

Slides: http://bit.ly/03-23-slides

10 of 52

Wait, why render to the DOM at all?

Slides: http://bit.ly/03-23-slides

11 of 52

Slides: http://bit.ly/03-23-slides

12 of 52

React Native is

actually native.

Slides: http://bit.ly/03-23-slides

13 of 52

React vs React Native

is just

web vs mobile

Slides: http://bit.ly/03-23-slides

14 of 52

Browser DOM versus mobile

  • <View>
  • <Image>
  • <Text>
  • <ListView>
  • <div>
  • <img>
  • <span>, <p>
  • <ul>, <ol>

Slides: http://bit.ly/03-23-slides

15 of 52

You're invoking real APIs!

Slides: http://bit.ly/03-23-slides

16 of 52

(that's it!)

Slides: http://bit.ly/03-23-slides

17 of 52

Using React Native

Slides: http://bit.ly/03-23-slides

18 of 52

render() {

return (

<View>

<Text>Hello, NYC</Text>

</View>

);

}

Slides: http://bit.ly/03-23-slides

19 of 52

<DatePickerIOS

date={this.state.date}

mode="date"

/>

Slides: http://bit.ly/03-23-slides

20 of 52

Slides: http://bit.ly/03-23-slides

21 of 52

22 of 52

Styling?!

Slides: http://bit.ly/03-23-slides

23 of 52

24 of 52

25 of 52

(no but like actually)

further reading

26 of 52

container: {

flex: 1,

alignItems: 'center',

paddingTop: 30

}

Slides: http://bit.ly/03-23-slides

27 of 52

28 of 52

29 of 52

30 of 52

Developer Setup

Slides: http://bit.ly/03-23-slides

31 of 52

It's just normal mobile dev, with JavaScript.

Slides: http://bit.ly/03-23-slides

32 of 52

33 of 52

34 of 52

35 of 52

Slides: http://bit.ly/react-native-hack-summit

36 of 52

Over-the-air updates!

Slides: http://bit.ly/react-native-hack-summit

37 of 52

38 of 52

Working with React Native

  • Mostly, just like React for Web
  • Standardized styling API
  • Native performance & look-and-feel
  • Native API access
  • Faster development process

Slides: http://bit.ly/03-23-slides

39 of 52

So what's it mean?

Slides: http://bit.ly/03-23-slides

40 of 52

Mobile is hard.

Slides: http://bit.ly/03-23-slides

41 of 52

Developer experience matters.

Slides: http://bit.ly/03-23-slides

42 of 52

Your tools should solve real problems.

Slides: http://bit.ly/03-23-slides

43 of 52

React Native Advantages

  • No more silos
  • Code sharing without compromising on quality
  • Shorter feedback cycle
  • More tools
  • Native development, when you need it

Slides: http://bit.ly/03-23-slides

44 of 52

Slides: http://bit.ly/03-23-slides

45 of 52

So what's the catch?

Slides: http://bit.ly/03-23-slides

46 of 52

Open Problems

  • Best practices around hybrid apps
  • Navigator complexity
  • Animations (see: react-motion, Animated, etc)
  • Upgrade path

Slides: http://bit.ly/03-23-slides

47 of 52

JavaScript

48 of 52

49 of 52

Who's Using It?

Slides: http://bit.ly/03-23-slides

50 of 52

What's Next?

  • More platforms?
  • More solutions to common problems
    • Better gesture handling
    • Improved animations
    • Over-the-air updates
  • Tool simplification?
  • ???

Slides: http://bit.ly/03-23-slides

51 of 52

Slides: http://bit.ly/03-23-slides

52 of 52

Thanks!

  • Talk to me! I'm @brindelle.
  • Buy my book! 40% off with code AUTHD at bit.ly/learningreactnative
  • Thanks!

Slides: http://bit.ly/03-23-slides