搞不清楚React的分類?一文解答你的疑問

Clipversity
Dec 28, 2020
搞不清楚React的分類?

原文:https://clipversity.com/article/Not-sure-about-React--This-article-to-answer-your-questions-MP3_GTUeDgZZeRvuQ9H

React是甚麼

React又名React.js或ReactJS是由Facebook開發的Javascript前台程式庫,現時Facebook, Netflix, Imgur, Airbnb等大型科技公司都使用ReactJS來開發他們的網站。而香港的連登(lihkg)都是使用React開發的。

要在電腦執行ReactJS,第一步是在電腦安裝nodejs,而nodejs是由Google開發的跨平台 JavaScript 執行環境,在Nodejs出現之前,Javascript只用作網頁前台的小程式語言,用作表格或數據驗證,但Nodejs現在可以透過NPM(Node Package Manager) 去安裝由不同開發者寫出來的模組,而且Javascript不只止在網頁上運行,透過Nodejs,我們可以在伺服器或Windows/ Mac上直接執行Nodejs應用程式。

為甚麼要使用React

React最大的特色是「快」,由於React全部都是Javascript,而Javascript在渲染畫面的方式比傳統優秀。React 是利用Virtual Dom,即是在以前每當網頁更新的時候,整個網頁需要重新整理才可顯示新的內容,而Virtual Dom便只會更新需要更新的那一個部份,比起重新渲染用的時間及資源都少得多。

但當兩者都是由零開始渲染時,Virtual Dom不會有特別的優勢。

渲染方式

而PHP是由伺服器傳回整個網頁後利用瀏覽器渲染內容,這種方法又名為「伺服器渲染」SSR (Server Side Rendering )

而React則有兩種方式(SSR 及 CSR) [有機會在React SEO中詳細介紹] ,當中的CSR (Client Side Rendering )即在本地渲染。

雖然React有機會都是SSR,可是React SSR都是以Virtual Dom方式運作。

React的編寫語言

Javascript及 JSX,React是將傳統Javascript 及HTML一同寫的,而在React中,是沒有HTML的,只有與HTML十分相似的JSX。

我們會在之後教授大家由零開始製作React App。

React vs React Native vs Next.js vs React Ionic

我們可以使用React編寫網頁,手機應用程式或,電腦程式。

例如React native是用作編寫手機應用程式,它同樣都是由Facebook開發的,程式語法與網頁用的React十分相似。

Create-React-App

這是React官方建議初學者開始的地方,Create-React-App是句nodejs的指令,要nodejs

執行下載及安裝一個React Hello World 的檔案,它會為你安裝一些常用的node package,讓你立即便可開始製作React App。

當然你也可以自定安裝React,但需要一定的知識

Next.js

Next.js 是基於React而寫為的另一個package,可以說上是React的進化版,它改善了例如傳統React的CSR 的SEO問題。

如果希望了解更多你可以參考這一篇文章:

Understanding how imgur overcome the SEO problem from SPA | Clipversity

Brief description of SEO in create-react-appcreate-react-app

React Ionic

Ionic framework 是一個用作將PWA技術寫成的WebApp換成可以放在Google Play 及Apple App Store上架的包裝系統。Ionic framework 除了支援React外,它也支援其他Javascript Framework (Angular及Vue)。

而React Ionic便是利用React製作PWA應用程式。

我們之後會有更多的文章介紹PWA。

我們的網站 🥰 🥰:

Medium: https://medium.com/@clipversity

Facebook: http://facebook.com/clipversity

Instagram: https://www.instagram.com/clipversity

Youtube: https://www.youtube.com/channel/UCmQ3rCf5O9vnuU7_IBrIR2w

patreon: https://www.patreon.com/clipversity

--

--