1 of 10

Ishaq Hassan

Circle Member

An Introduction to React Native

Facebook for Developers Typography

Keynote Typography

KEYNOTE TYPOGRAPHY

Keynote Typography

2 of 10

What is React Native?

Build native mobile apps using JavaScript and React

With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

Facebook for Developers Typography

Keynote Typography

KEYNOTE TYPOGRAPHY

Keynote Typography

3 of 10

A React Native app is a real mobile app, not a web App
Don't waste time recompiling (Live Reload / Hot Reload)
Use your own native code when you need to
Learn once, write anywhere
Real Time view updates using state
Easily reusable components
High Performance because of native components

Benefits of React Native

Facebook for Developers Typography

Keynote Typography

KEYNOTE TYPOGRAPHY

Keynote Typography

4 of 10

Let’s see some Code!

This a simplest form of a React Native Component which show a text “Hello World” on your device using native UI components of the respective platform!

Facebook for Developers Typography

Keynote Typography

KEYNOTE TYPOGRAPHY

Keynote Typography

5 of 10

What about connecting to Native Code!

This a simplest example that how React Native Bridges native code to JavaScript!

Facebook for Developers Typography

Keynote Typography

KEYNOTE TYPOGRAPHY

Keynote Typography

6 of 10

How does it works?�

React Native has Bridges which connects native elements of OS to JavaScript

Facebook for Developers Typography

Keynote Typography

KEYNOTE TYPOGRAPHY

Keynote Typography

7 of 10

Is it production-ready?

"Just over one year old"
Battle-tested in FB apps (Ads, Groups)
Used by many companies already (Tesla, SoundCloud,AirBNB...)
Only "battle-tested" code is released

Facebook for Developers Typography

Keynote Typography

KEYNOTE TYPOGRAPHY

Keynote Typography

8 of 10

Who’s using React Native?

Tesla

Instagram

Walmart

WiX

Facebook for Developers Typography

Keynote Typography

KEYNOTE TYPOGRAPHY

Keynote Typography

9 of 10

Installation

Download and install NodeJs (to use node package manager or npm) : https://nodejs.org/en/download/
Download Yarn (a new package manager for JavaScript) : https://yarnpkg.com/lang/en/docs/install/
Now open new command window and run the following command (Paste and enter) : npm install -g react-native-cli
Please be patient while installation completes... don't close command window unless its done and keep Internet connected!
Open Command Window under any directory (e.g. Desktop) and type “react-native init MyFirstReactNativeProject ” in command window.
You can replace "MyFirstReactNativeProject" with any name without spaces!

Facebook for Developers Typography

Keynote Typography

KEYNOTE TYPOGRAPHY

Keynote Typography

10 of 10

So, Want to get started?

Getting Started

https://facebook.github.io/react-native/

Components

https://facebook.github.io/react-native/releases/next/docs/components-and-apis.html

Who’s using React Native?

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

Facebook for Developers Typography

Keynote Typography

KEYNOTE TYPOGRAPHY

Keynote Typography