Intro to React Native
Download as PPTX, PDF
1 like117 views
This document introduces React Native, including who uses it, what it is, how to build and learn it, and how it compares to native development. React Native is a JavaScript framework that allows building iOS and Android apps using React. It was released by Facebook in 2015 and is open source. The document discusses installing React Native, key components like state and props, the component lifecycle, debugging tools, and Redux for state management. It compares the advantages of React Native like cross-platform development and instant reloading to native development.
Intro to React Native
- 1. INTRO TO REACT NATIVE Dom Nguyen QSoft Technical Office Nov 16,2017 1
- 2. CONTEXT Whos using React Native What is React Native? We build and learn React Native Compare Native and React Native Q/A 2
- 3. WHOS USING REACT NATIVE Thousands of apps are using that! 3
- 4. 4
- 5. WHAT IS REACT NATIVE? Javascript framework for creating native applications Released in 2015 by Facebook Open Source Allow to create iOS, Android 5
- 6. WE ARE BUILD AND LEARN REACT NATIVE? React Installation CodeEditor for development React Learning ES6 + ESLint React Component, State & Props 6
- 7. React Component Life Cycle React Navigation Fetch Data ( ApiSauce) Redux - Store management Debugging Tools (Chrome Developer Tools) Immutable JS 7
- 8. Medium Channel (Redux, React Native, Bring Module React Native,etc) Real Projects ( Github) Books ( Full-Stack React, etc) 8
- 9. REACT INSTALLATION OSX ( Brew, Node, Watchman, React Native CLI, Xode, Android Studio, Android Env) {code} /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/inst all/master/install) && brew install node && brew install watchman && npm install -g react-native-cli {code} 9
- 10. Windows iOS is not support Chocolatey Node Js Python2 Jdk8 React native CLI Android Studio 10
- 11. CODEEDITOR FOR DEVELOPMENT REACT Webstorm SublimeText Atom+Nuclie Visual Studio Code 11
- 12. LEARNING ES6 Arrow functions Extended Parameter Handing - Default Parameter function Modules - import, export Promise (Async, Await) Classes 12
- 13. REACT COMPONENT, STATE & PROPS Component (Button, FlatList, Image, Text, etc) State ( Auto update UI when changed) Props ( Paramater) Nested Component ( The component's state is the props of the other component) 13
- 14. REACT COMPONENT LIFE CYCLE Initialization getDefaultProps() getInitialState() render() 14
- 15. Mounting Constructor() ComponentWillMount() Render() ComponentDidMount() 15
- 16. Update componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() 16
- 17. Error Handing componentDidCatch() UnMounting componentWillUnmount() 17
- 19. NATIVE Proprietary Platforms Distributing Binaries Compile and Wait Platform-aware Teams Imperative APIs 19
- 20. REACT NATIVE Open Source Instant Distribution Reload Run Unified Teams Declarative APIs 20
- 21. COMPARE NATIVE VS REACT NATIVE 21
- 22. REFERENCE https://facebook.github.io/react-native/docs/getting- started.html https://reactjs.org/docs/react-component.html http://busypeoples.github.io/post/react-component- lifecycle/ https://medium.com/react-ecosystem/react- components-lifecycle-ce09239010df 22
- 23. https://github.com/thanhtungdp/learn-react- how-to https://medium.com/@vinceyuan/react-native- debugging-tools-3a24e4e40e4 https://www.ibm.com/developerworks/library/ wa-manage-state-with-redux-p1-david- geary/index.html https://medium.com/javascript-scene/10-tips- for-better-redux-architecture-69250425af44 https://facebook.github.io/immutable-js/23
- 24. Nov 16, 2017 We can do it and Thanks for your support 24