React Native Beginners Workshop

Intro

Rahul Gaba

Atul R

Pre-requisites

Goal

  • Understand how react-native works.
  • Build  a native android and iOS app.
  • Setup CI for automated builds.
  • Conventions to manage the codebase.

Note Taker

react-native

Another JS framework?

A revolutionary framework which lets you build native apps using JS*

React-Native Architecture 🏛

  • Native Code/Modules

  • JavaScript VM

React-Native Internals 🛠

Get, Set.. Code!

git checkout chapter-1
yarn install

yarn android or yarn ios

Get, Set.. Code!

Task #1: Run Hello world app

Get, Set.. Code!

Get, Set.. Code!

Task #1: Run Hello world app

Debugging

Mac

iOS: cmd+ctrl+z


Android: cmd+m

Windows

iOS: NA

 

Android: ctrl+m

The Boilerplate 🍽

Get, Set.. Code!

Start writing components

Get, Set.. Code!

Task #2: Adding ESLint, githooks

yarn
git checkout chapter-2

yarn android OR yarn ios

Get, Set.. Code!

Task #3: Adding ESLint, githooks

Speeding up development with some ES7 Features ⏩

  • ES6 Classes
  • Class properties instead of constructor
  • Arrow functions instead of class methods
  • Object rest spread

Using ES7 features

Testing 🙇

  • What's the use of testing UI code?
  • Snapshots
  • Testing stateful components using Enzyme

Get, Set.. Code!

Task #3: Write test cases for the code so far

yarn
git checkout chapter-3

Styling 💅

  • Flexbox
  • Theme variables
  • Separating styles from component code

Get, Set.. Code!

Task #4: Style the components

git checkout chapter-4

Get, Set.. Code!

Task #4: Style the components

Before

After

Using third party modules 📦

Get, Set.. Code!

Task : Add react-native-vector-icons using react-native link

BREAK

DevOps ✈️

  • Lint and tests with coverage should run whenever a pull request is raised.

  • CI builds and publish app to the internal team testers on every merge to master.

  • Manual Building capability for developers

 

To see circleci build: https://goo.gl/uzgNp1

Redux 🗄

  • Why state management?

  • Reducers/Actions/Dispatch

  • Presentational Components VS Container Components

Redux 🗄

Get, Set.. Code!

Task #6: Add functionality to our app using redux

git checkout chapter-6

Get, Set.. Code!

Task #6: Add functionality to our app using redux

Navigation 🛣

  • How navigation happens in native applications?

  • Types of navigators offered by react-navigation

  • Navigate using redux-actions

Navigation 🛣

A Stack in native apps

Get, Set.. Code!

Task #7: Add multipage navigation to our app

git checkout chapter-7

Get, Set.. Code!

Task #7: Add multipage navigation to our app

Porting the app to web

git checkout chapter-8

Task #8: Add a Link component to our app that should show up the link passed to it on a separate tab in browser on  both android and web

Custom Native Modules 🍱

  • Do I need to know Java/Objective-C?
  • Writing Native-wrappers of existing native modules.
  • Writing a Device Module for both Android and iOS

Get, Set.. Code!

Task #9: Create a custom module which returns the device name

git checkout chapter-9

Task #11: Create a custom module which returns the device name

References

  • http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

  • https://medium.com/differential/managing-configuration-in-react-native-cd2dfb5e6f7b

  • https://medium.com/the-react-native-log/comparing-the-performance-between-native-ios-swift-and-react-native-7b5490d363e2

Q&A

The End

Feedback: https://goo.gl/PXLjov

Made with Slides.com