React Native Workshop

Kadi Kraman

Kadi Kraman

Senior Software Engineer at Formidable

Using React for 4 years

React Native for 2 years

@kadikraman

A bit about you

21 Attendees

9 Windows

8 Mac

5 Linux

Laptop

14 Android

4 iPhone

3 - ?

Phone

Device

Experience

6 - have used React before

(of whom 1 also has React Native experience!)

12 - no React experience

3 - ?

Agenda

React Native Overview

Setup (max 30 minutes)

11 lessons + 5 stretch goals

Lighting Talk

Workshop

Pair up!

React Native

Build once, run anywhere

iOS

Android

Objective C, Swift

Java, Kotlin

Apple Store

Play Store

JavaScript

Expo

React Native with Training Wheels

Expo

learning, prototyping, MVPs

long term projects, native customisation

React (Native)

JavaScript User Interface Library

CSS (.css)

HTML (.html)

JavaScript (.js)

Classic Frontend App

React App

Component

Component

Component

// App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
// app.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #09d3ac;
}
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Text

Hello, world!
<Text>Hello, world!</Text>

Web

Native

Content

<div>
  Hello, world!
</div>
<View>
  <Text>Hello, world!</Text>
</View>

Web

Native

Buttons

<TouchableOpacity onPress={() => { /* do something */ }}>
  <Text>Press me!</Text>
</TouchableOpacity>

Web

Native

<button onPress={() => { /* do something */}}>
  Click me!
</button>

Inputs

<TextInput
  value={text}
  onChangeText={newValue => setText(newValue)}
/>

Web

Native

<input
  type="text"
  value={text}
  onChange={event => handleTextChange(event.target.value)}
 />

Lists

<FlatList
  data={users}
  renderItem={({ item }) => <Text>{item.name}</Text>}
/>

Web

Native

users.map((user) => <div>{user.name}</div>)

Coding time!

Real-time chat app

DO NOT clone the repo!

 ⏰ In ~1 hour, I will start running though the tutorial

What next?

Testing

React Native Testing Library (unit) https://github.com/callstack/react-native-testing-library

Detox (end to end) https://github.com/wix/Detox

React Native Workshop (HackConf)

By Kadi Kraman

React Native Workshop (HackConf)

HackConf 2019 https://www.hackconf.bg/en/

  • 884