學習React框架 - 001 Day 啟程
TIP
大部分資料擷取至網路及筆者參加的一些現下聚會的節錄,將透過Vue的一些共通框架理念去理解React框架,若有理解錯誤的點,請盡量指點我XD
React 為何而生
前端的歷史進程,不斷膨脹的web服務及複雜的業務邏輯,若使用jQuery及原生js開發,將使得工程師們不堪重負,維護到後面往往都在寫世界奇觀,我們需要更簡化的方式,降低心智負擔及程式撰寫複雜度,而React就是在這個環境下誕生。
React核心思考
藉由資料來描述狀態,將視圖成為應用程序狀態的函數。(React 的核心前提是 UI 只是將數據投影為不同形式的數據。相同的輸入給出相同的輸出。一個簡單的純函數。)
v = f(s)開發者們只需注意狀態的變化,而其他交給React處理.
關注點的分離
傳統開發上,開發者將HTML+CSS+JS 組合並開發出網頁服務,但每個部分都是個別獨立的,有可能有些人會說,HTML會引入CSS及JS,怎麼能說他們獨立呢?
但你總不會在CSS裡面寫JS語法吧@@
而在React中,任何對渲染視圖有關的事情——無論是狀態、UI,在某些情況下,甚至是樣式,都是它關注的一部分。所以React的組件中,常常可以看見,一個文檔中有HTML+JS的組合,因為關注點不同。但該如何去實現這種多樣的類型組合呢?
用JSX 來建構組件
React使用了一種有趣的實現,通過編譯器來將一個文檔結合HTML+JS,將業務邏輯(JS)及頁面骨架(HTML)組合起來。
import React from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";
const App = () => {
return (
<div className="box">
<h1>The React 001</h1>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("app"));範例中可以簡單了解到,我們在HTML中只提供了進入點,而React卻能透過函式長出我們需要的其餘部分。
TIP
JSX 是 JavaScript 的語法擴展,可在 JavaScript 文件中編寫類似 HTML 的標記。儘管還有其他方式來編寫組件,但大多數 React 開發人員更喜歡 JSX 的簡潔性,並且大多數代碼庫都使用它。 --- 擷取至官網
而這樣子的組件是React應用程序的基本構建塊,可以看作是一個獨立的代碼單元,具有特定的功能和表現形式。而小塊的組件之間可以相互嵌套,形成複雜的UI結構。
Babel(React背後的好夥伴)
為什麼React可以透過一個jsx就能長出我們想要的頁面格式呢?Babel就是幕後的大大了~
Babel作為一個JavaScript編譯器,可以將新版本的JavaScript代碼轉換並向後兼容舊版本的語法,以確保代碼可以在不同環境下(瀏覽器的實現進程不同,你可能會遇到神奇的錯誤XD)可以順利運行。
React的JSX語法,正是透過Babel將JSX轉為普通JavaScript的方式。通過Babel的plugin,React可使用最新的JavaScript語法,同時確保這些代碼可以在不同環境中正常工作。
可以看到透過Babel,我們的React JSX被編譯成了一個JS文件。
結論
第一天了解React框架的背景、核心思想、JSX語法與Babel編譯器的協作關係後,我們將更深入地了解React框架的一些關鍵概念。React 是一個基於組件的框架,組件是應用程序的基本構建塊。在 React 中,我們需要了解組件之間如何傳遞參數以及如何實例化組件。參數傳遞通常使用 props（屬性）進行,實例化可以使用 React.createElement() 函數或 JSX 語法。掌握這些基本概念可以讓我們更好地開發高質量、高效的 React 應用程序。