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
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
Updates• iPhone7, iOS 10 and Xcode 8 is released!
• iOS 10 adaption rate is already 33% of whole iOS market share.
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
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’
Index.js
Index.js
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.
• 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
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
StockButton.js
Including StockButton Components in Main App.
Index.js
Adding ChangeIndex method
Index.js
Push A Button &See Action in
Remote Debugger
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
A Callback Function
Index Component
StockButton Componentthis.
props
A Callback Function
Index Component
StockButton Component
When User Press a Button
SET INDEXBKK:SET
Getting Index Codes
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
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" } ]
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.
api.js
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
.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.
.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.
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)
Output the value• Set up state for displaying the value.
• Set up initial state.
Update State
Press
Making Initial Loading• Add this.changeIndex at the constructor
Adding Red / Green Text Color
Homework• Make the Stock application that can view the USA
Tech Stock Markets
• Apple: AAPL
• Google: GOOG
• Microsoft: MSFT
• Facebook: FB
• Alibaba: BABA
Top Related