2021/10/04

還在 React 從入門到放棄?告訴你選擇比努力還重要的事


看了許多 React 的入門資料,大多會是從 create-react-app 專案起始,用久了覺得很不舒服,原因如下:

NPM 編譯經常無預期出錯

NPM 編譯經常無預期出錯,學習 React 免不了會經過一連串試錯的過程,但往往會不經意的出現許多編譯錯誤,大多是 Webpack 出現問題,在無法排除錯誤的情形下,最常做的就是重建 node_modules 內容,次數一多,是在學習 React 還是背誦 NPM i 指令,我已經搞不清楚了。

在設計時期,前端和後端 API 網域位置不一致時

只要不是靜態網頁,在前端的開發過程一定會和後端 API 傳遞訊息,尤其是開發網頁應用程式更是必須。在設計時期,只要前端和後端的 Web 服務網域不同,就一定會遇上【跨來源資源共用(Cross-Origin Resource Sharing (CORS))】這個大魔王,後端就必須進行 CORS 設定,但實際上線又會是在同一網域,只有開發時期才會遇到的 CORS 顯得是非常詭異的歷程。

你以為要從 JavaScript ES6 開始學習,事實上

包含 React 官方網站,很多學習 React 的資料顯示,JavaScript ES6 是必須先學會的基礎,我認為這是造成 React 陡峭的學習曲線的罪魁禍首。許多社團新手遇到的問題大多是編譯 React 時產生的異常狀態,NPM 會回傳非常完整的【長篇報告】,也因為內容非常的多,若直接複製貼上,只會造成有心要幫忙的人在理解前還必須先把整篇報告看過一輪,除錯到心累。

React 三大核心

React 是水很深的函式庫之一,技術中心思想在【狀態的傳遞】,基於中心所延伸出來的有三大核心:

  • React : 屬性、狀態、事件、元件和元件狀態互動等。
  • Router : 頁面到頁面間狀態的互動
  • Redux : 全域狀態管理

React 的問題大多就是狀態問題,Router 和 Redux 都是 React 官方沒做但是推薦的解決方案,都是學習 React 過程中必須學習的技能。

我歸納學習 React 學習資源後,發現從 create-react-app 幾乎就是給新人從入門到放棄的好專案,而我認為學習 React 路線有二:

拿掉 NPM 編譯,純粹的 React

我發現 React 的能手中,多數也是 CSS 的能手;許多外觀功能面,能使用 CSS 完成的,全都自己處理,對於 CSS 已經熟悉的能手,走此路線能讓你以最短的時間走遍所有 React 特色。

甚至不需編譯,直接使用 HTML Include CDN 的方式都能游刃有餘。

REACT 三大核心 CDN:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 <head>

    <meta charset='UTF-8'>

    <script src='https://unpkg.com/react@17/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/react-dom@17/umd/react-dom.production.min.js'>    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/8.0.0-alpha.0/react-redux.min.js" integrity="sha512-3f0oep7JUJU3ocfNA2e1dM9qxlz7mQpbM0HkmTg43/K/6YL/YnRNIAkzyqpE6OySBU6Y6jTL4y7BHSJr+WJhMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src='https://unpkg.com/react-router-dom@5/umd/react-router-dom.min.js'></script>

    <script src='https://unpkg.com/babel-standalone@6/babel.js'></script>

  </head>


Babel 屬於線上編譯器,處理 JSX 和 ES6 和瀏覧器相容性問題,不使用 Babel,直接使用 React.createElement 也是可以的,網上 JSX 範例可以透過 Babel 的 JSX 線上編譯器玩玩看怎麼編譯的。


擁抱編譯,從 Webpack 開始

新手學習 React 的第一步應是 Webpack 而非從 React 開始,依賴 React 三方元件的開發者更應優先學習 Webpack,學習如何把現行網站透過 Webpack 封裝,從方便維護現行網站開始熟悉 Webpack,之後再一步一步導入 React,而非從 create-react-app 開始。

Webpack 學習好資源:【前端速成】Webpack5 快速入門|Tiktok工程師帶你入門前端|布魯斯前端


結論時間

就以使用 React,是否要走編譯來說,我認為【入門學習】或【使用上都以自刻 CSS 為主】的場合,使用 HTML include 的方式是可以的。但若會用到 React 三方廠商提供的元件,因為絕大多數都沒有推出 Bundle 版本,所以這時會考慮以編譯為主,不論那一種方式,Webpack 學習都是穩賺不賠的好技能,推薦大家學習它。


和你分享。😉


沒有留言:

張貼留言