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 學習都是穩賺不賠的好技能，推薦大家學習它。


和你分享。😉


沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)