Introduction to

React Native

Jamon Holmgren

  • Co-Founder and CTO at Infinite Red
  • Software Engineer
    (PHP, Ruby, Objective-C, JavaScript)
  • Open Source Developer
  • React Native Core Team
  • Remote worker
  • Married, 4 kids, Lutheran,
    live in SW Washington

@JamonHolmgren

Connect

community.infinite.red

reactnative

newsletter.com

React Native

What is React?

  • Released in 2013
  • By Facebook
  • UI as a function of state
  • Virtual DOM

UI as a function of state

source http://hackflow.com/blog/2015/03/08/boiling-react-down-to-few-lines-in-jquery/

What is React Native?


  • Based on ReactJS
  • Multiple Platforms (iOS, Android, Windows, more)
  • Renders Native UI Elements
  • NOT a WebView / browser
  • The JS does not compile to native code
  • "Learn once, write anywhere"

Native

Uses the built-in "native" APIs to create views, communicate with servers (network), access GPS, etc

JavaScript

Runs JavaScript code to determine business logic, coordinate events, resolve view changes, etc

Two Environments, One App

JavaScript Layer

  • Uses a JavaScript engine built for Safari
  • On iOS: embedded JavaScript Core (JSC)
  • On Android: bundled JavaScript Core (JSC)

Native Layer

  • On iOS: Objective-C
  • On Android: Java

Code example: Screen 

import * as React from "react"
import { View } from "react-native"
import { Text, Button, Screen, Footer } from "../../components"

export class WelcomeScreen extends React.Component {
  nextScreen = () => this.props.navigation.navigate("tabs")

  render() {
    return (
      <Screen>
        <View style={TOP_CONTAINER}>
          <Text tx="welcomeScreen.header1" style={HEADER1} />
          <Text tx="welcomeScreen.header2" style={HEADER2} />
          <Text tx="welcomeScreen.subtitle" style={SUBHEADER} />
        </View>
        <Footer>
          <Button
            tx="welcomeScreen.nextScreenButton"
            onPress={this.nextScreen}
            style={{ width: 335, height: 50, borderRadius: 0 }}
            textStyle={{ fontSize: 14, fontWeight: "500" }}
          />
        </Footer>
      </Screen>
    )
  }
}

Who Uses React Native?

http://facebook.github.io/react-native/showcase.html

Declarative Code

$("#btn").click(function() {
  if ($(this).text() === 'Add Highlight') {
    $(this).addClass("highlight")
    $(this).text('Remove Highlight')
  } else {
    $(this).removeClass("highlight")
    $(this).text('Add Highlight')
  }
})
toggleHighlight = () => {
  this.setState({ highlight: !this.state.highlight })
}

<Btn
  highlight={this.state.highlight}
  onClick={this.toggleHighlight}
/>

https://tylermcginnis.com/imperative-vs-declarative-programming/

JSX

JSX

  • JSX adds XML-like syntax to JavaScript.
  • Can use React Native without JSX.

JSX

This:

Compiles to: 

<Text color="blue">Click Me</Text>
React.createElement(Text, {color: 'blue'}, 'Click Me')

 JSX    vs.    HTML

<View>
  <Text>Hello World</Text>
</View>
<button onClick="myFunction()">
<div>
  <p>Hello World</p>
</div>
<View>

</View>
<div>

</div>
<input type="text">
<TextInput />
<Button onPress={myFunction} />

Embedding Expressions into JSX

const person = { name: ‘Chris’, age: 22 }
<View>
  <Text>Hello { person.name }</Text>
</View>
// "Hello Chris"

JSX Children

<View>
  <Text>Hello!</Text>
  <Text>Good to see you here.</Text>
</View>

JSX

  • HTML-like structure in the same file as our JS code

 

  • JSX is transformed into actual JS code (via Babel)

 

  • tl;dr  →  JSX === Syntactic sugar

React Native Core Components

  • View
  • ScrollView
  • Text
  • TextInput
  • Image
  • TouchableOpacity

React Native vs HTML

HTML React Native
<div> <View>
<p> <Text>
<input /> <TextInput />
<button> <TouchableOpacity />

Basic React Native Components

import React from 'react'
import { View, Text } from 'react-native'

class MyComponent extends React.Component {
 render() {
    return (
      <View>
        <Text>Hello World</Text>
      </View>
    )
  }
}

// example usage

<MyComponent />

React

class

React Native CLI

$ react-native init HelloWorld
✨  Done in 4.01s.
To run your app on iOS:
   cd /Users/aj/Projects/HelloWorld
   react-native run-ios
   - or -
   Open ios/HelloWorld.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/aj/Projects/HelloWorld
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android




$ cd HelloWorld

$ react-native run-ios
App.js

Styling

style object

const styles = {
  text: {
    color: "red"
  }
}

export App = () => {
  return <Text style={styles.text}>Hello World</Text>
}

Styling

StyleSheet
// ... imports ⬆︎

export class App extends Component {
  render () {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello World</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    width: 300,
    height: 130
  },
  text: {
    color: "red"
  }
})

Styling

  • Styles usually match CSS
  • Prop names are camelCased
backgroundColor
background-color

vs

FlexBox

Flexbox is designed to provide a consistent layout on different screen sizes.

You will normally use a combination of:

  • flexDirection
  • alignItems
  • justifyContent

to achieve the right layout.

Packing List App

https://github.com/infinitered/packing-list

Ignite

  • CLI, boilerplates, and more
  • Large community
  • Battle-tested stack
  • https://github.com/infinitered/ignite

Follow Us

  • On Twitter:
    @jamonholmgren
    @infinite_red
    @ir_designers
     
  • On Github:
    @jamonholmgren
    @infinitered

Chain React Conf

  • React Native
  • Talks, lighting talks, and panel
  • In Portland
  • At the Armory (Pearl district)
  • Workshops July 10
  • Conference July 11-12
  • infinite.red/ChainReactConf

Questions?

Fin

Thank you all!