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.

Introduction to react native

163 views

Published on

Introduction to React Native

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Introduction to react native

  1. 1. Introduction to React Native @EliSawic
  2. 2. Instagram @EliSawic
  3. 3. Airbnb @EliSawic
  4. 4. Uber @EliSawic
  5. 5. Facebook @EliSawic
  6. 6. React Native @EliSawic
  7. 7. Me? @EliSawic
  8. 8. About me Eliasz Sawicki Blog: www.eliaszsawicki.com Twitter: @EliSawic www.brightinventions.pl @EliSawic
  9. 9. Share a story @EliSawic
  10. 10. iOS @EliSawic
  11. 11. React @EliSawic
  12. 12. React export default class CustomView extends Component { render() { return ( <div> <h1>Hello world!</h1> <h2>{this.state.message}</h2> <a href="" onClick={...}> Click me! </a> </div> ) } } @EliSawic
  13. 13. React export default class CustomView extends Component { changeMessage() { this.setState({message: 'Test message'}) } render() { return ( <div> <h1>Hello world!</h1> <h2>{this.state.message}</h2> <a href="" onClick={...}> Click me! </a> </div> ) } } @EliSawic
  14. 14. React <h2>{this.state.message}</h2> @EliSawic
  15. 15. React React.createElement("h2", null, this.state.message) @EliSawic
  16. 16. Feelings @EliSawic
  17. 17. Quick feedback loop @EliSawic
  18. 18. Hot reloading @EliSawic
  19. 19. Home @EliSawic
  20. 20. Missing something... @EliSawic
  21. 21. React @EliSawic
  22. 22. React Native @EliSawic
  23. 23. Declarative components @EliSawic
  24. 24. Declarative components export default class CustomView extends Component { render() { return ( <View> <Text>Hello world!</Text> <Text>{this.state.message}</Text> <Button onClick={...}> Click me! </Button> </View> ) } } @EliSawic
  25. 25. JS bundle @EliSawic
  26. 26. iOS/Android @EliSawic
  27. 27. Bridge @EliSawic
  28. 28. The ecosystem @EliSawic
  29. 29. Learn once Write everywhere @EliSawic
  30. 30. General skills @EliSawic
  31. 31. I want to start coding! @EliSawic
  32. 32. Bring your own tools @EliSawic
  33. 33. Text editor @EliSawic
  34. 34. Starting a project @EliSawic
  35. 35. You may feel lost @EliSawic
  36. 36. create-react-native- app @EliSawic
  37. 37. What language do I use? @EliSawic
  38. 38. JavaScript @EliSawic
  39. 39. I do not like JavaScript @EliSawic
  40. 40. TypeScript @EliSawic
  41. 41. Architectural choices @EliSawic
  42. 42. Redux @EliSawic
  43. 43. Can I code now? @EliSawic
  44. 44. Workflow @EliSawic
  45. 45. Hot reloading @EliSawic
  46. 46. Testing code @EliSawic
  47. 47. Unit tests @EliSawic
  48. 48. UI testing @EliSawic
  49. 49. Snapshot tests @EliSawic
  50. 50. Storybook @EliSawic
  51. 51. Work division @EliSawic
  52. 52. It looks fun! @EliSawic
  53. 53. Be aware of... @EliSawic
  54. 54. DIY apprach @EliSawic
  55. 55. It's still evolving @EliSawic
  56. 56. It's still evolving ... if [[ "$CONFIGURATION" = "Debug" && ! "$PLATFORM_NAME" == *simulator ]]; then ... @EliSawic
  57. 57. You develop for different platforms @EliSawic
  58. 58. @EliSawic
  59. 59. Dependencies @EliSawic
  60. 60. Bridging dependencies @EliSawic
  61. 61. Debugging @EliSawic
  62. 62. Navigation @EliSawic
  63. 63. Don't worry @EliSawic
  64. 64. Sharing code @EliSawic
  65. 65. Active community @EliSawic
  66. 66. Great tooling @EliSawic
  67. 67. Feeling productive @EliSawic
  68. 68. Can my team get into React Native? @EliSawic
  69. 69. Learning React Native @EliSawic
  70. 70. You can use it with native tools @EliSawic
  71. 71. Are you flexible with the app? @EliSawic
  72. 72. Not tied to solution @EliSawic
  73. 73. React Native @EliSawic
  74. 74. Looking for a silver bullet @EliSawic
  75. 75. Not a silver bullet @EliSawic
  76. 76. Strong tool @EliSawic
  77. 77. Developer experience @EliSawic
  78. 78. @EliSawic www.eliaszsawicki.com @EliSawic

×