Lab 06React Review & Cookie

Software Studio

DataLab, CS, NTHU

2020 spring

Outline

• React

• Cookie

• Today’s Mission

Outline

• React

• Cookie

• Today’s Mission

React

• Write HTML in JS

• Component based

React

• Write HTML in JS

• Component based

Component based in React

• Use Class

• New Object

Declarative style

• Instead of thinking of how you want to accomplish a result, thinking what the component should look like in it’s state.

• Render a component by its props and state

State

• Stores local data of a component

• Can be modified by setState()

• If state is used in render(), whenever state changes, it will trigger re-render automatically.

Props

• Data come from the parent

• Read only

• Re-render will also be triggered when props change

How to communicate between components?

Downward Data Flow

• Parent can pass data to child components as their props

• Child components render different contents according to the props

props

ParentChild

Upward Data Flow

• Parent can pass callback function to child components as their props

• Child components pass data to parent through the callback function

props

Props.callback(data)

ParentChild

If I want to call some method when re-render?

Component Life Cycle

• constructor()

• componentDidMount()

• shouldComponentUpdate()

• componentDidUpdate()

• componentWillUnmount()

• …

Component Life Cycle

• Deprecated methods• componentWillMount()

• componentWillUpdate()

• componentWillReceiveProps()

• Avoid to use them (if possible)

If you want to start a React project quickly

• Create React App is a very useful tool, which handles most configurations for you (like babel and webpack)

• You can use it in your project!

Outline

• React

• Cookie

• Today’s Mission

What is cookie?

How do we keep user’s info?

You can use Cookie!

Cookie

• Small piece of data stored locally.

• String only.

• name=value;expires=date;path=path;domain=domain;secure

Some constraint

• Too small (only 4KB)

• Pass as http request header

• Not secure

Using cookie via js

Using cookie via React

• react-cookie

• Step 1: npm install xxx

• Step 2: import

• Step 3: use their api call • cookie.set(name, val)

• cookie.get(name)

• cookie.remove(name)

Using cookie via React

Outline

• React

• Cookie

• Today’s Mission

Today’s Lab

• Add a button to store favorite city in cookie.

• Show weather info when the navbar has clicked.

• Deadline 4/16 17:20