Download as PDF, PPTX
Uploaded byYukiya Nakagawa
React Nativeの光と闇
This document summarizes a talk about React Native. It introduces React Native, how it allows building native mobile apps using JavaScript and React by compiling to native code for each platform. It demonstrates a simple React Native app, and discusses how React Native uses the Virtual DOM for efficient updates. It also outlines some benefits of using React Native like write once, use anywhere across platforms and having a large ecosystem of open source modules.
More Related Content
![[DevDay2018] React Native – Hello World - By: Trung Pham & React Native team ...](https://cdn.slidesharecdn.com/ss_thumbnails/f109-phamductrung-helloworld-180419095346-thumbnail.jpg?width=640&height=640&fit=bounds)
React Nativeの光と闇
- 1.
- 2. Who are you? •Yukiya Nakagawa / @Nkzn • @ • • Android 2009 • React Native 2016
- 3.
- 5.
- 9.
- 10. • • Hello World •Production
- 11. • React Native IT •JavaScript (React, Node) • Android • iOS
- 12. • React Native •React Native
- 14.
- 15.
- 16.
- 17.
- 18.
- 20.
- 21. 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') );
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. React is • FacebookJS • https://facebook.github.io/react/ • • • View View View
- 29.
- 30. 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') );
- 31. 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 );
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. React Native Android iOS OS UI ReactRootViewRCTRootView
- 41.
- 42. react-native init $ npminstall -g react-native-cli $ react-native init RNDemo $ cd RNDemo $ yarn start
- 43.
- 44.
- 45.
- 46.
- 47. Cheap Dive into ReactNative BOOTH 1000 https://echigo-ya.booth.pm/items/825721
- 48.
- 50. create-react-native-app $ npm install-g create-react-native-app $ create-react-native-app crna-demo $ cd crna-demo $ yarn start
- 55.
- 56.
- 57.
- 58. • React NativeJapan • https://github.com/react-native-jp/react- native-apps-jp
- 59.
- 61.
- 62.
- 63.
- 65.
- 68.
- 69.
- 70.
- 71. • NPM(Node) BabelJS • Gradle javac Android • Xcode CocoaPods iOS CocoaPods
- 72.
- 73.
- 74.
- 75. • Play AppStore •AppStore
- 76. • React • JavaScriptCore • •Android iOS
- 77.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86. RN • Android iOS •Kotlin Swift • Web • RN • • RN 🤔
- 87.
- 88.
- 89.
- 92.