Day 1 啟程

學習React框架 - 001 Day 啟程

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 ReactDOM from 'https://esm.sh/react-dom@18';
import React from 'https://esm.sh/react@18';

function App() {
  return (
    <div className="box">
      <h1>The React 001</h1>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

React 001 範例

範例中可以簡單了解到,我們在 HTML 中只提供了進入點,而 React 卻能透過函式長出我們需要的其餘部分。

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 應用程序。

參考資料

• 可視化的理解React
• React官方文件
• React Basic
• Build your own React