iT邦幫忙

0

看官方文檔安裝 React之選擇方式竟然這麼多 (上):什麼是 CDN?

挑戰 React 第二篇

安裝方式

  1. CDN 連結
  2. 新手快速入門 Create React App
  3. 經驗豐富高手 更靈活的 Toolchain
  4. 使用 Node.js 的 server-rendered 網頁 用 Next.js
  5. 建立靜態網頁的最佳方法 Gatsby

這次30天挑戰主要介紹 1-3 的安裝方式,而 4-5 不列入此次介紹範圍。

CDN 連結

有些人可能對 CDN 這個名詞很陌生,但請看以下截圖就會明白了。
此截圖指的是通過 CDN 載入 ReactReact DOM

https://ithelp.ithome.com.tw/upload/images/20191026/20121499rAIU5khHMn.png

CDN 英文全名

Content Delivery NetworkContent Distribution Network

CDN解釋

CDN服務 在網路世界有很多的伺服器,利用最靠近使用者的伺服器,更快且更可靠地將檔案傳送給使用者。

以 Jquery 舉例 CDN

JQuery 的程式庫檔案很肥很大,下面截圖的 script 透過google 的 CDN服務 加快載入速度。

https://ithelp.ithome.com.tw/upload/images/20191026/20121499CtmS8Qj6xX.png

詳細解釋

當有使用者A連到你的網站時,使用者A很可能在別的網站就已經存取過同樣的JQuery檔案了,也就是說在他的瀏覽器已經快取過這個檔案了,那麼瀏覽器就不會再重複下載,而直接在他的電腦中存取,這樣速度會快很多。

CDN小結論

React 就是透過 unpkg的CDN服務

CDN 使用範例

分別加入以下兩個檔案

  1. html檔案
  2. javascript檔案

index.html 程式碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>一分鐘內新增 React</title>
  </head>
  <body>

    <h2>一分鐘內新增 React</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>

  </body>
</html>

like_button.js 程式碼

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

以下為實際測試畫面

https://ithelp.ithome.com.tw/upload/images/20191026/20121499jxBgqzM2q7.png

學習心得

瀏覽官方文檔才發現自己連基礎的 javascript 都不太會,我還去查怎麼打開 javascript 有點蠢,應該是 html檔案 載入 javascript的 React 檔案,所以打開 index.html 就好。
透過這篇我更了解什麼是javascript,為何之前 jquery 都是透由 CDN服務 的方式載入,而且依照需求原來會有這麼多種不同的安裝方式。


尚未有邦友留言

立即登入留言