iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

白話JavaScript系列 第 18

Day18-React起步

在我們進入React的環節之前,需要先理解一些會很常聽到、看到的關鍵字

  • CSR(SPA)
  • SSR
  • SEO

CSR(Client-Side-Render)

優勢:

  • 頁面切換快速
  • 不必一直向伺服器請求HTML文件

劣勢:

  • SEO不良(因內容依JS更動)
  • 使用者第一次載入會較花時間

SSR(Server-Side-Render)

優勢:

  • 載入速度較快
  • SEO優良

劣勢:

  • 頁面切換較慢
  • 伺服器負載加重

SEO(Search Engine Optimization)

SEO就是搜尋引擎判斷網頁內容給予分數,並且能夠增加網頁的排名進而造成較高的觸擊率。

舉例像是網頁開發中的HTML tag,你可以div到底,也可以針對內文給予article、section等tag。


Virtual Dom

前面提到性能優化的部分,React透過Virtual Dom比對目前畫面需要更新的狀態,達到避免重複渲染不需更新的組件。

https://ithelp.ithome.com.tw/upload/images/20210918/20130419fxnSgQP8oK.png

https://i1.wp.com/programmingwithmosh.com/wp-content/uploads/2018/11/lnrn_0201.png?fit=1173%2C785&ssl=1


React

React CRA

React是前端三個熱門框架其中之一,嚴格來說React是library。

專注於UI,並且周遭生態由開發者建立,相較於Vue、Angular是由官方維護形成差別。

這三個前端框架都是非常好的選擇,對於很多剛踏入前端坑的人,沒有「最好的框架」。

只要會一個框架之後,概念都是差不多,並且本質都是HTML、CSS、JavaScript。

框架所解決的問題

  • 組件化
  • 頻繁操作DOM
  • 性能優化(Virtual Dom)

CRA

React官方的環境建置工具

在我們使用CRA建立React APP之前

  • Node.js > 14.0
  • npm > 5.6
npx create-react-app <fileName> //建立一個react專案
cd <fileName> //進入該資料夾
npm start //啟動服務器

之後可以發現React啟動了一個服務器

可以在網址列輸入以下

在檔案底下輸入

code . 

可以看到VS Code打開我們的資料夾專案!!!

/images/emoticon/emoticon10.gif

Mount point

前面我們說CRA會造成SEO不良,我們來看一下SPA中的React是如何運行的

首先打開/public -> index.html

我們可以看到只有一個div tag

https://ithelp.ithome.com.tw/upload/images/20210918/20130419n3BzPJsEEh.png

然後打開/src -> index.js

https://ithelp.ithome.com.tw/upload/images/20210918/201304195I7TST5USE.png

React就是綁定該節點渲染。

所以我們可以知道React SPA會造成SEO不良的原因就是搜尋引擎判定內容不夠明確,因為SPA是透過JS動態切換資料和頁面。


上一篇
Day17-Node.js
下一篇
Day19-Component
系列文
白話JavaScript28

尚未有邦友留言

立即登入留言