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动态切换资料和页面。


<<:  Day18. Slim & Pug - 缩排式的 html

>>:  Android学习笔记09

Thunkable学习笔记 6 - 使用者登入记录查询

笔记5已顺利记录使用者的登入时间, 记录与查询功能是成对的, 今天续作查询功能 版面设计 执行结果 ...

【第十二天 - 报错型 SQL注入】

Q1. 什麽是 报错型SQL注入? 在一些网页程序出错时,会直接将错误讯息显示到前端,而部分错误讯息...

[28] 用 python 刷 Leetcode: 1013

原始题目 Given an array of integers arr, return true i...

【D2】要下厨前需要准备锅具

简介厨房:Shioaji Shioaji是永丰证开发出来的Python API,用来给客户自行开发自...

[想试试看JavaScript ] 阵列一些操作阵列好用的方法 (三)

阵列-一些操作阵列好用的方法 (三) 这篇整理一些常用的阵列方法 sort() sort() 会对阵...