Lecture 6: Component, Props and Network

Learn by making Stocks app

Kobkrit Viriyayudhakorn, Ph.D. CEO of iApp Technology Limited.

kobkrit@gmail.com 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 Stock Information

Google Finance https://google.com/finance

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