---
title: Advanced Topics on React.js and React Router (04/10)
tags: 107-2 Ric's Web Programming
slideOptions:
theme: beige
transition: 'fade'
slidenumber: true
# parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'
---

#### Advanced Topics on React.js and React Router


Spring 2019 。 Ric Huang

---

### Example in previous meeting...


----

### In "index.js"

import Counter from './containers/Counter';

ReactDOM.render(<Counter / >, document.getElementById('root'));

----

### In "Containers/Counter.js"

import Button from "../components/Button";
import Input from '../components/Input';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 100 };
  }

  ... some methods for class Counter 
  
  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <span>
          <Button text="+" onClick={this.handleInc} />
          <Button text="-" onClick={this.handleDec} />
          <Input onKeyPress={this.handleInput} />
        </span>
      </div>
    );
  }
}

----

// In Components/Button.js
import React from 'react'
export default ({ onClick, text }) => {
  return <button onClick={onClick}>{text}</button>;
}

// In Components/Input.js
import React from 'react';
export default ({onKeyPress}) => {
  return <input type="text" 
                placeholder="Enter a number..."
                onKeyPress={onKeyPress}
         />;
}

----

class Counter extends Component {
  ...
  handleInc = () => this.setState(state => ({ count: state.count + 1 }));
  handleDec = () => this.setState(state => ({ count: state.count - 1 }));
  setNumber = num => this.setState(() => ({ count: num }));
  handleInput = e => {
    if (e.key === "Enter") {
      const value = parseInt(e.target.value);
      if (value === 0 || value) this.setNumber(value);
      e.target.value = "";
      e.target.blur();
    }
  };
  ...
}

---

### Advanced Topics on React.js

