Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
react_native_training.pdf
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Randy Vianda Putra
November 23, 2018
Programming
300
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
react_native_training.pdf
Randy Vianda Putra
November 23, 2018
More Decks by Randy Vianda Putra
See All by Randy Vianda Putra
Step by Step Guide to Becoming Frontend Developer
randyviandaputra
0
240
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
randyviandaputra
0
260
Berkarir Sebagai Frontend Developer
randyviandaputra
1
500
Introduction to Full Stack JS
randyviandaputra
1
230
Intro to React 360
randyviandaputra
0
370
Introduction_To_React.pdf
randyviandaputra
0
310
Micro_Frontend.pdf
randyviandaputra
2
430
Other Decks in Programming
See All in Programming
Rでドレミ/Do-Re-Mi_with_R
florets1
0
130
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
akase244
0
160
re:Inventに行く前に知っておきたい現地参加のノウハウ
nokomoro3
0
460
Vue Fes Japan の “作る側”に関わってみて
naokihaba
1
180
ActionController meets Protocol Buffers
sorah
0
670
Compiling a real-world CLI tool to native with Static Hermes
tmikov2023
0
130
Zero-Tap Sign-In対応、結局何をすればいいの?
mitohato14
0
360
あなたの await、OS まで届いてる? strace で覗く JavaScript の非同期
hasutosasaki
1
1k
Kotlinの15年とServer-Side Kotlin
n_takehata
1
160
個人開発者よ、Honoを使え(おじさんver)
tanahiro2010
2
270
自作Discord音声botをLambda MicroVMsに移行した話 / Migrating My Discord Voice Bot to Lambda MicroVMs
akihisaikeda
0
140
Domain-Driven Transformation
hschwentner
2
2.3k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.6k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
500
SEO for Brand Visibility & Recognition
aleyda
0
4.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.5k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
3.5k
Believing is Seeing
oripsolob
1
250
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
790
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
2
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
409
67k
Building the Perfect Custom Keyboard
takai
2
910
Transcript
Build First Mobile App With React Native RANDY VIANDA PUTRA
Introduction
1. Understand how to install React Native 2. Understand the
concept of React Native 3. Build first application using React Native 4. Can be implemented Agenda
Prerequisite ?
1. Basic Javascript (ES6) 2. Basic understanding of npm &
how it works 3. Knowledge of how to use command line Prerequisite
1. Node version >= 5 2. JDK (Java Development Kit)
8 3. Xcode (to run on IOS Simulator) 4. Genymotion / Android Studio (to run on Android Simulator) Environment
Let’s Start :-)
1. Build using React 2. Build cross platform apps using
javascript 3. Target not only ios & android, but also Apple TV, VR, AR, Windows & Desktop 4. Release 2015 March 5. Learn once write everywhere 6. Rapidly gaining in popularity & adoption What is React Native ?
Who’s using React Native ?
1. Faster speed of development 2. Lower cost of development
a. Code reuse b. Easier to find developers 3. Ship accross multiple platform 4. Simple code 5. One for all :-D Why React Native ?
How does React Native work ? <Button/> Button UI JS
Create a button Button pressed
Let’s Start Coding :-)
1. React Native CLI 2. Create React Native App CLI
Creating a new React Native Project
Components, Rendering & Lifecyles The main idea behind react
1. Represent a piece of UI 2. Can be created
in one of two ways : 1. Stateless (function) 2. Statefull (class) Components
1. Creating / Mounting 2. Updating 3. Unmounting 3 types
of component lifecycles
Creating / Mounting
Updating
Unmounting
Lifecycles
Data
State
Props
Build Simple Application Using React Native Study Case
Thank You :-) github.com/randyviandaputra