1 of 29

Introduction to React Native

Dani Akash S

2 of 29

What is a React Native App?

3 of 29

Advantages

  • Android and iOS apps with Single Codebase
  • Native Performance
  • Increased Developer Productivity
  • Use Native Code when needed
  • Can be integrated into existing Native App

4 of 29

The Reactive World

5 of 29

Modern Single Page Applications are complex

There is too much to display

  • Text
  • Images
  • Forms
  • Ads
  • Animation
  • Static Content
  • Dynamic Content
  • Responsive Designing

There are too many events to Handle

  • Clicks
  • Form Submissions
  • Real Time Updates
  • Ajax Calls
  • Analytics
  • Navigation

6 of 29

7 of 29

8 of 29

9 of 29

10 of 29

11 of 29

Managing the State of all the components is difficult.

12 of 29

Changes to the DOM

Every Event Triggers a change.

  • Changes to Visual Styles is called repaint
  • Changes to layout of DOM elements is called reflow
  • Repaint and Reflow are blocking events

13 of 29

Repaints and Reflows are Expensive

14 of 29

React

A library for building User Interfaces.

15 of 29

How React Works

React organizes the UI into separate components and renders them.

  • State and Props are used to pass data to the React’s view layer.
  • React does not make any assumptions based on the rest of the technology stack.
  • It simply re-renders the UI whenever state or props changes.
  • Before rendering the HTML it compares the changes using Virtual DOM.
  • It then renders the part of HTML that is different from the computed Virtual DOM.
  • React has several lifecycle methods that are called at different phases of the component.

16 of 29

Lifecycle Methods

UnMounting

  • componentWillUnmount()

​

​

Updating

Mounting

​

17 of 29

Advantages

  • Rendering is fast due to Virtual DOM.
  • Since each part of the application is organized into components, the code becomes more maintainable and scalable.
  • Lifecycle methods make it easy to update View layer based on Events.
  • Managing component states for large applications can be made simple using a state management library.

18 of 29

Getting Started with React Native

19 of 29

Development Environment

  1. Node.js
  2. React Native Cli
  3. Android Studio
  4. XCode (only on Mac)
  5. JS Friendly Text Editor of your choice

https://facebook.github.io/react-native/docs/getting-started.html

20 of 29

Let’s code!

21 of 29

Developer Friendly Tools

Exclusive on React Native!!

  • Hot Reloading
  • Layouts using Flexbox
  • Wireless Debugging
  • UI frameworks
  • Blueprints to kick start your project
  • Community powered libraries

22 of 29

Checkout the following libraries!

23 of 29

Lottie

By Airbnb - https://airbnb.design/lottie/

Easily add High Quality animations directly from After Effects

24 of 29

React Native Maps

By Airbnb - https://github.com/airbnb/react-native-maps

Display Maps in your React Native app

25 of 29

Native Base

By GeekyAnts - https://nativebase.io/

Essential UI Components for building an App

26 of 29

React Navigation

By React Community - https://reactnavigation.org/

Easy to use Navigators

27 of 29

Create React Native App

By React Community - https://github.com/react-community/create-react-native-app

Build React Native app on any OS.

No Android Studio or XCode needed!

28 of 29

And much more to make development simpler…

​

​

​

​

Feel Free to Explore!

29 of 29

Thank You!

Connect with me on:

​

  • @DaniAkashS
  • linkedin.com/in/daniakash