Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Nativeの光と闇

3,579 views

Published on

上越TechMeetup#2で講演しました

Published in: Technology
  • Be the first to comment

React Nativeの光と闇

  1. 1. React Native 2018.7.21 TechMeetup#2
  2. 2. Who are you? • Yukiya Nakagawa / @Nkzn • @ • • Android 2009 • React Native 2016
  3. 3. TechMeetup#2
  4. 4. https://www.nikkei.com/article/DGXMZO32881350R10C18A7L21000/
  5. 5. React Native
  6. 6. • • Hello World • Production
  7. 7. • React Native IT • JavaScript (React, Node) • Android • iOS
  8. 8. • React Native • React Native
  9. 9. React
  10. 10. React https://facebook.github.io/react/
  11. 11. • • JSX • Reactive
  12. 12. JSX
  13. 13. <div> <Header /> <LeftPane /> <RightPane name={myName}/> </div>
  14. 14. React
  15. 15. 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') );
  16. 16. Virtual DOM
  17. 17. <ccc style={{ width: 200, color: "red" }} enabled={true} />
  18. 18. React VirtualDOM DOM
  19. 19. React VirtualDOM DOM
  20. 20. React VirtualDOM DOM
  21. 21. React VirtualDOM DOM
  22. 22. React is • Facebook JS • https://facebook.github.io/react/ • • • View View View
  23. 23. React Native React
  24. 24. 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') );
  25. 25. 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 );
  26. 26. React ReactDOM
  27. 27. React UI React Native
  28. 28. Biz
  29. 29. Biz • Android iOS • • •
  30. 30. https://www.kantarworldpanel.com/global/smartphone-os-market-share/
  31. 31. • • • iOS Android
  32. 32. 1
  33. 33. Android iOS XML xib storyboard Android iOS OS UI Java Kotlin Obj-C Swift
  34. 34. React Native Android iOS OS UI ReactRootView RCTRootView
  35. 35. on React Native
  36. 36. react-native init $ npm install -g react-native-cli $ react-native init RNDemo $ cd RNDemo $ yarn start
  37. 37. Xcode/Android Studio
  38. 38. Android/iOS
  39. 39. React Native
  40. 40. Babel on JavaScriptCore on C++
  41. 41. Cheap Dive into React Native BOOTH 1000 https://echigo-ya.booth.pm/items/825721
  42. 42. on create-react-native-app (Expo)
  43. 43. create-react-native-app $ npm install -g create-react-native-app $ create-react-native-app crna-demo $ cd crna-demo $ yarn start
  44. 44. by Quipper
  45. 45. 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
  46. 46. Togetter
  47. 47. • React Native Japan • https://github.com/react-native-jp/react- native-apps-jp
  48. 48. React Native for Web
  49. 49. React XP
  50. 50. Skype
  51. 51. Microsoft Office
  52. 52. React Native
  53. 53. 💪
  54. 54. 💪
  55. 55. • JavaScriptCore • Android • iOS
  56. 56. • NPM(Node) Babel JS • Gradle javac Android • Xcode CocoaPods iOS CocoaPods
  57. 57. Expo • •
  58. 58. AppStore Connect ipa AppStore Connect
  59. 59. Expo • • • • 

  60. 60. • Play AppStore • AppStore
  61. 61. • React • JavaScriptCore • • Android iOS
  62. 62. • React Native • •
  63. 63. • • • • • etc
  64. 64. • • • • • • etc
  65. 65. • • JSON •
  66. 66. • •
  67. 67. React Native
  68. 68. RN • Android iOS • Kotlin Swift • Web • RN • • 
 RN 🤔
  69. 69. Airbnb
  70. 70. Airbnb • • react-native-maps react-native-lottie • • • RN
  71. 71. Airbnb • RN • 
 http://studio-andy.hatenablog.com/entry/ react-native-at-airbnb
  72. 72. React Native

×