Suche senden
Hochladen
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
•
56 gefällt mir
•
25,118 views
Yukiya Nakagawa
Folgen
DroidKaigi 2017の講演資料です
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 118
Empfohlen
少し幸せになる技術
少し幸せになる技術
kamedon39
React Native Androidはなぜ動くのか
React Native Androidはなぜ動くのか
Yukiya Nakagawa
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"
Fwdays
A tour of React Native
A tour of React Native
Tadeu Zagallo
A Closer Look At React Native
A Closer Look At React Native
Ian Wang
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
Yukiya Nakagawa
アプリエンジニアがReactNativeに乗り換えたら
アプリエンジニアがReactNativeに乗り換えたら
kzm hr
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Matt Raible
Empfohlen
少し幸せになる技術
少し幸せになる技術
kamedon39
React Native Androidはなぜ動くのか
React Native Androidはなぜ動くのか
Yukiya Nakagawa
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"
Fwdays
A tour of React Native
A tour of React Native
Tadeu Zagallo
A Closer Look At React Native
A Closer Look At React Native
Ian Wang
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
Yukiya Nakagawa
アプリエンジニアがReactNativeに乗り換えたら
アプリエンジニアがReactNativeに乗り換えたら
kzm hr
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Matt Raible
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Matt Raible
Angular js vs. Facebook react
Angular js vs. Facebook react
Keyup
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot apps
Yakov Fain
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
William Marques
JHipster
JHipster
Yuen-Kuei Hsueh
Creating books app with react native
Creating books app with react native
Ali Sa'o
Using React with Grails 3
Using React with Grails 3
Zachary Klein
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
ModusJesus
React Native for ReactJS Devs
React Native for ReactJS Devs
Barak Cohen
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Matt Raible
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Matt Raible
Using ReactJS in AngularJS
Using ReactJS in AngularJS
Boris Dinkevich
JHipster, modern web application development made easy
JHipster, modern web application development made easy
Raphaël Brugier
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Matt Raible
Get Hip with Java Hipster - JavaOne 2017
Get Hip with Java Hipster - JavaOne 2017
Matt Raible
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
Matt Raible
Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Matt Raible
React Native
React Native
Huqiu Liao
Григорий Шехет "Treasure hunt in the land of Reactive frameworks"
Григорий Шехет "Treasure hunt in the land of Reactive frameworks"
Fwdays
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Matt Raible
React Nativeの光と闇
React Nativeの光と闇
Yukiya Nakagawa
React native by example by Vadim Ruban
React native by example by Vadim Ruban
Lohika_Odessa_TechTalks
Weitere ähnliche Inhalte
Was ist angesagt?
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Matt Raible
Angular js vs. Facebook react
Angular js vs. Facebook react
Keyup
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot apps
Yakov Fain
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
William Marques
JHipster
JHipster
Yuen-Kuei Hsueh
Creating books app with react native
Creating books app with react native
Ali Sa'o
Using React with Grails 3
Using React with Grails 3
Zachary Klein
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
ModusJesus
React Native for ReactJS Devs
React Native for ReactJS Devs
Barak Cohen
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Matt Raible
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Matt Raible
Using ReactJS in AngularJS
Using ReactJS in AngularJS
Boris Dinkevich
JHipster, modern web application development made easy
JHipster, modern web application development made easy
Raphaël Brugier
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Matt Raible
Get Hip with Java Hipster - JavaOne 2017
Get Hip with Java Hipster - JavaOne 2017
Matt Raible
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
Matt Raible
Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Matt Raible
React Native
React Native
Huqiu Liao
Григорий Шехет "Treasure hunt in the land of Reactive frameworks"
Григорий Шехет "Treasure hunt in the land of Reactive frameworks"
Fwdays
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Matt Raible
Was ist angesagt?
(20)
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Angular js vs. Facebook react
Angular js vs. Facebook react
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot apps
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
JHipster
JHipster
Creating books app with react native
Creating books app with react native
Using React with Grails 3
Using React with Grails 3
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
React Native for ReactJS Devs
React Native for ReactJS Devs
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Using ReactJS in AngularJS
Using ReactJS in AngularJS
JHipster, modern web application development made easy
JHipster, modern web application development made easy
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Get Hip with Java Hipster - JavaOne 2017
Get Hip with Java Hipster - JavaOne 2017
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
React Native
React Native
Григорий Шехет "Treasure hunt in the land of Reactive frameworks"
Григорий Шехет "Treasure hunt in the land of Reactive frameworks"
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Ähnlich wie React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeの光と闇
React Nativeの光と闇
Yukiya Nakagawa
React native by example by Vadim Ruban
React native by example by Vadim Ruban
Lohika_Odessa_TechTalks
React Native for multi-platform mobile applications
React Native for multi-platform mobile applications
Matteo Manchi
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
Visual Engineering
Hybrid App using WordPress
Hybrid App using WordPress
Haim Michael
Building cross-platform mobile apps with React Native (Jfokus 2017)
Building cross-platform mobile apps with React Native (Jfokus 2017)
Maarten Mulders
Micro Front-Ends
Micro Front-Ends
Ori Calvo
Modern JavaScript, without giving up on Rails
Modern JavaScript, without giving up on Rails
Jonathan Johnson
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Codemotion
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Luciano Mammino
Android development
Android development
Gregoire BARRET
React && React Native workshop
React && React Native workshop
Stacy Goh
How to React Native
How to React Native
Dmitry Ulyanov
How To Integrate Native Android App With React Native.
How To Integrate Native Android App With React Native.
Techugo
20150516 modern web_conf_tw
20150516 modern web_conf_tw
Tse-Ching Ho
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
NAVER D2
React Native
React Native
Craig Jolicoeur
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
Elyse Kolker Gordon
React Native
React Native
Heber Silva
JSAnkara Swift v React Native
JSAnkara Swift v React Native
Muhammed Demirci
Ähnlich wie React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
(20)
React Nativeの光と闇
React Nativeの光と闇
React native by example by Vadim Ruban
React native by example by Vadim Ruban
React Native for multi-platform mobile applications
React Native for multi-platform mobile applications
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
Hybrid App using WordPress
Hybrid App using WordPress
Building cross-platform mobile apps with React Native (Jfokus 2017)
Building cross-platform mobile apps with React Native (Jfokus 2017)
Micro Front-Ends
Micro Front-Ends
Modern JavaScript, without giving up on Rails
Modern JavaScript, without giving up on Rails
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Android development
Android development
React && React Native workshop
React && React Native workshop
How to React Native
How to React Native
How To Integrate Native Android App With React Native.
How To Integrate Native Android App With React Native.
20150516 modern web_conf_tw
20150516 modern web_conf_tw
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
React Native
React Native
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
React Native
React Native
JSAnkara Swift v React Native
JSAnkara Swift v React Native
Mehr von Yukiya Nakagawa
Atomic Designは「マルチ」で真価を発揮する
Atomic Designは「マルチ」で真価を発揮する
Yukiya Nakagawa
Androidの入門書を書いたときに気にしたこと #NDS57
Androidの入門書を書いたときに気にしたこと #NDS57
Yukiya Nakagawa
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
Yukiya Nakagawa
CSS in JSの話 #friday13json
CSS in JSの話 #friday13json
Yukiya Nakagawa
AndroidLint #DroidKaigi
AndroidLint #DroidKaigi
Yukiya Nakagawa
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
Yukiya Nakagawa
僕らのデータ同期プラクティス
僕らのデータ同期プラクティス
Yukiya Nakagawa
Android再入門 〜Eclipseのことは忘れろ〜
Android再入門 〜Eclipseのことは忘れろ〜
Yukiya Nakagawa
もう一度Kotlinの話をしよう #ndsmeetup4
もう一度Kotlinの話をしよう #ndsmeetup4
Yukiya Nakagawa
アグリノートを支える技術
アグリノートを支える技術
Yukiya Nakagawa
NDS36 Kotlin Cute
NDS36 Kotlin Cute
Yukiya Nakagawa
NDS36 Java7&Java8
NDS36 Java7&Java8
Yukiya Nakagawa
Coworking Business Forum in NIIGATA 2013
Coworking Business Forum in NIIGATA 2013
Yukiya Nakagawa
Niigata.rb#03
Niigata.rb#03
Yukiya Nakagawa
PechaKucha Niigata #3 2013.7.27
PechaKucha Niigata #3 2013.7.27
Yukiya Nakagawa
ぼくのかんがえたふつうのあんどろいどかいはつ
ぼくのかんがえたふつうのあんどろいどかいはつ
Yukiya Nakagawa
Androidで使えるJSON-Javaライブラリ
Androidで使えるJSON-Javaライブラリ
Yukiya Nakagawa
NFCLAB会津
NFCLAB会津
Yukiya Nakagawa
ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜
Yukiya Nakagawa
Action Bar Compat読んでみた
Action Bar Compat読んでみた
Yukiya Nakagawa
Mehr von Yukiya Nakagawa
(20)
Atomic Designは「マルチ」で真価を発揮する
Atomic Designは「マルチ」で真価を発揮する
Androidの入門書を書いたときに気にしたこと #NDS57
Androidの入門書を書いたときに気にしたこと #NDS57
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
CSS in JSの話 #friday13json
CSS in JSの話 #friday13json
AndroidLint #DroidKaigi
AndroidLint #DroidKaigi
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
僕らのデータ同期プラクティス
僕らのデータ同期プラクティス
Android再入門 〜Eclipseのことは忘れろ〜
Android再入門 〜Eclipseのことは忘れろ〜
もう一度Kotlinの話をしよう #ndsmeetup4
もう一度Kotlinの話をしよう #ndsmeetup4
アグリノートを支える技術
アグリノートを支える技術
NDS36 Kotlin Cute
NDS36 Kotlin Cute
NDS36 Java7&Java8
NDS36 Java7&Java8
Coworking Business Forum in NIIGATA 2013
Coworking Business Forum in NIIGATA 2013
Niigata.rb#03
Niigata.rb#03
PechaKucha Niigata #3 2013.7.27
PechaKucha Niigata #3 2013.7.27
ぼくのかんがえたふつうのあんどろいどかいはつ
ぼくのかんがえたふつうのあんどろいどかいはつ
Androidで使えるJSON-Javaライブラリ
Androidで使えるJSON-Javaライブラリ
NFCLAB会津
NFCLAB会津
ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜
Action Bar Compat読んでみた
Action Bar Compat読んでみた
Kürzlich hochgeladen
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Igalia
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
Kürzlich hochgeladen
(20)
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
1.
React Native 2017.3.9 DroidKaigi
2017 Yukiya Nakagawa / @Nkzn ROOM 3 17:10-17:40 #droidkaigi3
2.
Who are you? •
Yukiya Nakagawa / @Nkzn • @ • • • Android 2009
3.
React Native
4.
• • Hello World •
Production
5.
Target • Android /
iOS • React React Native • React Native
6.
Agenda • ‣ ‣ React ‣ React
Native • ‣ React Native ‣ ‣
7.
• React • React
Native • React Native Before / After
8.
• React (DOM) •
ES201x • NPM • React Native
9.
10.
Biz
11.
Biz • Android iOS • • •
12.
https://www.kantarworldpanel.com/global/smartphone-os-market-share/
13.
• • • iOS Android
14.
1
15.
Android iOS OS UI WebView Cordova
Xamarin Unity
16.
React
17.
React https://facebook.github.io/react/
18.
• • JSX • Reactive
19.
JSX
20.
<div> <Header /> <LeftPane /> <RightPane
/> </div>
21.
22.
React
23.
import React from
'react'; import ReactDOM from 'react-dom'; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <div style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') );
24.
Virtual DOM
25.
26.
React DOM
27.
React DOM
28.
React DOM
29.
React DOM
30.
https://tylermcginnis.com/an-introduction-to-life-cycle-events-in-react-js/
31.
https://developer.android.com/reference/android/app/Activity.html
32.
React is • Facebook
JS • https://facebook.github.io/react/ • • • View View View
33.
React Native (Side React)
34.
35.
Android View
36.
Android <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"
> <include layout="@layout/header" /> <include layout="@layout/left_pane" /> <include layout="@layout/right_pane" /> </RelativeLayout>
37.
Android View <include layout= “@layout/header”/> android.view.View <include
layout= “@layout/left_pane”/> <include layout= “@layout/right_pane”/>
38.
39.
• Fragment • • Advocating
Against Android Fragments • https://medium.com/square-corner-blog/advocating-against- android-fragments-81fd0b462c97 • ( ) http://ninjinkun.hatenablog.com/entry/ 2014/10/16/234611
40.
Android View
41.
42.
View DOM
43.
Android View
44.
View DOM
45.
React is • Facebook
JS • https://facebook.github.io/react/ • • • View View View
46.
React DOM
47.
import React from
'react'; import ReactDOM from 'react-dom'; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <div style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') ); import ReactDOM from 'react-dom'; div div ReactDOM.render( <App />, document.getElementById('app') );
48.
import React from
"react"; import { View, AppRegistry } from "react-native"; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <View style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </View> ); } } AppRegistry.registerComponent( "App", () => App );
49.
React ReactDOM
50.
React UI React Native
51.
React Native (Side Android)
52.
Android iOS OS UI
53.
React Native Android iOS OS UI
54.
React Native Android (Side
UI Component)
55.
ReactRootView • FrameLayout • onMeasure
JavaScriptCore JS JS
56.
ReactRootView RootView (ReactActivityDelegate.java) protected ReactRootView
createRootView() { return new ReactRootView(getContext()); } // protected void onCreate(Bundle savedInstanceState) { // if (mMainComponentName != null && !needsOverlayPermission) { loadApp(mMainComponentName); } // } protected void loadApp(String appKey) { if (mReactRootView != null) { throw new IllegalStateException("Cannot loadApp while app is already running."); } mReactRootView = createRootView(); mReactRootView.startReactApplication( getReactNativeHost().getReactInstanceManager(), appKey, getLaunchOptions()); getPlainActivity().setContentView(mReactRootView); } https://github.com/facebook/react-native/blob/d21aa9248056b08449f4a0f57e824b3c52b0614b/ReactAndroid/src/main/java/com/facebook/react/ReactActivityDelegate.java#L67-L115
57.
Activity ReactRootView JS
58.
View
59.
View <View style={styles.container}> <Text style={styles.welcome}> Welcome
to React Native! </Text> <Text style={styles.instructions1}> To get started, edit index.android.js </Text> <Text style={styles.instructions2}> Shake or press menu button for dev menu </Text> </View>
60.
react.gradle JS : import JS $buildDir/intermediates/ assets/index.android.bundle JS
61.
React Native Android (Side
Native Module)
62.
JS UI
63.
(Web API) https://developer.mozilla.org/ja/docs/Web/Reference/API
64.
/Libraries/Core/Timers/JSTimers.js /ReactAndroid/src/main/java/com/facebook/react/modules/core/Timing.java (※ )
65.
Polyfill https://facebook.github.io/react-native/docs/javascript-environment.html
66.
• React View •
API JS • UI ReactRootView UI
67.
React Native Android iOS OS UI
68.
69.
http://facebook.github.io/react-native/showcase.html
70.
https://design.google.com/articles/airbnb/
71.
React Native
72.
Biz • Android iOS • • •
73.
Facebook JA
74.
• iOS Cordova
+ React Web • 1 iOS/Android • React •
75.
React Native
76.
77.
UI
78.
CSS • CSS
79.
const styles =
StyleSheet.create({ container: { paddingTop: metrics.x4, paddingBottom: metrics.x2 }, logo: { height: 180, alignSelf: "center" }, loginBox: { marginTop: metrics.x4, marginHorizontal: metrics.x4 } });
80.
<View style={styles.container}> … </View>
81.
CSS • CSS • CSS •
Bootstrap Material Design Lite • CSS React • OnsenUI material-ui
82.
Android, iOS
83.
84.
85.
Material Design const metrics
= { x0_25: 2, x0_5: 4, x0_75: 6, x1: 8, x1_5: 12, x2: 16, x2_5: 20, x3: 24, x4: 32, x5: 40, x6: 48, x7: 56, x8: 64, x9: 72 }; export default metrics; metrics.android.js const metrics = { x0_25: 2, x0_5: 4, x0_75: 6, x1: 8, x1_5: 11, x2: 15, x2_5: 20, x3: 22, x4: 32, x5: 40, x6: 44, x7: 56, x8: 64, x9: 72 }; export default metrics; metrics.ios.js
86.
• <Image> • • Android
Picasso PhotoView • iOS UIScrollView JS http://square.github.io/picasso/ https://github.com/chrisbanes/PhotoView
87.
88.
89.
React Native HelloWorld
90.
JS • API • lodash
91.
• API React Native • •
API orz
92.
• VSCode JS •
Android/iOS Android iOS • JS R Live Reload • Android Studio Xcode
93.
VSCode Android Studio Xcode Android iOS Live Reload
94.
• JS localhost •
95.
96.
• Initial commit:
2 22 • v1.0.0 : 5 11
97.
2
98.
CI • • Android Java,
Android SDK • iOS OS X, Xcode, iOS SDK • Fastlane CocoaPods Ruby • mac mini
99.
React Native
100.
+ React
101.
• Web View React •
Learn Once, Write Anywhere
102.
• React Native • React
Native • Breaking Change
103.
Breaking Change
104.
105.
106.
107.
• React Native • React
Native • Breaking Change
108.
109.
• • • v2 2
110.
React Native
111.
React Native
112.
React Native
113.
• WebView React •
UI Native Component/Module • Android Java,
114.
React Native
115.
116.
React Android
117.
!