用户投稿挑战 React 第二篇
安装方式
CDN 连结新手快速入门Create React App经验丰富高手 更灵活的 Toolchain使用 Node.js 的 server-rendered 网页 用 Next.js建立静态网页的最佳方法 Gatsby这次30天挑战主要介绍 1-3 的安装方式，而 4-5 不列入此次介绍範围。
CDN 连结
有些人可能对 CDN 这个名词很陌生，但请看以下截图就会明白了。
此截图指的是通过 CDN 载入 React 和 React DOM
CDN 英文全名
Content Delivery Network 或 Content Distribution Network
CDN解释
CDN服务 在网路世界有很多的伺服器，利用最靠近使用者的伺服器，更快且更可靠地将档案传送给使用者。
以 Jquery 举例 CDN
JQuery 的程式库档案很肥很大，下面截图的 script 透过 google 的 CDN服务 加快载入速度。
详细解释
当有使用者Ａ连到你的网站时，使用者Ａ很可能在别的网站就已经存取过同样的JQuery档案了，也就是说在他的浏览器已经快取过这个档案了，那么浏览器就不会再重複下载，而直接在他的电脑中存取，这样速度会快很多。
CDN小结论
React 就是透过 unpkg的CDN服务
CDN 使用範例
分别加入以下两个档案
html档案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);以下为实际测试画面
学习心得
浏览官方文档才发现自己连基础的 javascript 都不太会，我还去查怎么打开 javascript 有点蠢，应该是 html档案 载入 javascript的 React 档案，所以打开 index.html 就好。
透过这篇我更了解什么是javascript，为何之前 jquery 都是透由 CDN服务 的方式载入，而且依照需求原来会有这么多种不同的安装方式。
微信扫一扫打赏
支付宝扫一扫打赏
