Hands on react native
Download as PPTX, PDF3 likes852 views
This document provides an overview and introduction to building mobile apps using React Native. It discusses React Native's cross-platform capabilities and advantages over hybrid and native mobile development. The agenda covers setting up the React Native environment, using JSX and ES6 features, creating components, integrating APIs, and handling navigation. Code examples demonstrate basic components, using state, debugging, styling with Flexbox, and fetching remote data. The document aims to help readers get started with React Native development.
Hands on react native
- 1. Hands on: React Native By Er.Jay Nagar www.jaynagarblog.wordpress.com
- 2. About me: : Diploma in IT, BE In IT ● Technology: PHP,JS,HTML,CSS ● Community: GDG , Mozilla , GirlScript
- 3. Agenda ● RN introduction ● Brief about technologies it depends on (JSX, ES6) ● Environment setup & RN cli ● Components ● Component lifecycle ● Basic and custom components ● API integration & Navigation www.jaynagarblog.wordpress.com
- 4. Code and output $ git clone https://github.com/sagark1510/RNHandsOn $ cd RNHandsOn $ npm install $ react-native run-android $ git checkout fbf8d19 www.jaynagarblog.wordpress.com
- 5. What is React Native? RN is framework for building mobile apps using ReactJs & Javascript Builds cross-platform mobile apps Uses most of all the ReactJs features www.jaynagarblog.wordpress.com
- 6. Why I should learn React Native? 1. You can start RN app dev in no time if you already know ReactJS 2. 80% code is common 3. Less expensive / Cost effective 4. Easier to code and scale 5. Save massive amount of time
- 7. 1. Hybrid is more like hack than a solution 2. Performance was biggest issue in Hybrid 3. Debugging is faster than ever compare to native 4. No need to recompile for every change as native React Native vs Hybrid Apps vs Native Apps www.jaynagarblog.wordpress.com
- 8. ES6 Features of ES6 1. Classes 2. Arrows function 3. Template string 4. Object and Array destructuring 5. Let & Const 6. Modules import, export 7. Promise https://github.com/DrkSephy/es6-cheatsheet www.jaynagarblog.wordpress.com
- 9. React Native environment setup Environment setup guide: https://facebook.github.io/react-native/docs/getting-started.html www.jaynagarblog.wordpress.com
- 10. Create your first project 1. $ npm install -g react-native-cli 2. $ react-native init RNHandsOn 3. $ cd RNHandsOn 4. $ react-native run-android Or $ react-native run-ios
- 12. JSX Let see how it works https://babeljs.io/repl/
- 13. What is component? ● Everything what you see in RN app is component. ● It’s a reusable piece of code
- 14. Component life cycle Mounting Lifecycle ● constructor(props) ● componentWillMount() ● render() ● componentDidMount() Updating Lifecycle ● componentWillReceiveProps() ● shouldComponentUpdate() ● componentWillUpdate() ● render() ● componentDidUpdate()
- 15. Basic components of React Native ● View ● Text ● Image ● TextInput ● Touchables/Button ● ScrollView $ git checkout ab77077
- 16. What is Props in React Component? www.jaynagarblog.wordpress.com
- 17. What is State in React Component? ● Two type of data controls component Props & State ● Props are controlled by parent component ● State is used to change internal UI/ Data of the component
- 18. Counter example for State demonstration. $ git checkout c494ae8 www.jaynagarblog.wordpress.com
- 19. Debugging in RN
- 20. Styling in React Native Component ● Built in component has STYLE attribute. ● Style can be inline or external object ● Use StyleSheet.create
- 21. Style - Flexbox ● What is FlexBox ● Let’s make a layout using FlexBox $ git checkout c9a2b6a www.jaynagarblog.wordpress.com
- 22. Custom Component Smart Component ● “C” of “MVC” architecture. ● It is also known as Containers ● It handles how thing works ● Does the data fetching and Provides application data & handle events / actions Dumb Component ● “V” of “MVC” architecture. ● It is also known as stateless component ● It handles how things looks ● It has only props, callbacks which are provided by smart component www.jaynagarblog.wordpress.com
- 23. Example of Custom Components Dumb Component Smart Component
- 24. Navigation in React Native $npm install --save react-navigation
- 25. Login example Example of Login using React Navigation and AsyncStorage. $ git checkout a7bd54e $ git checkout 95dbd39 www.jaynagarblog.wordpress.com
- 26. Working with Remote data - Fetch API ● Fetch API gives the global fetch method for accessing and manipulating parts of HTTP pipeline. ● Earlier we were using XMLHttpRequest for AJAX calls but this new Fetch api will replace it soon all over.
- 27. FlatList with static & Dynamic content example $ git checkout 169e7c6 www.jaynagarblog.wordpress.com
- 28. Any Question?
- 29. THANK YOU :)