You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: lectureNotes.md
+38-2Lines changed: 38 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,8 +14,9 @@ React Native
14
14
- Java
15
15
3) Expo Framework
16
16
4) React Native Components
17
-
5)
18
-
17
+
5) How to Style Components
18
+
6) Creating & Nesting Components
19
+
7) How does React Native work
19
20
20
21
21
22
# Introduction to React Native
@@ -36,7 +37,42 @@ A framework for React Native that streamlines the development & deployment proce
36
37
- Abstracts React Native setup & provides excellent development tools so you don't need to deal with XCode or Android Studio and emulators
37
38
- Has most features of React Native but are missing some
38
39
- Makes over the air updates easier (You can do this without expo it's just a little harder. Also, OTA updates should be used for patches that don't change app functionality. Apple and Google do not like it when you make big changes to applications without going through their approval process)
40
+
- App.js is the default root component
39
41
40
42
# React Native Components
41
43
React Native doesn't use HTML elements like regular ReactJS instead everything that you render is a component from the React Native library. [React Native Components API](https://facebook.github.io/react-native/docs/activityindicator)
42
44
45
+
- Cant' use HTML elements
46
+
47
+
# Styling Components
48
+
49
+
React Native exposes a StyleSheet function used to create objects that can be fed into components to be used as styling. Similar to inline CSS you can use in React.
50
+
51
+
- Most properties found in CSS have a React Native equivalent
52
+
- Styling relies heavily on a Flexbox-like design
53
+
- There are two units available: percentages as a string and a arbitrary numbered unit which represents a set amount of pixels. The amount of pixels the unit represents is dependent on the dpi of the screen. https://facebook.github.io/react-native/docs/pixelratio.html#content
54
+
55
+
# Creating & Nesting Components
56
+
57
+
- You can create components the same way you do in React
58
+
- You can nest components the same way you do using JSX in React
59
+
60
+
# How does React Native work
61
+
62
+
- Regular ReactJS turns React Components into objects which are then translated to javascript & html elements
63
+
- React Native compiles React Components into Native mobile components
64
+
65
+
## Different from other frameworks
66
+
67
+
2) Native UI
68
+
- React Native -> Compiles to Native UI but bridges logic using Javascript. Components are Native but when a component is clicked it executes javascript code
69
+
- Xamarin, .NET Mobile framework -> Compiles to Native UI but bridges logic using C#
70
+
- Flutter -> Compiles to native
71
+
- Pretty close to native
72
+
73
+
1) WebViews / Hybrid apps
74
+
- Cordova, Phonegap, Ionic are all webview frameworks which are basically HTML, CSS, JavaScript viewed through a mobile app
0 commit comments