[react native tutorial] lecture 6: component, props, and network
TRANSCRIPT
![Page 1: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/1.jpg)
Lecture 6: Component, Props and Network
Learn by making Stocks app
Kobkrit Viriyayudhakorn, Ph.D. CEO of iApp Technology Limited.
[email protected] http://www.kobkrit.com
![Page 2: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/2.jpg)
Important Links• Source Codes
https://github.com/kobkrit/learn-react-native
• Course Materials http://www.kobkrit.com/category/programming/react-native/
• Score Announcementhttp://bit.ly/its484quizscore
![Page 3: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/3.jpg)
Updates• iPhone7, iOS 10 and Xcode 8 is released!
• iOS 10 adaption rate is already 33% of whole iOS market share.
![Page 4: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/4.jpg)
Making Stocks App1. Draw UI on Paper
2. Initial project using react-native
1. $|> react-native init stock
3. Making UI
4. Making Styles
5. Input Handling
6. Fetch Data from Network
7. Output
![Page 5: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/5.jpg)
Making UI• Make a View have
style.container fill the full screen
• Split them two 2 parts equally, header and footer (yellow and pink part)
• Yellow part, set every thing on center
• Pink part, have flexDirection: ‘row’ and flexWrap: ‘wrap’
![Page 6: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/6.jpg)
Index.js
![Page 7: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/7.jpg)
Index.js
![Page 8: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/8.jpg)
React’s Component• React is fundamentally designed for component-
based programming.
• Build encapsulated components that manage their own state, then compose them to make complex UIs application.
• A Component can have many children components.
• Communication from parent to children components can be done via Props.
![Page 9: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/9.jpg)
• We have 9 buttons for stock codes. (A button is highlighted on the left)
• Many duplicated elements should make it as a Component.
• Don’t Repeat Yourself! (DRY) principle.
Make Repeat Elements As Components
![Page 10: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/10.jpg)
Hello StockButton!• Create a new file named
‘StockButton.js’ located in the same directory of the project.
• StockButton is a component for represent a Stock Index button at the lower half of the app.
• After we complete the StockButton component, we will import and use it as a part of the main Stock application component.
StockButton
![Page 11: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/11.jpg)
StockButton.js
![Page 12: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/12.jpg)
Including StockButton Components in Main App.
Index.js
![Page 13: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/13.jpg)
Adding ChangeIndex method
Index.js
![Page 14: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/14.jpg)
Push A Button &See Action in
Remote Debugger
![Page 15: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/15.jpg)
Props• Communication from parent to child components.
• It can be done by using attributes values, and/or callback functions.
• Callback functions allows the child components tocommunicate back to the parents.
Attribute Value
A Callback Function
Callback FunctionAttribute Value
![Page 16: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/16.jpg)
A Callback Function
Index Component
StockButton Componentthis.
props
![Page 17: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/17.jpg)
A Callback Function
Index Component
StockButton Component
When User Press a Button
SET INDEXBKK:SET
![Page 19: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/19.jpg)
Getting Index Codes
![Page 20: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/20.jpg)
Getting JSON information of a market index
• Google Finance have internal API for getting finance information in JSON format.
• https://www.google.com/finance/info?q=STOCKCODE
• For Example, https://www.google.com/finance/info?q=SHA%3A000001
![Page 21: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/21.jpg)
JSON Explain• // Invalid JSON Syntax (Need to Remove).
• "l" : “3,022.37" Stock Index
• "c" : “-3.69” Stock Index Change (Raw number)
• "cp" : “-0.12" Stock Index Change (Percentage)
// [ { "id": "7521596" ,"t" : "000001" ,"e" : "SHA" ,"l" : "3,022.37" ,"l_fix" : "3022.37" ,"l_cur" : "CN¥3,022.37" ,"s": "0" ,"ltt":"11:17AM GMT+8" ,"lt" : "Sep 20, 11:17AM GMT
+8" ,"lt_dts" : "2016-09-20T11:17:25Z" ,"c" : "-3.69" ,"c_fix" : "-3.69" ,"cp" : "-0.12" ,"cp_fix" : "-0.12" ,"ccol" : "chr" ,"pcls_fix" :
"3026.0513" } ]
![Page 22: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/22.jpg)
API Module
• Create a new file named ‘api.js’ located in the same directory of the project.
• Export as the default function that getting Stock information from the Google Finance
• Main app (Index.js) will imported that API module and using it in the changeStock method.
![Page 23: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/23.jpg)
api.js
![Page 24: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/24.jpg)
Fetch API• The Fetch API provides an interface for fetching
resources (including across the network).
• It is a living standard in Web Hypertext Application Technology Working Group (WHATWG)
• Syntax:
// Resolve response as Blob// Resolve response as JSON// Resolve response as Text
![Page 25: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/25.jpg)
.then Promise• .then promise is a kind of advance technique of
chaining callback function.
• .then promise will be invoked when the earlier operation is completed.
// (1) Fetching from URL
// (2) Wait until fetchingis finished, then convert response data to text format.
// (3) Wait until the dataconversion is finished, then, using the data.
![Page 26: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/26.jpg)
.catch Promise• In cases of fetching errors, such as, Internet connection down,the
URL is no longer exist, etc. How can we resolve it?
• .catch promise can be added at the end of any promise to capture any errors in the promise. The code interpreter will jump from the point of the error occur to the functions in .catch Promise.
![Page 27: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/27.jpg)
api.js
// Invalid JSON Syntax (Need to Remove)."l" : “3,022.37" Stock Index
"c" : “-3.69” Stock Index Change (Raw number)
"cp" : “-0.12" Stock Index Change (Percentage)
![Page 28: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/28.jpg)
Output the value• Set up state for displaying the value.
• Set up initial state.
![Page 29: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/29.jpg)
![Page 30: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/30.jpg)
Update State
![Page 31: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/31.jpg)
Press
![Page 32: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/32.jpg)
Making Initial Loading• Add this.changeIndex at the constructor
![Page 33: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/33.jpg)
Adding Red / Green Text Color
![Page 34: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/34.jpg)
![Page 35: [React Native Tutorial] Lecture 6: Component, Props, and Network](https://reader033.vdocuments.mx/reader033/viewer/2022042619/58728d3f1a28ab36118b57f5/html5/thumbnails/35.jpg)
Homework• Make the Stock application that can view the USA
Tech Stock Markets
• Apple: AAPL
• Google: GOOG
• Microsoft: MSFT
• Facebook: FB
• Alibaba: BABA