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.

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

11. Project folder structure
Index
Package.json
Android
iOS
www.jaynagarblog.wordpress.com

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 :)