Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An Introduction to React Native

Naoufal Kadhom
April 12, 2016
Technology
0
950

An Introduction to React Native

An introduction to React Native and an overview of its developer experience to an audience primarily made up of iOS developers and designers.

Event: CocoaHeads Montreal
Location: Shopify Montréal

Naoufal Kadhom

April 12, 2016
Tweet

More Decks by Naoufal Kadhom

See All by Naoufal Kadhom
React Native Payments: Bringing the Payment Request API to React Native
naoufal
2
2.6k
Mobile Payments with React Native
naoufal
2
730
Exposing Native Modules with React Native
naoufal
1
810

Other Decks in Technology

See All in Technology
Forget efficiency – Become more productive without the stress
ufried
0
150
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
6.1k
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン　〜2024年版 ハンズオンの構想〜
horsewin
9
2.1k
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
バクラクにおける可観測性向上の取り組み
yuu26
3
420
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
180
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
640
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
480
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220

Featured

See All Featured
Rails Girls Zürich Keynote
gr2m
93
13k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Designing for humans not robots
tammielis
249
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Designing for Performance
lara
604
68k
How STYLIGHT went responsive
nonsquared
95
5.2k

Transcript

  1. An Introduction to React Native

  2. Hi, I’m Naoufal Naoufal

  3. Hi, I’m No-Fell Senior UI Engineer @ Unsplash

  4. Hi, I’m No-Fell Senior UI Engineer @ Unsplash

  5. Unsplash Do whatever you want high-resolution photos

  6. None
  7. None
  8. None
  9. None
  10. None
  11. None

  12. What is React Native

  13. First, What is React

  14. React • JavaScript Library • A new declarative way of

    building UIs • One-way data flow

  15. Declarative UI

  16. Example

  17. Example • Liked • Count • Color • Transition

  18. The Imperative Way • Liked • Count • Color •

    Transition

  19. The Declarative Way • Liked • Count • Color •

    Transition

  20. Declarative Wins • Less Code • Easier to Reason about

    the Application • Faster Development

  21. React Structure

  22. React Structure React React Native React Dom Objective-C/Swift/Java

  23. React Native

  24. React Native • It’s React • Manipulates Native UI Components

    • Powerful Native Plugin API • CSS Style with Flexbox • Apple Approved OTA Updates

  25. Development Tools

  26. Development Tools • Live Reload • Hot Module Replacement •

    Inspector • Chrome Debugger

  27. Apps

  28. Apps

  29. Demo

  30. Connect @naoufal on Twitter & GitHub