1. 善用 Array and arrow functions ([ref](https://reactjs.org/docs/lists-and-keys.html))
2. Composition and props.children ([ref](https://reactjs.org/docs/composition-vs-inheritance.html))
3. React.Fragment ([ref](https://reactjs.org/docs/fragments.html))
4. Higher Order Component (HOC) ([ref](https://reactjs.org/docs/higher-order-components.html))
5. React Refs ([ref](https://reactjs.org/docs/refs-and-the-dom.html))
6. Forwarding refs ([ref](https://reactjs.org/docs/forwarding-refs.html))

---

### 善用 Array and arrow functions

----

### [範例] TodoList.js

import classes from './TodoList.module.css'
import TodoItem from './TodoItem/TodoItem'

export default ({ items, toggleItem, removeItem, save }) => {
  if (!items.length) return null;
  return (
    <ul className={classes.List}>
      {items.map((ele, key) => (
        <TodoItem item={ele} key={key} identity={key} 
                  toggleItem={toggleItem}
                  removeItem={removeItem} save={save} / >
      ))}
    </ul>
  );
}

----

* 在前頁的例子

return (
  <ul>{an array of React Components}</ul> 
)

* 而 array of React Components 則是用 ---

  Array.map( element => (some JSX expression) );

來實現

----

#### "key" for React array of components

* 請注意：身為一個新手，當你產生一個 array of components 的時候，你很可能會得到 warning 說：*Warning: Each child in a list should have a unique "key" prop.*
* 這是因為對於 listed items, React 是用內建的 global attribute "key" 來決定哪些 items 有被修改或是增減，所以如果你沒有 specify "key", 沒有加上 "key" attribute, 你的 React Component 的行為可能會跟你的預期不同
* Note: 不過要小心 "key" 的 value 要維持 unique, 不可以有不同的 listed items 有相同的 keys。更多 details, 可以看看 React 的 VDOM 如何察覺變化 ([ref](https://reactjs.org/docs/reconciliation.html))

---

### Compositional Model

* 想像一下，在某個 blog site, 隨著瀏覽頁面不同，你看到的內容也會不一樣。不過，這些頁面似乎都是由一些基本元件所組成 --- memnu bar, article, images, comments, etc. 這種由一些 components 來組成頁面的設計方法，是 React 裡面很重要也很基本的 "Compositional Model"

----

### props.children

* 不過，在 compositional model 裏頭的 child components 並不是 listed items, 並且在宣告的時候，並沒有確定有哪些 children, 而是在應用時才被 instantiated. 例如：

<h1> This is a title </h1>
<p> This is a paragraph </p>
<div> This is a div </div>
<footer> This is a footer </footer>

----

* 這時候你可以用內建的 **"props.children"** 來宣告一個 "黑盒子"，讓 instantiate 這個 component 的物件來決定 children 由哪些 components 來組成：

class BlogPage extends Component {
  render () {
    return
      <div className="blog-page">
        {this.props.children}
      </div>;
  }
}

----

// In "App.js"

class App extends Component {
  render() {
    const contents = [];
    contents.push(<h1> This is a title </h1>);
    contents.push(<p> This is a paragraph </p>);
    contents.push(<div> This is a div </div>);
    contents.push(<footer> This is a footer </footer>);
    return <BlogPage children={contents} />;  
  }
}

---

### React.Fragment

* Recall: 在 React Component 的 render() 裏頭，你必須 return 一個 single root node. 但當我們需要 return multiple nodes 的時候，一個解法是用 "\<div>\</div>" 包起來。但是，如果 caller 的 children 不可以是 "\<div>" 怎麼辦呢？

class MyTable extends Component {
  render() {
    return
      <table>
        <MyData dataInput={data1}/ >
        <MyData dataInput={data2}/ >
      </table>
  }
}

----

### Oops, \<tr> is expected...

class MyData extends Component {
  render() {
    return (
      <div> 
        <tr>{some data}</tr>
        <tr>{some data}</tr>
      </div>
    );
  }
}

----

### Use React.Fragment to solve it!

import React, { Fragment } from 'react';
class MyData extends Component {
  render() {
    return (
      <Fragment> 
        <tr>{some data}</tr>
        <tr>{some data}</tr>
      </Fragment>
    );
  }
}

----

* It can also be written as...

import React, { Fragment } from 'react';
class MyData extends Component {
  render() {
    return (
      <> 
        <tr>{some data}</tr>
        <tr>{some data}</tr>
      </>
    );
  }
}

* However, some browsers may not yet support this short form yet. Use it with care!
* Note: "key" is the only attribute that can be used in \<Fragment>. Event handlers are not supported yet.

---

### Higher Order Component (HOC)

* **"Higher Order Component"** 是另外一個 React 裡頭常用的 programming technique --- 想像你的 nevigation bar 會隨著 logged in user 不同而有不同的內容/layout，或者是你的 blog page 會隨著文章種類的不同而選擇不同的來源... 等，但他們的 event binding, error handling, 或者是其他的邏輯是一樣的，所以你會想要有一個 **"產生 component 的 function"**, 可以吃進一個 component 當參數，然後也許吃進另一個 callback 當作客製化 layout/data source 的方法，像這樣 (next page):

----

const generalNavBar = (WrappedNavBar, layoutMethod) =>
  return class extends Component {
    constructor(props) {...}
    ... some life-cycle methods or event handling logic
    render() {
      return <WrappedNavBar ... / >;
    }
  }

* Note:
1. 基本上, HOC 就是用一個 function, 吃進一個 wrapped component, 產生另一個 higher-order component
2. 參數列不限個數，但第一個 arg 通常是 wrapped component
3. "return class extends" <== anonymous class

----

### Another HOC example

const withAuthGuard = WrappedComponent => {
  return class extends Component {
    render() {
      return (
        <Query query={ME_QUERY}
               onError={error => {...; }}}> {
          ({ data, loading, error }) => {
            if (loading) return <WrappedComponent loading={true} />
            if (error) return <WrappedComponent isAuth={false} />
            return (
              <WrappedComponent isAuth={true} username={data.me.username} />)}
        } </Query>)}
  }
}

----

### HOC should be pure!

* Note that a HOC doesn’t modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC composes the original component by wrapping it in a container component. A HOC is a pure function with zero side-effects.
* However, don't apply HOC in render(). This will cause the subtree to unmount/remount each time! ([ref](https://reactjs.org/docs/higher-order-components.html#dont-use-hocs-inside-the-render-method))

---

### React Refs

* 當你要從介面去改動一個很深的 component 的時候，正常來說你要透過一層層 props 的傳遞，才能把要改的資料/執行的動作傳到底層的元件。但，有時候這樣寫不是很直觀、或者是當牽涉到你不應該去改動的第三方 modules 的時候，一個有點暴力、雖然不建議但偶爾可以用一下的方法就是 create 一個 React ref, 就像是一個 endpoint, 讓外部的使用者可以直接 access 到這個 DOM node/component
* 很明顯的，這樣做會破壞 encapsulation, 所以在加入 React Ref 之前，應該要思考一下是否真的有必要這麼做？ (我們未來會再教一些比較好、安全的做法)

----

### React Refs Example

class App extends Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  focusTextInput = () => { this.textInput.current.focus(); };
  render() {
    return (
      <div>
        <textarea rows="4" cols="50" ref={this.textInput} / >
        <input type="button" value="Click to edit"
               onClick={this.focusTextInput} />
      </div>
    );
  }
}

----

* In the previous example ---

class App extends Component {
  constructor(props) {
    super(props);
    // 產生一個 React ref, 先把它存在 this.textInput 裡
    this.textInput = React.createRef();
  }
  ...
  render() {
    return (
      <div>
        // 產生一個 <textarea> element, 並且把存在 
        // this.textInput 的 reference 指到這個 element
        <textarea ... ref={this.textInput} / >
        ...
      </div>
    );
  }
}

----

* Previous example (continued)

class App extends Component {
  ...
  render() {
    return (
      <div>
        ...
        // 當這個 input button 被 click 的時候，
        // 呼叫 this.focusTextInput
        <input type="button" value="Click to edit"
               onClick={this.focusTextInput} />
      </div>
    );
  }
}

----

* Previous example (continued)

class App extends Component {
  ...
  // 當 focusTextInput 被呼叫的時候，用 this.textInput.current 
  // 抓到目前被 referred 的 element, 也就是下面的 <textArea>, 
  // 並且執行它的 .focus() 
  focusTextInput = () => { this.textInput.current.focus(); };
  render() {
    return (
      <div>
        <textarea rows="4" cols="50" ref={this.textInput} / >
        ...
      </div>
    );
  }
}

----

* 如果有兩個 elements 都設定 refs... 請分別 createRef()

class App extends Component {
  constructor(props) {
    super(props);
    this.textInput1 = React.createRef();
    this.textInput2 = React.createRef();
  }
  ...
  render() {
    return (
      <div>
        <textarea ... ref={this.textInput1} / >
        <textarea ... ref={this.textInput2} / >
        ...
      </div>
    );
  }
}

---

### Forwarding Refs

* 有時候必須將 local 拿到 child or HOC 的 component 來作為 ref, 以利在 local 做一些直接的操作

* 語法：

const SomeComponent = React.forwardRef(
  (props, ref) => (<ChildComponent ref={ref} ... / >)
);

class App extends Component {
  ... this.ref = React.createRef();
  // this.ref.current will become <ChildComponent>
  render() {
    return (
      <SomeComponent ref={this.ref}... / >
    );
  }
}

----

### 完整範例

const MyDiv = React.forwardRef((props, ref) => (
  <div ref={ref} className="MyDiv">{props.children}</div>
));

class App extends Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }
  componentDidMount() { console.log(this.ref.current); }
  render() {
    return (
      <MyDiv ref={this.ref}>
      ...
      </MyDiv>
  )}
}

---

學習完一些 advanced React topics 之後，
我們接下來要來學 **React 生態系** 裡頭一個很基礎，
也很重要的部分：**React Router**

---

### React Router

----

### Motivations and Backgrounds: Server-Side (後端) vs Client-Side (前端) Rendering

* Recall: 我們這邊講的**前端**是指你所使用的瀏覽器，負責收到 HTML & data 以後顯示出網頁，而**後端**是指 Web Server, 在收到 http request 之後一方面視需求到資料庫存取、修改資料，然後把 HTML & data 回傳給前端顯示

----

### Server-Side (後端) vs Client-Side (前端) Rendering

* **"Render"** 一般翻譯成 **"渲染"** 在網頁上就是把頁面畫出來的意思。當使用者點選連結、切換頁面的時候，到底是後端把整 HTML 處理好之後，再傳給前端畫出來 (i.e. server-side rendering)，還是後端只把必要資料處理好之後傳給前端，再由前端處理產生 HTML 再畫出來 (i.e. client-side rendering) 呢？

----

### Server-Side (後端) Rendering

* 如果使用者開啟一個新的網址，server-side rendering 會讓前端拿到一個新的 HTML,他會看到畫面刷新，如果網路 lag 或是網頁寫得不夠好的話，甚至會看到「白畫面」
* 想想如果是在聽音樂、玩遊戲，這樣的體驗當然很不 OK!

----

### Server-Side Rendering ([圖示](https://blog.techbridge.cc/2017/09/16/frontend-backend-mvc/))


----

### Client-Side (前端) Rendering

* Clinet-side rendering 就是利用一些像是 VDOM 的技術，讓使用者點選一些連結的時候，前端網頁只是透過 API 像後端要資料，而前端拿回資料後再更新 DOM 需要更新的 HTML, 動態的更新那部份的頁面。
* 這樣的做法通常會讓前端的 code 變得複雜許多，但還好現在許多前端技術 (e.g. React Routing, GraphQL) 讓這一切寫起來比較乾淨、也比較模組化

----

### Client-Side Rendering ([圖示](https://blog.techbridge.cc/2017/09/16/frontend-backend-mvc/))


----

### SPA (Single Page Application)

* 不過前述的 client-side rendering 常常配合著所謂的 SPA (Single Page Application) 的實現方法，也就是說，前端事實上只有一個 index.html, 所以使用者在切換連結的時候只是發出 Ajax/JSON API request, 從後端拿資料，然後前端並沒有切換頁面，所以可以做到像是使用者一邊在網頁上看影片，一方面點選頁面上的連結去查看作者、影片相關資訊，而不會影響到影片的播放。

----

### Client-Side Routing

* 不過再想像一個情況，假設你在瀏覽一個部落格或是論壇，從一篇文章切換到另外一篇文章，由於 client-side rendering 的關係，所以頁面上者有文章更新的部分被 update, 所以看起來很順。
* 但問題是，當你很直覺的按瀏覽器的「上一頁」，想要回到上一篇文章的時候，你會發現沒有用！因為你從頭到尾都是在 "index.html" 這頁上面啊！

----

### Client-Side Routing

* Client-Side Routing 讓你在 local 端產生瀏覽器的 routing, 像是：
* ...myblog.com/home
* ...myblog.com/posts
* ...myblog.com/posts/13
* ...myblog.com/users/ric
* 在瀏覽到不同頁面的時候會有對應到不同的 routing (web address)，而被存到瀏覽器的 history 中，可以使用前/後一頁

----

#### Client-Side Rendering/Routing ([圖示](https://blog.techbridge.cc/2017/09/16/frontend-backend-mvc/))


---

### React Router

* React Router 是整個 「React 生態系」的一部分，通過管理 URL，實現頁面以及狀態切換可以「模組化」，讓 code 更好管理，也比較容易理解，也能符合 React 基本只更新 minimum difference 的概念

----

### 安裝與使用 React Router

* 安裝：npm install react-router-dom
* 如果遇到建議要 "npm audit fix"，就 fix 吧！
* 使用：

import { BrowserRouter } from 'react-router-dom'
import { NavLink, Switch, Route } from 'react-router-dom'

----

### 一個簡單的應用情境

* 假設你寫了一個 blog page, 你規劃了：
* '/' or '/home'：主畫面
* '/posts'：顯示所有文章列表
* '/posts/\<postId>'：顯示某篇文章
* '/authors'：顯示所有作者列表
* '/authors/\<authorName>'：顯示某位作者的文章列表

----

### Top-level "App.js"

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Blog / >
        </div>
      </BrowserRouter>
    )
  }
}

* 定義了這個 APP 的 root directory (i.e. '/')

----

### In "Blog.js"

class Blog extends Component {
  render() {
    return (
      <div>  // Define your blog layout
        ...
        <NavLink to="/home">Home</NavLink>
        <NavLink to="/posts">Posts</NavLink>
        <NavLink to="/authors">Authors</NavLink>
        ...
        <Switch>
          <Route exact path="/posts" component={Posts} / >
          <Route path="/posts/:id?" component={PostRoute} / >
          <Route exact path="/authors" components={Authors} / >
          <Route path="/authors/:name?" components={AuthorRoute} / >
          <Redirect from="/Home" to="/" / >
        </Switch>
      </div>
    )
  }
}

----

#### \<NavLink to="/home">Home\</NavLink>

* 定義 "Home" 這個字所對應的 routing path
* 其中，'/' 代表這個 App 的根目錄
* **\<NavLink>** 只是用來代表一個 link 而已，真正在頁面上畫出來，還是要在外面包一個 HTML tag, 例如：
* \<p>\<NavLink to="/home">Home\</NavLink>\</p>
* \<li>\<NavLink to="/home">Home\</NavLink>\</li>
* \<button>\<NavLink to="/home">Home\</NavLink>\</button>
* 換句話說，在畫面點下 "Home" 的時候，頁面會 route 到 ""...AppHome/home"

----

### \<NavLink> vs. \<Link>?

* 有時候你會在別的範例看到別人使用 **\<Link>**, 而非 **\<NavLink>**, what's the difference?
* 官方說明：*A special version of the \<Link> that will add styling attributes to the rendered element when it matches the current URL.*

----

### \<Switch>...\</Switch>

* 用來定義這個 App 的所有 routings 如何產生畫面
* 一個 **\<Switch>** 裡面包著多個 **\<Route / >**，而每個 **\<Route / >** 用來指定在 \<NavLink> 所定義的 path 連結, 要用哪一個 React compoment 來產生畫面呢？
* 基本 \<Route> 的語法

  <Route path="/someDir" component={SomeComponent} / >

----

### Putting things together...

class Blog extends Component {
  render() {
    return (
      <div>  // Define your blog layout
        <ul>
          <li><NavLink to="/posts">Posts</NavLink></li>
          <li><NavLink to="/authors">Authors</NavLink></li>
        </ul>
        <Switch>
          <Route path="/posts" component={Posts} / >
          <Route path="/authors" components={Authors} / >
        </Switch>
      </div>
    )
  }
}

----

### URL Parameters

* 通常會把文章根據 IDs, 或者是作者根據名字，來安排至不同的 routings, 例如：
* .../posts/12345678
* .../authors/ric
* 但隨著 Blog 的文章會增加、讀者/作者數量也會增加，不可能在 Blog.js 裡頭把這些文章、作者頁面的 routings 全部預先寫死。因此，我們要用 "參數" 來指定 routing 的規則。例如：

  <Route path="/posts/:id?" component={PostRender} / >

----

### \<Route path="/posts/:id?" component={PostRender} / >

* 當你定義這行時，你事實上就定義了指定的 component (i.e. PostRender) 的 **props.match.params** 多了一個 **"id"** 這個 property
* 換句話說，當你連結 ".../posts/3838" 的時候，就等於把 3838 當作參數傳給 **PostRender** 的 **props.match.params.id**, 你可以在 PostRender 裡頭根據 id 去處理拿到文章的邏輯。

----

### "exact path" for \<Route>

不過當這兩行同時存在的時候...

  // 列舉所有文章
  <Route path="/posts" component={Posts} / >
  // 展示某篇文章
  <Route path="/posts/:id?" component={PostRender} / >

當網址是 "**.../posts/3838**" 的時候，事實上兩條 routing rules 都會符合，所以照順序，會吐出第一個 match (列舉所有文章)，而不是展示 3838 這篇文章

所以，第一條應該要改成 **exact path**:

  <Route exact path="/posts" component={Posts} / >

----

### URL Redirect

* 用途：將某個 path ".../pathA" redirect 到另一個 path ".../pathB"

  <Redirect from="pathA" to="pathB" / >

---

### Let's look at a simple yet complete example!

Download ["react-router-boilerplate.tgz"](https://github.com/ric2k1/ric2k1.github.io/blob/master/W8_0410/react-router-boilerplate.tgz) from Github!

----

### Install and Run!

* tar zxvf react-router-boilerplate.tgz
* cd react-router-boilerplate
* npm install
* (If needed) npm audit fix [--force]
* npm start

----

### Code tree (under "src")

* index.js       // to mount "root" DOM node
* App.js         // Define Routing root '/'
* containers/    
    * Blog/
        * Blog.js  // Define main page and routing rules
        * Posts/
            * Posts.js      // List all posts (Posts module)
            * PostRender.js  // Define how to generate posts
* components/
    * Post
        * Post.js  // Define Post module

----

### Posts.js (列舉文章列表)

* Note: 理論上文章等資料都應該是從後台 (backend server) 過來，但我們現在還沒有(教)後台，所以我們會把資料寫死在 JS 檔案裡

export default class Posts extends Component {
  render() {
    const postIDs = ["1", "3", "5", "7", "9"];
    const lists = postIDs.map((i, index) => (
      <li key={index}>
        <NavLink to={"/posts/" + i}>Posts #{i}</NavLink>
      </li>));
    return (
      <div>
        <h3>Click to view article ---</h3> {lists}
      </div>);
  }
}

----

### **\<li key={index}>** // See p3.3

* 如果把 "key={index}" 拿掉，你會看到這樣的 message: *Warning: Each child in a list should have a unique "key" prop.*
* 原則上如果文章在後台管理，你可以 assign 每一篇文章一個 unique ID, 然後就可以利用這個 ID 來當 \<li> 的 unique keys
* 所以我們在這邊先使用 Array 的 index 來當 key

----

### \<NavLink to={"/posts/" + i}>
### Posts #{i}</NavLink>

* 用來指定當點選某篇文章連結的時候，會 route 到當篇文章的網址 (defined in "Blog.js")

----

### PostRender.js (定義如何產生 posts)

export default class PostRender extends Component {
    render() {
        const postIDs = ["1", "3", "5", "7", "9"];
        const { id } = this.props.match.params;
        return id && postIDs.includes(id) ? (
            <Post id={id} />
        ) : (
            <div>
                <h3>Error: Post #{id} NOT FOUND</h3>
            </div>
        );
    }
}

* Question: Posts 與 PostRender 可否合在一個 class？

----

* const { id } = this.props.match.params;
=> This is ["Destructuring Assignment"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), which is equivalent to:
* const id = this.props.match.params.id;
* You can also do something like:
const { a: b } = obj.someProp,
which is equivalent to:
* const b = obj.someProp.a;

---

### Practice06：Create Routing for your blog page

* Based on "react-router-boilerplate". Re-do your Practice03, "A Static Blog Page in React.js". Make it a **single-page application with React Routing**.
* Since it is still serverless, hard-core the contents and list of articles, etc, in the files.
* For those who want to have a fake database on front-end, you can try ["localStorage"](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Or refer to this one: [react-router-blogs-example.tgz](https://github.com/ric2k1/ric2k1.github.io/blob/master/W8_0410/react-router-blogs-example.tgz)

---

## That's it!

(You are recommended to go through this [official React Router Tutorial](https://reacttraining.com/react-router/web/guides/quick-start))