React Native Accessibility - San Diego React and React Native Meetup
Experiences building apps with React Native @UtrechtJS May 2016
26
REACT NATIVE UtrechtJS, May 2016, Adrian Philipp
-
Upload
adrian-philipp -
Category
Technology
-
view
397 -
download
1
Transcript of Experiences building apps with React Native @UtrechtJS May 2016
REACT NATIVEUtrechtJS, May 2016, Adrian Philipp
1. Web developers can make apps
2. Know and use tooling to be more productive
3. Learn platform concepts and dev tricks
REACT NATIVE
Guess the Liiper iOS app https://github.com/liip/guess-the-liiper-ios
QAPP Question and Answer iOS app - beta Developed at
• 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
UI Explorer React Native Example See README on github how to build
and run the app
REACT NATIVE
• Easy way for web developers to get started on mobile
• Styling is similar to CSS
• Flexbox layout model
• Feels like React (web)
Show me code…
hackernews search app made by algolia
REACT NATIVE
BASICS
CODE
APP
1. Web developers can make apps
2. Know and use tooling to be more productive
3. Learn platform concepts and dev tricks
REACT NATIVE
• Inspector
• Hot reloading
• Profiling using systrace
• Debugger
• Editor integration
TOOLING
INSPECTOR
HOT RELOADING
PROFILING
DEBUGGER
EDITOR INTEGRATION
• WebStorm/PHPStorm: JS/JSX/ES6 support
• Microsoft VSCode, Nuclide
• Clickable stack trace:REACT_EDITOR=pstorm npm start
EDITOR INTEGRATION
1. Web developers can make apps
2. Know and use tooling to be more productive
3. Learn platform concepts and dev tricks
REACT NATIVE
• 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
• 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
1. Web developers can make apps
2. Know and use tooling to be more productive
3. Learn platform concepts and dev tricks
REACT NATIVE
• Redux DevTools
• Inspect state changes
• Replay actions
• Synchronise app states across simulators
• Redux Storage: offline storage
BONUS
![[React-Native Tutorial 10] Camera Roll / Gallery / Camera / Native Modules by Making Selfies Scoreboard Apps.](https://static.fdocuments.in/doc/165x107/58728d3f1a28ab36118b57f7/react-native-tutorial-10-camera-roll-gallery-camera-native-modules.jpg)
