Dasar-dasar pemrograman React

Native (bagian 2)

Program Studi Teknik Informatika

Institut Teknologi Sumatera
 ✔ React Native App Architecture

✔ Component

✔ Create a new component #MyFirstMobileApps

✔ State and Props

Outline ✔ React hooks

✔ Eslint

✔ Native Modules (iOS and Android)

PROGRAM STUDI TEKNIK INFORMATIKA INSTITUT TEKNOLOGI SUMATERA 2

React App
Architecture

PROGRAM STUDI TEKNIK INFORMATIKA INSTITUT TEKNOLOGI SUMATERA 3

Component

PROGRAM STUDI TEKNIK INFORMATIKA INSTITUT TEKNOLOGI SUMATERA 4

 using Expo Cli

Create a new
component using React Native Cli
#MyFirstMobileApps

PROGRAM STUDI TEKNIK INFORMATIKA INSTITUT TEKNOLOGI SUMATERA 5

 There are two types of data that control a component: props and
state. props are set by the parent and they are fixed throughout the
lifetime of a component. For data that is going to change, we have
to use state.
State and
In general, you should initialize state in the constructor, and then
Props call setState when you want to change it.

PROGRAM STUDI TEKNIK INFORMATIKA INSTITUT TEKNOLOGI SUMATERA 6

 React Hooks is Function based components (Optional).
Motivation:
● It’s hard to reuse stateful logic between components
● Complex components become hard to understand
● Classes confuse both people and machines
React Hooks

PROGRAM STUDI TEKNIK INFORMATIKA INSTITUT TEKNOLOGI SUMATERA 7

 ESLint is a tool for identifying and reporting on patterns found in
ECMAScript/JavaScript code, with the goal of making code more
consistent and avoiding bugs. In many ways, it is similar to JSLint
and JSHint with a few exceptions:
Eslint ❏ ESLint uses Espree for JavaScript parsing.
❏ ESLint uses an AST to evaluate patterns in code.
❏ ESLint is completely pluggable, every single rule is a plugin and
you can add more at runtime.

PROGRAM STUDI TEKNIK INFORMATIKA INSTITUT TEKNOLOGI SUMATERA 8

 Why do we need to learn about native modules?
React Native app needs to access a native platform API that is not available by default in
JavaScript, for example the native APIs to access Apple or Google Pay.

Native Module Setup

Native There are two ways to write a native module for your React Native application:

Modules (iOS 1. Directly within your React Native application’s iOS/Android projects
2. As a NPM package that can be installed as a dependency by your/other React Native
applications
and Android) Create a Calendar Native Module (Android)

Create a Calendar Native Module (iOS)

PROGRAM STUDI TEKNIK INFORMATIKA INSTITUT TEKNOLOGI SUMATERA 9

Learning By Live Code
Doing

PROGRAM STUDI TEKNIK INFORMATIKA INSTITUT TEKNOLOGI SUMATERA 10

Thank You

11