SlideShare una empresa de Scribd logo
1 de 93
Descargar para leer sin conexión
React Native
2018.7.21
TechMeetup#2
Who are you?
• Yukiya Nakagawa / @Nkzn
• @
•
• Android 2009
• React Native 2016
TechMeetup#2
https://www.nikkei.com/article/DGXMZO32881350R10C18A7L21000/
React Native
•
• Hello World
• Production
• React Native
IT
• JavaScript (React, Node)
• Android
• iOS
• React Native
• React Native
React
React
https://facebook.github.io/react/
•
• JSX
•
Reactive
JSX
<div>
<Header />
<LeftPane />
<RightPane
name={myName}/>
</div>
React
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')
);
Virtual DOM
<ccc
style={{
width: 200,
color: "red"
}}
enabled={true} />
React
VirtualDOM
DOM
React
VirtualDOM
DOM
React
VirtualDOM
DOM
React
VirtualDOM
DOM
React is
• Facebook JS
• https://facebook.github.io/react/
•
•
• View
View View
React Native
React
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')
);
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(
"MyReactNativeApp",
() => App
);
React
ReactDOM
React
UI
React Native
Biz
Biz
• Android iOS
•
•
•
https://www.kantarworldpanel.com/global/smartphone-os-market-share/
•
•
• iOS Android
1
Android iOS
XML
xib
storyboard
Android iOS
OS
UI
Java
Kotlin
Obj-C
Swift
React Native
Android iOS
OS
UI
ReactRootView RCTRootView
on
React Native
react-native init
$ npm install -g react-native-cli
$ react-native init RNDemo
$ cd RNDemo
$ yarn start
Xcode/Android Studio
Android/iOS
React Native
Babel
on JavaScriptCore
on C++
Cheap Dive
into React Native
BOOTH 1000
https://echigo-ya.booth.pm/items/825721
on
create-react-native-app
(Expo)
create-react-native-app
$ npm install -g create-react-native-app
$ create-react-native-app crna-demo
$ cd crna-demo
$ yarn start
by Quipper
by
https://play.google.com/store/apps/details?id=jp.agri_note.area&hl=ja
https://itunes.apple.com/jp/app/%E9%9D%A2%E7%A9%8D%E8%A8%88%E7%AE%97/id1234162227?mt=8
Togetter
• React Native Japan
• https://github.com/react-native-jp/react-
native-apps-jp
React Native for Web
React XP
Skype
Microsoft Office
React Native
💪
💪
• JavaScriptCore
• Android
• iOS
• NPM(Node) Babel JS
• Gradle javac Android
• Xcode CocoaPods iOS
CocoaPods
Expo
•
•
AppStore Connect
ipa AppStore Connect
Expo
•
•
•
• 

• Play AppStore
• AppStore
• React
• JavaScriptCore
•
• Android iOS
• React Native
•
•
•
•
•
•
• etc
•
•
•
•
•
• etc
•
• JSON
•
•
•
React Native
RN
• Android iOS
• Kotlin Swift
• Web
• RN
•
• 

RN 🤔
Airbnb
Airbnb
•
• react-native-maps react-native-lottie
•
•
• RN
Airbnb
• RN
•


http://studio-andy.hatenablog.com/entry/
react-native-at-airbnb
React Native
React Nativeの光と闇

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
 
React Native Workshop
React Native WorkshopReact Native Workshop
React Native Workshop
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native
 
React js
React jsReact js
React js
 
Next.js Introduction
Next.js IntroductionNext.js Introduction
Next.js Introduction
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentation
 
Docker architecture-04-1
Docker architecture-04-1Docker architecture-04-1
Docker architecture-04-1
 
webpack 101 slides
webpack 101 slideswebpack 101 slides
webpack 101 slides
 
Reactjs
ReactjsReactjs
Reactjs
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
 
Reactjs
Reactjs Reactjs
Reactjs
 
The Benefits of Using React JS for Web Development!
The Benefits of Using React JS for Web Development!The Benefits of Using React JS for Web Development!
The Benefits of Using React JS for Web Development!
 
React Native
React Native React Native
React Native
 
Webdriver.io
Webdriver.io Webdriver.io
Webdriver.io
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
 
How to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React CodeHow to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React Code
 
React Native
React NativeReact Native
React Native
 
React Router: React Meetup XXL
React Router: React Meetup XXLReact Router: React Meetup XXL
React Router: React Meetup XXL
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
 

Similar a React Nativeの光と闇

React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigiReact Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Yukiya Nakagawa
 

Similar a React Nativeの光と闇 (20)

React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigiReact Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
 
