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 one year ago, React Native continuously enjoys a tremendous traction. In 2015 React got popular, 2016 will be the year of React Native. I followed the development since the start and now I’m busy building my third React Native app. During my talk I like to introduce the library, show useful tooling and give practical advice for building React Native apps.

1. REACT NATIVE
UtrechtJS, May 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”
• High traction: 31k 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. REACT NATIVE
• Easy way for web developers to get started on mobile
• Styling is similar to CSS
• Flexbox layout model
• Feels like React (web)

8. NOT MATURE
Product Pains
But production ready

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

10. BASICS

11. CODE

12. APP

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

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

15. INSPECTOR

16. HOT RELOADING

17. PROFILING

18. DEBUGGER

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

20. EDITOR INTEGRATION

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

22. • 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

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

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

25. Twitter: @adrian_philipp
Github: adri
Website: adrian-philipp.com
Mail: mail@adrian-philipp.com
THANK YOU

26. • Redux DevTools
• Inspect state changes
• Replay actions
• Synchronise app states across simulators
• Redux Storage: offline storage
BONUS