React Native is all about combining great user experience on native platforms with the developer experience of React on the web. Since it’s start 1.5 years ago, React Native continuously enjoys a tremendous traction. In 2015 React got popular, I believe 2017 will be the year of React Native. I followed the development since the start and now built several React Native apps. During my talk I like to introduce the library, show useful tooling and give practical advice for building React Native apps.

1. REACT NATIVE
DomCode, November 2016, Adrian Philipp

2. 1. Web developers can make apps
2. Know and use tooling to be more
productive
3. Learn platform concepts and dev tricks
REACT NATIVE

3. Guess the Liiper iOS app
https://github.com/liip/guess-the-liiper-ios

4. QAPP Question and Answer
iOS app - beta
Developed at

5. • Made by Facebook, efficiency across platforms
• “Learn once, write anywhere” vs “cross platform”
• Platforms: iOS, Android, Windows, macOS, tvOS
• High traction: 39.8k stars, releases every 2-3 weeks
• Not mature yet
REACT NATIVE

6. UI Explorer
React Native Example
See README on github how to build
and run the app

7. • Easy way for web developers to get started on mobile
REACT NATIVE

8. • Easy way for web developers to get started on mobile
• Styling is similar to CSS
REACT NATIVE

9. • Easy way for web developers to get started on mobile
• Styling is similar to CSS
• Flexbox layout model
REACT NATIVE

10. • Easy way for web developers to get started on mobile
• Styling is similar to CSS
• Flexbox layout model
• Feels like React (web)
REACT NATIVE

11. Product Pains
But production ready
NOT MATURE

12. Show me code…
hackernews search app made by algolia
REACT NATIVE

13. BASICS

14. CODE

15. APP

16. CODE

17. 1. Web developers can make apps
2. Know and use tooling to be more
productive
3. Learn platform concepts and dev tricks
REACT NATIVE

18. • Inspector
• Hot reloading
• Profiling using systrace
• Debugger
• Editor integration
TOOLING

19. INSPECTOR

20. HOT RELOADING

21. PROFILING

22. DEBUGGER

23. EDITOR INTEGRATION
• WebStorm/PHPStorm: JS/JSX/ES6 support
• Microsoft VSCode, Nuclide
• Clickable stack trace:
REACT_EDITOR=pstorm npm start

24. EDITOR INTEGRATION

25. ANDROID

26. 1. Web developers can make apps
2. Know and use tooling to be more
productive
3. Learn platform concepts and dev tricks
REACT NATIVE

27. • Learn how mobile platforms work and look
• Split smart and dumb components from the
start
• Use redux when the app gets more complex
PLATFORM / ARCHITECTURE

28. • Components: JS.coach
• React Native Playground rnplay
• ESLint style from airbnb
• NPM script to build
"build-ios": "react-native bundle --platform=ios --
entry-file=index.ios.js --bundle-output=ios/
main.jsbundle --assets-dest=ios/assets --dev false",
DEV TRICKS

29. 1. Web developers can make apps
2. Know and use tooling to be more
productive
3. Learn platform concepts and dev tricks
REACT NATIVE

30. Twitter: @adrian_philipp
Github: adri
Website: adrian-philipp.com
Mail: mail@adrian-philipp.com
Joind.in: https://legacy.joind.in/19687
THANK YOU