React-Native-N3XTCODER-Arya-Workshop-April-2016
0 likes154 views
Learn more about React Native and how to solve societies most pressing needs by visiting www.n3xtcoder.org
![// DATA => VIEW //
state = {
isLoading: false,
data: [...],
}](https://image.slidesharecdn.com/n3xtcoderworkshoparya2016presentation2kopie-160421085323/85/React-Native-N3XTCODER-Arya-Workshop-April-2016-7-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to React-Native-N3XTCODER-Arya-Workshop-April-2016 (20)
Ad
Recently uploaded (20)
Ad
React-Native-N3XTCODER-Arya-Workshop-April-2016
- 1. MOBILE DEVELOPMENT - REACT NATIVE WORKSHOP WITH ARYA BERLIN, APRIL 16, 2016
- 2. // WHY REACT NATIVE? // 1. Developers can utilise the same concepts as on the Web i.e. reason about UI in the same way and code in JS - “learn once” philosophy. 2. Faster development workflow with quick reload (cmd+r) or live update (watchman) 3. Bypass the App Store for UI changes (e.g. apphub.io, codepush.tools). 4. Cross-platform for Android/iOS - “learn once” again ;)
- 3. // TOOLCHAIN // npm - dependency manager for javascript babel - syntax transformation to use modern JS features and JSX packager - builds the project ready for use on a device JSX - template language for react native (basically just syntactic sugar) Xcode/Android SDK - standard native build tools In addition a dev target such as Xcode Simulator, Android Emulator, or an actual device.
- 4. // REACT OVERVIEW // Components View as a function of the data JSX, some syntactic sugar Virtual DOM One-way data flow
- 5. // COMPONENTS // CommentForm CommentList Encapsulate UI Composable Reusable CommentBox
- 6. // DATA => VIEW // state = { isLoading: true, data: null, }
- 7. // DATA => VIEW // state = { isLoading: false, data: [...], }
- 9. // VIRTUAL DOM // <ul className="commentList"> <li className="comment">John: Hello Berlin</li> <li className="comment">Mary: Love this place</li> </ul>
- 10. // VIRTUAL DOM // <ul className="commentList"> <li className="comment">John: Hello Berlin</li> <li className="comment">Mary: Love this place</li> </ul> <ul className="commentList"> <li className="comment">John: Hello Berlin</li> <li className="comment">Mary: Love this place</li> <li className="comment">Jane: Great people</li> </ul> Efficient Diffing Re-render on any
- 11. // PROPS AND STATE // class Comment extends Component { ... handleClick() { this.setState({ isRead: true }); } render() { let commentClassName = this.state.isRead ? "comment" : "comment comment-unread"; return <li className={commentClassName} onClick={this.handleClick.bind(this)} > {this.props.author}: {this.props.text} </li>; } } Props: immutable State: mutable Callbacks as props
- 12. // UNIDIRECTIONAL DATA FLOW // CommentList <ul> Comment Comment Comment <li> <li> <li> Data
- 13. // UNIDIRECTIONAL DATA FLOW // CommentList <ul> Comment Comment Comment <li> <li> <li> Callbacks (passed in by props)
- 14. // REACT NATIVE // Different components React React Native div View p Text img Image a Touchable ul ListView
- 15. // REACT NATIVE // Layouting in JS No CSS, but similar StyleSheets Flexbox-support height: 40 flex: 1 height: 40
- 16. // REACT NATIVE // Native components MapView DatePickerIOS ToolbarAndroid Native APIs Geolocation Push notifications Vibration ActionSheet Extensible Custom native modules NPM is your friend ;-)
- 17. ABOUT THE ARYA CHALLENGES
- 19. // OUR STARTER APP // We prepared a project to provide a starting point with the basic Arya look and feel. https://github.com/n3xtcoder/react-native-starter >> Walk through the code By the end of the coffee break: Run the project on at least 1 device. Open the project root in your favourite IDE/JS editor.
- 20. // CHALLENGE 1: ARYA MOOD TRACKER // Hit “+” to add an entry User can define their mood right now Store the entry to synchronise later Challenge: Implement the Mood Tracker. Capture plaintext, dropdown, or data from a rich UI (e.g. slider). Store the information in AsyncStorage. >> Helpful links: https://facebook.github.io/react-native/ https://github.com/jeanregisser/react-native-slider
- 21. // CHALLENGE 2: HERO FEATURE // Data from sensors is collected For the purpose of the workshop we will display it in realtime to the user As extra bonus, store it for later analysis Example 1 - live geolocation: Show the user’s position on a map (iOS this is built in) Example 2 - accelerometer: Display the accelerometer value in real-time Build a barchart or other UI component
- 22. // USEFUL MODULES // react-native-sensor-manager – Sensor Data for Android react-native-motion-manager – Sensor Data for iOS react-native-chart – Charts react-native-maps – Advanced maps (iOS and Android) Directory: https://js.coach/react-native