React Nativeの光と闇
7 likes9,284 views
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.
React Nativeの光と闇
- 2. Who are you? • Yukiya Nakagawa / @Nkzn • @ • • Android 2009 • React Native 2016
- 3. TechMeetup#2
- 9. React Native
- 10. • • Hello World • Production
- 11. • React Native IT • JavaScript (React, Node) • Android • iOS
- 12. • React Native • React Native
- 14. React
- 17. JSX
- 20. React
- 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. Virtual DOM
- 28. React is • Facebook JS • https://facebook.github.io/react/ • • • View View View
- 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. React ReactDOM
- 34. Biz
- 38. 1
- 40. React Native Android iOS OS UI ReactRootView RCTRootView
- 41. on React Native
- 42. react-native init $ npm install -g react-native-cli $ react-native init RNDemo $ cd RNDemo $ yarn start
- 44. Android/iOS
- 45. React Native
- 47. Cheap Dive into React Native BOOTH 1000 https://echigo-ya.booth.pm/items/825721
- 50. create-react-native-app $ npm install -g create-react-native-app $ create-react-native-app crna-demo $ cd crna-demo $ yarn start
- 55. by Quipper
- 57. Togetter
- 58. • React Native Japan • https://github.com/react-native-jp/react- native-apps-jp
- 59. React Native for Web
- 61. React XP
- 62. Skype
- 63. Microsoft Office
- 65. React Native
- 68. 💪
- 69. 💪
- 70. • JavaScriptCore • Android • iOS
- 71. • NPM(Node) Babel JS • Gradle javac Android • Xcode CocoaPods iOS CocoaPods
- 72. Expo • •
- 73. AppStore Connect ipa AppStore Connect
- 74. Expo • • • •
- 75. • Play AppStore • AppStore
- 76. • React • JavaScriptCore • • Android iOS
- 81. • • • • • etc
- 82. • • • • • • etc
- 83. • • JSON •
- 84. • •
- 85. React Native
- 86. RN • Android iOS • Kotlin Swift • Web • RN • • RN 🤔
- 87. Airbnb
- 89. Airbnb • RN • http://studio-andy.hatenablog.com/entry/ react-native-at-airbnb
- 92. React Native