Pengembangan

Aplikasi Bergerak
Week 01
React Native Introduction

Presented By:
Purnama Anaking, S.Kom, M.Kom

Telkom University Surabaya Program Studi S1 Sistem Informasi - Fakultas Rekayasa Inudstri | 2024
Planned Final Capabilities:

➔ Students are able to explain the basic knowledge and

concepts of React Native in mobile programming
technology.
Pre-Test with Kahoot!
Outline

● What is React Native ?

● Why use React Native ?
● Who uses React Native ?
● Core Components and Native Components
● React Fundamentals
 Pengembangan Aplikasi Bergerak

What is React Native?

➔ React Native is a JavaScript framework for writing real, natively

rendering mobile applications for iOS and Android.

➔ It’s based on React, Facebook’s JavaScript library for building user

interfaces, but instead of targeting the browser, it targets mobile
platforms.

➔ Learn once, write anywhere.

➔ Normally, you’d need to program your mobile app using Java (for
Android) and Swift/Obj-C (for iOS).

➔ React Native removes that requirement, leading to fully

functional apps on both platforms in much less time and using just
one coding language.

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

React Native Official Website

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Why Use React Native?

➔ Tried and trusted

➔ One codebase for two platforms

➔ Use the language you already know

➔ Growing all the time

➔ Etc

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Is React Native Popular?

➔ React Native is rising in popularity as a

convenient solution to build
cross-platform mobile apps with less
strain on your budget.

➔ Take a look at React Native's market

share:
◆ https://www.appbrain.com/stats/librar
ies/details/react_native/react-native

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Who Uses React Native?

➔ 2118 companies reportedly use React Native in their tech stacks,

including Shopify, Instagram, and Delivery Hero.

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Who Uses React Native?

➔ React Native is shaping mobile, web, and desktop

experiences within Meta’s product ecosystem, from
Facebook Marketplace, Messenger Desktop, Ads Manager
to the Oculus companion app and many more.

➔ Microsoft leverages the power of React Native to deliver

excellent customer experiences in some of its most well
known apps.

➔ All new mobile apps at Shopify are React Native and we are
actively migrating our flagship merchant admin app Shopify
Mobile to React Native as well.

➔ Wix is an early adopter of React Native and uses it for its

entire suite of applications.

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Who Uses React Native?

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

What is React Native (Video)

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
Core Component &
Native Component
 Pengembangan Aplikasi Bergerak

Views and Mobile Development

➔ In Android and iOS

development, a view is the
basic building block of UI: a
small rectangular element on
the screen which can be used
to display text, images, or
respond to user input.

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Native Components
➔ In Android development, you write views in Kotlin or Java

➔ In iOS development, you use Swift or Objective-C.

➔ With React Native, you can invoke these views with JavaScript using React
components.

➔ At runtime, React Native creates the corresponding Android and iOS views for
those components.

➔ Because React Native components are backed by the same views as Android and iOS,
React Native apps look, feel, and perform like any other apps.

➔ We call these platform-backed components Native Components.

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Core Components

➔ React Native also includes a

set of essential, ready-to-use
Native Components you can
use to start building your app
today.

➔ These are React Native's

Core Components.

➔ React Native has many Core

Components for everything
from form controls to
activity indicators.

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Components

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

React Fundamentals
➔ React Native runs on React, a popular open source library for building user
interfaces with JavaScript.

➔ To make the most of React Native, it helps to understand React itself.

➔ We’re going to cover the core concepts behind React:

Components JSX (Javascript XML)

Props State

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

ReactJS Official Website

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Expo & Snack

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Components

Functional Component
Class Component

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

JSX

➔ JSX: A syntax that lets you write elements inside JavaScript.

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Multiple Component

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Props

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

State

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
Any Questions?
 Pengembangan Aplikasi Bergerak

Task 1
➔ Individual task

➔ Review and develop week 01 lecture material.

➔ Arrange in report form (Telkom University Surabaya cover, Name, NIM, Report
contents)

◆ Among the contents of the report: MUST practice and explain React
Fundamentals (Component, JSX, Multiple Component, Props, State) at the
Snack Expo.

➔ Collected in .pdf format via E-Learning, no later than before week 02 lectures
start.

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023
 Pengembangan Aplikasi Bergerak

Task 1 Assessment Indicators

➔ Assessment Indicators:
a. Accuracy in explaining the material (50%)
b. Neatness of report presentation (10%)
c. Does not contain plagiarism (40%)

Institut Teknologi Telkom Surabaya Program Studi S1 Sistem Informasi - Fakultas Teknologi Informasi dan Bisnis | 2023