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

Hello I'm React Native

Avatar for Marco Almeida Marco Almeida
January 28, 2017
Programming
1
94

Hello I'm React Native

Overview about React Native framework

Avatar for Marco Almeida

Marco Almeida

January 28, 2017
Tweet

Other Decks in Programming

See All in Programming
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
220
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
190
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
Avatar for Suhyeon Kim wisemuji
0
190
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
0
910
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
440
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
4
250
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
990
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
0
120
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
170
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
2.4k

Featured

See All Featured
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
160
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
53
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
170
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.9k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
440

Transcript

  1. Hello! I'm

  2. Marco Almeida ‣ Software Engineer at Healfies
 healfies.com ‣ Front-end

    Developer at Spinver
 spinver.com ‣ github.com/marquinhoalm About Me @marquinhoalm

  3. @marquinhoalm "LEARN ONCE, WRITE ANYWHERE" What's React Native? Framework Build

    App Only Using Javascript Native UI Components Asynchronous Execution Based on React.js

  4. @marquinhoalm How React Native Works?

  5. @marquinhoalm Getting Started

  6. @marquinhoalm ‣ Node.js 4.0+ ‣ React Native Command Line Tools

    ‣ $ npm install -g react-native-cli Common Requisites GETTING STARTED

  7. @marquinhoalm ‣ Xcode ‣ IOS Simulator Requisites for IOS GETTING

    STARTED

  8. @marquinhoalm ‣ Android Studio ‣ JDK 1.8+ ‣ Android Virtual

    Device GETTING STARTED Requisites for ANDROID

  9. @marquinhoalm Components

  10. @marquinhoalm ‣ ActivityIndicator ‣ Button ‣ DatePickerIOS ‣ DrawerLayoutAndroid ‣

    Image ‣ KeyboardAvoidingView ‣ ListView ‣ MapView ‣ Modal ‣ Navigator ‣ NavigatorIOS ‣ Picker ‣ PickerIOS ‣ ProgressBarAndroid Available List COMPONENTS ‣ ProgressViewIOS ‣ RefreshControl ‣ ScrollView ‣ SegmentedControlIOS ‣ Slider ‣ SnapshotViewIOS ‣ StatusBar ‣ Switch ‣ TabBarIOS ‣ TabBarIOS.Item ‣ Text ‣ TextInput ‣ ToolbarAndroid ‣ TouchableHighlight ‣ TouchableNativeFeedback ‣ TouchableOpacity ‣ TouchableWithoutFeedback ‣ View ‣ ViewPagerAndroid ‣ WebView

  11. @marquinhoalm Style

  12. @marquinhoalm ‣ Doesn’t use special language or syntax ‣ Flexbox

    Using Javascript STYLE

  13. @marquinhoalm Inline Style STYLE

  14. @marquinhoalm Specific Platform

  15. @marquinhoalm ‣ React Native has an elegant way to handle

    this ‣ SearchBar.ios.js ‣ SearchBar.android.js WAYS TO CHOOSE SPECIFIC PLATFORM

  16. @marquinhoalm Project Structure

  17. @marquinhoalm ‣ $ react-native init AppExample ‣ $ cd AppExample

    ‣ $ react-native run-ios ‣ $ react-native run-android Creating a Project PROJECT STRUCTURE

  18. @marquinhoalm Show me the code!!

  19. @marquinhoalm Who's using React Native?

  20. @marquinhoalm Extra Tools

  21. @marquinhoalm ‣ Open Source tool from Microsoft ‣ microsoft.github.io/code-push/ ‣

    Code updates to your application Code Push EXTRA TOOLS

  22. @marquinhoalm ‣ React Native Package Manager built to ease your

    daily. Based on CocoaPods and react-native link RNPM EXTRA TOOLS

  23. @marquinhoalm ‣ React Native IDE built for Atom (by Facebook)

    ‣ Built in Chrome debugger, remote server access ‣ https://nuclide.io/ Nuclide EXTRA TOOLS

  24. @marquinhoalm Thanks!