React大前端時代元件構思方法

更新於 發佈於 閱讀時間約 2 分鐘
raw-image

前言

現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者都更清楚使用元件提供的功能,或是在開發元件時可以更加迅速的構思流程。

已有第三方套件,還需要學習開發前端元件嗎?

第三方套件已經將UIUX及前端常用功能模組化,但是當專案需求已超出第三方套件提供的基本功能時,就需要重新再元件上添加功能,而在修改上依然要回到底層架構,如修改外觀則需要回到CSS底層,如邏輯面就得將第三方程式碼進行客製化,而網頁前端架構已經從傳統的靜態呈現資訊,直到現在的React、Flutter都需要考慮許多的邏輯面向,要如何開發一個好用的元件,讓後續維護優化成本降低,都是一個重要的考量面向。

概念方向

再來我會以React以及Flutter的概念層面來設計

📖 參數: 組件外部傳入

📖 變數: 組件內部渲染

UI渲染層面

  1. 拆解元件存在變數
  2. 構思元件外部傳入參數

功能

  1. 渲染組件需改變的狀態(外觀、文字)
  2. 進場過渡動畫(元件是否需要在視覺上優化)
  3. 組件外部帶入事件(Function)

好的元件具備條件

  • 重複使用性
  • 明確目的的參數帶入
  • 透過參數實現多種需求功能調整

React Native前端開發構思

React Components

以目前網頁架構提倡的“將每一個區塊視為Components”,將網頁介面的各項功能拆解開來,將資料與UI分離,因此在設計組件上要盡可能的讓他可以重複被利用。

React Props

利用React Props來切換組件(Components)的狀態,可以考慮幾個類型面向。

  • 切換UI外觀/狀態
  • 從上層(父類別)帶入的函式
  • 從上層(父類別)帶入的資料

設計規劃

在進行前端開發時,可以依照自己的構思畫張設計藍圖,雖然不需要像UI/UX設計師一樣畫出Wireframe的品質,但當今的前端工程師想必也時常需要自行設計一些畫面或組件,而前端工程師所能思考的角度是直接貼近實際開發面向的。

raw-image

結語

以上是一些在開發React組件的心得,在開發前我會先構思一下組件的設計,在開發Components前規畫一個簡易的設計圖,按照自己在開發時的功能面或是UI美觀層面來繪製草稿,也希望藉由這個分享給大家參考component的構思過程。

avatar-img
19會員
19內容數
軟體生活 v0.3.6 是一個理念象徵,一個專注在資訊科技與人文的地方 「在現代科學的浪潮中,我們的理性根植於人文學科的土壤」
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
軟體生活 v0.3.6 的其他內容
前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,
前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。