The document provides an overview of React Native, including its history and timeline, components, styles, performance, debugging tools, and how to set up a React Native application. Some key points covered include: - React Native allows building native mobile apps using JavaScript and React by rendering UI components to native platform views. - It uses the same fundamental UI building blocks as regular iOS and Android apps like Views, Text, Image, ScrollView etc. but they are implemented using JavaScript and React. - Styles are defined using JavaScript objects with the StyleSheet.create method, allowing flexible styling similar to CSS but optimized for mobile. - Under the hood, React Native combines the fundamental native platform APIs with

1. React Native

2. Contents
1.Introduction
2.Building first scenes
3.Networking/Navigation
4.Performance
5.?

3. Why do we like native?

4. Native applications
1. Performance
2. Gestures
3. Animations
4. UI

5. Why is it difficult to develop?

6. I need...
1. Technology stack
a. iOS
b. Android
2. Code reuse
3. Development time

7. Instead
1. Technology stack
a. iOS
b. Android
2. Code reuse
3. Development time
1. JavaScript
a. -
b. -
2. Same shared logic
3. Ctrl+R

8. Do we have an alternative?

9. Yes!
1. Cordova (PhoneGap) + Ionic
2. JavaScript Native
3. React Native

10. Should we use them?

11. JavaScript Native (2015)
1. Simple applications
2. Performance
3. Angular JS
4. Community
5. Documentation

12. Ionic + PhoneGap (May 2015)
1. Angular JS
2. Native API access
3. Community
4. Performance
5. Hybrid

13. Isn’t Hybrid a solution?

14. HTML5 Application
(HTML + CSS + JS)
Rendering Layer
(Web View)
File JS
Camera
JS
Media
JS
GPS JS
Cordova Bridge
(Abstraction Layer)
File API
Camera
API
Media
API
GPS API
Phone Operative System
(iOS, Android, Windows Phone)

15. Time to React Native!

16. History timeline

17. Ads manager

19. 1. Post Promote: 99%
2. SMS Captcha Checkpoint: 97%
3. Comment Moderation: 85%
4. Lead Gen Ads: 87%
5. Push Notification Settings: 92%

20. 85%

21. Who’s using it?

23. They are so cool that all job is done
by…. Bots!

26. Available for
Android 4.1+ iOS 8+

27. What’s with win Phone?

28. Nope
H

29. What should I know before?

30. React + Redux
1.Actions
2.Reducers
3.State
4.Props

31. Navigation is… COMPLEX!

32. Code

33. Do we have the same components?

34. Instead of:
<div>
<span>
<section>

35. UI component library

36. https://react.parts/native

37. What about styles?

38. StyleSheet
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: '#222222',
},
active: {
borderWidth: 2,
borderColor: '#00ff00',
},
});
<Text style={styles.base} />
<View style={styles.background} />

39. Flex

40. Density independent pixels

41. What’s inside?

42. Under the hood

43. 1.Present in iOS
2.Absent in Android
=> HelloWorld app 3.5MB

47. Threads

49. Tools

50. React Native for Web

51. Profiler

54. Debugger

56. React Native Debugger

57. Reactotron

58. Ignite

59. > ignite new MyApplication

60. Setting up an application

61. CLI
> npm install -g react-native-cli
> react-native run-android [run-ios]

62. https://developer.android.com/studio/install.htm
https://developer.apple.com/xcode/

63. Installing necessary SDK

64. File structure

65. Questions?