The document discusses React Native, a framework for building mobile apps using React. It covers topics like React Native's definition, how it differs from React, getting started, state and props, lifecycle methods, native vs hybrid apps, components, styling, animations, routing, and Redux integration. React Native allows building mobile apps using JavaScript and React that render natively on iOS and Android, while sharing common codebase between platforms.

2. Copyright 2011 - 2018, ThinkOpen S.r.l.
What we’re going to talk...
2
● Introduction: React Native’s definition
● React Native and React js
● Expo XDE
● State, props and lifecycle events
● React Native between Hybrid and Native applications
● Getting started
● Pros and Cons
● Virtual DOM
● Components, API, style and animation
● React and Redux
● Routing and Navigation

3. Copyright 2011 - 2018, ThinkOpen S.r.l.
Nice to have… You need...
● knowledge of Javascript
● knowledge of JSX or ES6 sintax
● Node js:https://nodejs.org/en/download/
● React Native:
https://github.com/react-community/cr
eate-react-native-app
● Expo XDE: https://expo.io/

4. Copyright 2011 - 2018, ThinkOpen S.r.l.
What is it React Native
4
● framework created by Facebook
● mobile applications on native
platforms
● IOS and Android
● based on Javascript
● React components and UI
Native components
● JSX language

5. Copyright 2011 - 2018, ThinkOpen S.r.l.
React JS and React Native
5
● Javascript library
● Web applications
● HTML to render the app
(ex. <div />)
● CSS
● Animations
● React-router for
navigation
● Framework
● Mobile applications
● Components (ex <View
/>)
● Inline style and
Stylesheet
● Animated API
● <Navigator />
component
VS

6. Copyright 2011 - 2018, ThinkOpen S.r.l.
React Native code

7. Copyright 2011 - 2018, ThinkOpen S.r.l.
Reactjs Code

8. Copyright 2011 - 2018, ThinkOpen S.r.l.
React and React Native

9. Copyright 2011 - 2018, ThinkOpen S.r.l.
Getting started...
$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd Awesome Project

10. Copyright 2011 - 2018, ThinkOpen S.r.l.
Expo XDE : The fastest way to build an
app
https://docs.expo.io/versions/latest/introduction/xde-tour
1.
2.
3. Start building your React
Native project
Scan the QR Code or
Share the link
npm install exp --global

11. Copyright 2011 - 2018, ThinkOpen S.r.l.
State, props and lifecycle methods

12. Copyright 2011 - 2018, ThinkOpen S.r.l.
Props State

13. Copyright 2011 - 2018, ThinkOpen S.r.l.
React methods

14. Copyright 2011 - 2018, ThinkOpen S.r.l.

15. Copyright 2011 - 2018, ThinkOpen S.r.l.
Native App and Hybrid App
15
NATIVE APP
● Native UX
● High Performance
● HW and platform
access
CROSS PLATFORM
NATIVE
● Native UX
● High Performance
● HW nd platform
access
● Multi-platform
● Unified codebase
HYBRID APP
● Multi-platform
● Unified
codebase

16. Copyright 2011 - 2018, ThinkOpen S.r.l.

17. Copyright 2011 - 2018, ThinkOpen S.r.l.
Pros
17
● Community and documentation
● Cross-platform mobile
● Virtual Dom(fast rendering)
...Not less important...React Native is very
FAST:
● Hot Reloading
● Native code integration
● Large availability of Native components
● “Learn once, write anywhere”

18. Copyright 2011 - 2018, ThinkOpen S.r.l.
Cons
18
● It's still improving
● It’s still technical
● Facebook rules

19. Copyright 2011 - 2018, ThinkOpen S.r.l.
Virtual DOM
19

20. Copyright 2011 - 2018, ThinkOpen S.r.l.
Ui Components Library
https://facebook.github.io/react-native/docs/components-and-apis.html

21. Copyright 2011 - 2018, ThinkOpen S.r.l.
Platform-specific components

22. Copyright 2011 - 2018, ThinkOpen S.r.l.
React Native’s Api

23. Copyright 2011 - 2018, ThinkOpen S.r.l.
Interaction with other libraries
React’s virtual DOM has the ability to
declaratively describe a user interface and model
the state of that interface, low barriers to entry
for a decent Javascript developer, all make React
a great go-to library for building UI’s.
Example: NativeBase

24. Copyright 2011 - 2018, ThinkOpen S.r.l.
React Native Elements

25. Copyright 2011 - 2018, ThinkOpen S.r.l.
Layout and Style
Two types of layout: flexbox and absolute.

26. Copyright 2011 - 2018, ThinkOpen S.r.l.
Platform-specific style

27. Copyright 2011 - 2018, ThinkOpen S.r.l.
Animations
“The Animated library is designed to
make animations fluid, powerful, and
easy to build and maintain.
Animated exports four animatable
component types: View, Text, Image,
and ScrollView, but you can also create
your own using
Animated.createAnimatedComponent().
”

28. Copyright 2011 - 2018, ThinkOpen S.r.l.
React and Redux
● Redux manages and organises data
better
● It controls the state of your
JavaScript application
● Application data is maintained in
redux store and representation in
React
● It decides how your application
functions and what representation to
be shown.
npm install axios redux-axios-middleware redux react-redux --save

29. Copyright 2011 - 2018, ThinkOpen S.r.l.
Reducers

30. Copyright 2011 - 2018, ThinkOpen S.r.l.
React Native Routing
https://facebook.github.io/react-native/docs/navigation.html#react-navigation

31. Copyright 2011 - 2018, ThinkOpen S.r.l.
React Navigation
npm install --save react-navigation
Use among different screens: this.props.navigation.navigate
And you can pass params: this.props.navigation.state.params.name

32. Copyright 2011 - 2018, ThinkOpen S.r.l.
Who’s using it

33. Copyright 2011 - 2018, ThinkOpen S.r.l.
Why use it?

34. Copyright 2011 - 2018, ThinkOpen S.r.l.
Why Use it?
#SAVINGS
Less developers
needed
#EFFICIENCY
High performance
#SPEED
Less time
#NATIVE
It looks and
feels native
#COMMUNITY
increase

35. Copyright 2011 - 2018, ThinkOpen S.r.l.
35
Learn Once,
Write Anywhere

36. Copyright 2011 - 2018, ThinkOpen S.r.l.