what's react native

1. React Native

2. Mohammad Sabaeian
G i t h u b . c o m / m s a b a e i a n
L i n k e d i n . c o m / i n / m s a b a e i a n
Te l e g r a m . m e / m s a b a e i a n

3. ReactJs
A J a v a S c r i p t l i b r a r y f o r b u i l d i n g u s e r i n t e r f a c e s
• 2011 – Jordan Walke
• 2013 – JSConf US
• Font-End (View)
3

4. React Native
B u i l d n a t i v e m o b i l e a p p s u s i n g J s a n d R e a c t
• 2015 – React.js Conf
• !Hybrid App
• !Mobile Web App
• !Compiler
• Bridge
4

5. FR
How Works?
5
Main Thread Bridge
JavaScript
Thread

6. FR
Example
6
TextView Android
Connector
<Text>

7. FR
Example
7
UILabel IOS
Connector
<Text>

8. FR
Example
8
? Any
Connector
<Text>

9. FR
Why?
9
• Web Apps Like
• <Image /> ( <img> )
• <TextInput> ( <input> )
• <View> ( <div>
• borderRadius (border-radius)

10. FR
Why?
10
• Single Codebase

11. FR
Why?
11
• Programming Language

12. FR
Why?
12
• State (reactive) B4A
Label.Text = “Mohammad”
React Native
<Text>{this.state.name}</Text>
this.setState({name:’Mohammad’})

13. FR
Why?
13
• Hot Reloading
• Live Reloading

14. FR
Who’s using RN?
• Facebook
• Facebook app
• Ads Manager
• Instagram
• Analystics
• Pinterest
• Skype
• AirBnb
https://facebook.github.io/react-native/showcase 14
•‫ریحون‬
•‫همپا‬
•‫ایوند‬
•‫الوپیک‬
•‫نوبتی‬
•‫رسید‬

15. FR
Simple Roadmap
• Html & Css
• Javascript Es6 , Es7 , Es8
• ReactJs
• Component
• State
• Props
• Lifecycle
• Java | Swift (Recommended)
• React Native
• Practice , Practice , Practice , Test Projects
15

16. FR
Explorer with code
16

17. FR
Best Websites
• Javascript30.com
• Javascript.info
• Youtube.com
• Medium.com
• Virgool.io
17

18. Any questions?