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();
    }
  };
  ...
}

[範例] 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)

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} />;  
  }
}

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.

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)

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>
    );
  }
}

完整範例

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>
  )}
}

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 (圖示)

Client-Side (前端) Rendering

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

Client-Side Rendering (圖示)

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 (圖示)

安裝與使用 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" / >

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", 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;