How to Start with

Tomáš Trepka

React Native

Java, Swift, Cordova or RN?

Java, Swift (Objective-C)

• Native languages
• Freedom, performance
• Do you know them?

Cordova (or others on top of it, e.g. Ionic)

• Calls to native APIs but runs in WebView (HTML, CSS)
• Not really a native look and feel

React Native

• JS => native widgets, fast
• We know React and JS
• Sharing of code (not UI)
• Your favourite npm libraries, ES7, hot reload...
• Updates without waiting for store approval
• Possible to use native code
• Easy setup (or not?)

How to Start

Option 1)

Option 2)

OR

create-react-native-app

react-native init

1) create-react-native-app

• Easy, no manual setup (Xcode, Android Studio)
• Expo SDK

• Expo is slow and buggy
• Limited possibilites (libraries with native code)
• Eject halfway?

• Good start if you want to quickly play with RN
• eject or use option 2) for more freedom

• Runs on Expo framework
• "App in an app"

2) react-native init

• Freedom (libraries, build, customization...)
• Fast on both real device and emulator

• Tedious setup, reserve a whole day
• Not possible to develop for iOS without Mac

# download bazillion of tools like Android Studio, Java, Python...
# setup and install bazillion of packages, SDKs, whatever, from Android Studio
# expect at least one error that you will google for an hour
# enable hardware virtualization and run someshit.exe on Windows to be able to use it
# prepare a virtual device

yarn global add react-native-cli

react-native init AwesomeProject2

cd AwesomeProject2
react-native run-android

• Recommended option, setup is worth it
• Or eject, don't be scared

Working with Android Emulator

• Open Android studio > Start an empty project > List devices > Add device > Start device

• Useful shortcuts
  • CTRL + M - developer menu
    • Hot reload
    • Remote debugging
  • RR - reload

# for Expo
yarn start

Working with iOS Emulator

• Couldn't test yet :(

Basic App

• Like React, just use special components

• Inline styles, properties similar to CSS

<div> => <View>

<span> => <Text>

background-color => backgroundColor

• Positioning with flex, a bit different from CSS (flexDirection)

• Show example in editor

Thank you!

Questions?