How to create components in react js
How to create components in react jsHow to create components in react js
How to create components in react js
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native SideWorkshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
 
Let's react - Meetup
Let's react - MeetupLet's react - Meetup
Let's react - Meetup
 
React js
React jsReact js
React js
 
React && React Native workshop
React && React Native workshopReact && React Native workshop
React && React Native workshop
 
React Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applications
 
React - Start learning today
React - Start learning today React - Start learning today
React - Start learning today
 
slides.pptx
slides.pptxslides.pptx
slides.pptx
 
slides.pptx
slides.pptxslides.pptx
slides.pptx
 
How To Integrate Native Android App With React Native.
How To Integrate Native Android App With React Native.How To Integrate Native Android App With React Native.
How To Integrate Native Android App With React Native.
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react js
 
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
 
React: JSX and Top Level API
React: JSX and Top Level APIReact: JSX and Top Level API
React: JSX and Top Level API
 
Simple React Todo List
Simple React Todo ListSimple React Todo List
Simple React Todo List
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
 
React native by example by Vadim Ruban
React native by example by Vadim RubanReact native by example by Vadim Ruban
React native by example by Vadim Ruban
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
 
A full introductory guide to React
A full introductory guide to ReactA full introductory guide to React
A full introductory guide to React
 

Más de Yukiya Nakagawa

PechaKucha Niigata #3 2013.7.27
PechaKucha Niigata #3 2013.7.27PechaKucha Niigata #3 2013.7.27
PechaKucha Niigata #3 2013.7.27
Yukiya Nakagawa
 
ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜
Yukiya Nakagawa
 

Más de Yukiya Nakagawa (20)

Atomic Designは「マルチ」で真価を発揮する
Atomic Designは「マルチ」で真価を発揮するAtomic Designは「マルチ」で真価を発揮する
Atomic Designは「マルチ」で真価を発揮する
 
Androidの入門書を書いたときに気にしたこと #NDS57
Androidの入門書を書いたときに気にしたこと #NDS57Androidの入門書を書いたときに気にしたこと #NDS57
Androidの入門書を書いたときに気にしたこと #NDS57
 
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJアグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
 
CSS in JSの話 #friday13json
CSS in JSの話 #friday13jsonCSS in JSの話 #friday13json
CSS in JSの話 #friday13json
 
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組みReact Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
 
AndroidLint #DroidKaigi
AndroidLint #DroidKaigiAndroidLint #DroidKaigi
AndroidLint #DroidKaigi
 
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetupAndroid Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
 
僕らのデータ同期プラクティス
僕らのデータ同期プラクティス僕らのデータ同期プラクティス
僕らのデータ同期プラクティス
 
Android再入門 〜Eclipseのことは忘れろ〜
Android再入門 〜Eclipseのことは忘れろ〜Android再入門 〜Eclipseのことは忘れろ〜
Android再入門 〜Eclipseのことは忘れろ〜
 
もう一度Kotlinの話をしよう #ndsmeetup4
もう一度Kotlinの話をしよう #ndsmeetup4もう一度Kotlinの話をしよう #ndsmeetup4
もう一度Kotlinの話をしよう #ndsmeetup4
 
アグリノートを支える技術
アグリノートを支える技術アグリノートを支える技術
アグリノートを支える技術
 
NDS36 Kotlin Cute
NDS36 Kotlin CuteNDS36 Kotlin Cute
NDS36 Kotlin Cute
 
NDS36 Java7&Java8
NDS36 Java7&Java8NDS36 Java7&Java8
NDS36 Java7&Java8
 
Coworking Business Forum in NIIGATA 2013
Coworking Business Forum in NIIGATA 2013Coworking Business Forum in NIIGATA 2013
Coworking Business Forum in NIIGATA 2013
 
Niigata.rb#03
Niigata.rb#03Niigata.rb#03
Niigata.rb#03
 
PechaKucha Niigata #3 2013.7.27
PechaKucha Niigata #3 2013.7.27PechaKucha Niigata #3 2013.7.27
PechaKucha Niigata #3 2013.7.27
 
ぼくのかんがえたふつうのあんどろいどかいはつ
ぼくのかんがえたふつうのあんどろいどかいはつぼくのかんがえたふつうのあんどろいどかいはつ
ぼくのかんがえたふつうのあんどろいどかいはつ
 
Androidで使えるJSON-Javaライブラリ
Androidで使えるJSON-JavaライブラリAndroidで使えるJSON-Javaライブラリ
Androidで使えるJSON-Javaライブラリ
 
NFCLAB会津
NFCLAB会津NFCLAB会津
NFCLAB会津
 
ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜
 

Último

Último (20)

AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 

React Nativeの光と闇