Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react_native_training.pdf
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Randy Vianda Putra
November 23, 2018
Programming
290
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
220
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
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.6k
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
mom0tomo
8
3.2k
The NotImplementedError Problem in Ruby
koic
1
740
ふつうのFeature Flag実践入門
irof
7
3.8k
メソッドのジェネリクスでGoの夢は広がるか? / Kyoto.go #65
utgwkk
3
730
AIで効率化できた業務・日常
ochtum
0
130
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
ioki
0
190
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
hjmkth
1
200
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
gawa
12
3.6k
TAKTでAI駆動開発の品質を設計する
j5ik2o
6
1.2k
New "Type" system on PicoRuby
pocke
1
860
スマートグラスで並列バイブコーディング
hyshu
0
130
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
310
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
Everyday Curiosity
cassininazir
0
230
Building Flexible Design Systems
yeseniaperezcruz
330
40k
The Pragmatic Product Professional
lauravandoore
37
7.3k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
330
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1.1k
GitHub's CSS Performance
jonrohan
1033
470k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
230
Into the Great Unknown - MozCon
thekraken
41
2.6k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.3k
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