marukami/slides.md

## slides.md

      
    Raw
  

              slides.md
            
          
    footer: @sir_tilbrook https://www.youtube.com/c/anzcoders
slidenumber: true
Android & React Native


Why React Native


^ Uber Android App 40min compile time
^ Simple Apps take 10s of seconds
^ Code sharing
^ JavaScript is evolving

TypedJS


Flow - FaceBook
TypeScript - Microsoft
F# - Fable
Kotlin - JetBrains (Experimental)
ReasonML - FaceBook (Experimental)
and more ClojureScript, ScalaJs, Haskell to JS, Elm (unofficially)

^ Kotlin experimental native iOS support

Setup NPM

# MacOS
brew install node

# Windows
choco install nodejs

# Linux
https://nodejs.org/en/download/package-manager

Quick Start

npm install -g create-react-native-app

create-react-native-app AwesomeProject

cd AwesomeProject
npm start

Live Demo


^ http://www.exfo.com/PageFiles/268914/brown-greenField.jpg

Project Structure


Setup package.json

In the project root directory save this config to package.json
{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  }
}

Install React Native

$ npm install --save react react-native

Add React Native

// Module build.gradle
dependencies {
    ...
    compile "com.facebook.react:react-native:+" // From node_modules.
}
^ Only add react to modules that are using it.
^ React by default has a few native libraries and comes in at ~14 MB
^ Single CPU architecture are ~4.2 MB

Add React Native

// Root build.gradle
allprojects {
    repositories {
        ...
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
    ...
}

React Crash Course

render() {
  return (
    <View style={styles.container}>
      <Image 
        style={styles.image}
        source={{uri: 'https://pbs.twimg.com/profile_images/849930257947803649/idZ3HvPV_400x400.jpg'}}
      />
      <TouchableHighlight onPress={openTwitter}>
        <Text>@sir_tilbrook</Text>
      </TouchableHighlight>
    </View>
  );
}

State and Props

class Counter extends React.Component { 
  …
}

State and Props

// <Text style={styles.counter} count={10} />
class Counter extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    };
  }

  componentDidMount = (nextProps) => {
    this.setState((prevState) => {
      return {
        ...prevState,
        count: nextProps.count,
      }
    });
  }
}

Register Components

class Counter extends React.Component { … }

AppRegistry.registerComponent('Counter', () => Counter);


Challenges


Navigation - 4 Libraries
Two List types - FlatList, List
Binary size - Ships with several native libraries.
OverAir updates - Only updates JS