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

ROOT-avatar-img
發佈於軟體
更新於 發佈於 閱讀時間約 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
留言分享你的想法!
avatar-img
科技&科幻 | 36號系統
22會員
28內容數
一個理念象徵, 一個專注在人工智慧與人文的地方, 【科幻哲思】一種理想主義的科幻哲思 【軟體科技】一種理性主義的實踐精神
2025/03/30
MCP是一種通訊協議 (Protocol),提供統一的方法來讓AI 連接工具,使 AI 應用軟體 能夠透過統一介面存取各種服務。協議在軟體工程中用作標準化接口,透過標準化來解決,軟體或硬體相互不支援的問題。
Thumbnail
2025/03/30
MCP是一種通訊協議 (Protocol),提供統一的方法來讓AI 連接工具,使 AI 應用軟體 能夠透過統一介面存取各種服務。協議在軟體工程中用作標準化接口,透過標準化來解決,軟體或硬體相互不支援的問題。
Thumbnail
2025/03/29
預計網路將在2025年擁有60億的使用者,每天與數據互動,預計總數據產生量將達到90ZB(Zettabytes),LLM 中神經網路推理方式也是類似於人的思考,一字一句的構思下一個段落來組成話語,不會有人一下接上,自己無法理解或從未看過的字眼,例如:
Thumbnail
2025/03/29
預計網路將在2025年擁有60億的使用者,每天與數據互動,預計總數據產生量將達到90ZB(Zettabytes),LLM 中神經網路推理方式也是類似於人的思考,一字一句的構思下一個段落來組成話語,不會有人一下接上,自己無法理解或從未看過的字眼,例如:
Thumbnail
2025/03/24
在未來你會看到越來越多的Intel Core Ultra系列規格出現在大眾的電腦市場上,本文將分享如何挑選 Intel Core Ultra 處理器、選擇的考量因素,以及 NPU(神經處理單元)的用途,本文分成一般消費者選購和NPU運行狀況兩部分介紹
Thumbnail
2025/03/24
在未來你會看到越來越多的Intel Core Ultra系列規格出現在大眾的電腦市場上,本文將分享如何挑選 Intel Core Ultra 處理器、選擇的考量因素,以及 NPU(神經處理單元)的用途,本文分成一般消費者選購和NPU運行狀況兩部分介紹
Thumbnail
看更多
你可能也想看
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,
Thumbnail
前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,
Thumbnail
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發,使開發人員能夠創建可重覆使用的元件來完成前端頁面。JSX 也是目前我們比較常看到的 React 寫法 ,因此接下來會介紹,JSX 是什麼?JSX 語法以及使用 JSX 建構 React 元件。
Thumbnail
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發,使開發人員能夠創建可重覆使用的元件來完成前端頁面。JSX 也是目前我們比較常看到的 React 寫法 ,因此接下來會介紹,JSX 是什麼?JSX 語法以及使用 JSX 建構 React 元件。
Thumbnail
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發。React 並不是一個框架。這是因為它只負責呈現 UI 的元件。不過,React 為 Angular 和 Vue 等框架提供了另一種解決方式,使我們可以與它一起完成覆雜的前端頁面功能。
Thumbnail
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發。React 並不是一個框架。這是因為它只負責呈現 UI 的元件。不過,React 為 Angular 和 Vue 等框架提供了另一種解決方式,使我們可以與它一起完成覆雜的前端頁面功能。
Thumbnail
什麼是 Frontend Infrastructure (Infra) ? 提到前端網頁開發,可能很多人聯想到的都是 UI 畫面切版、動畫特效,甚至認為前端開發者的工作內容「離不開畫面」。但其實前端開發是一個非常廣的領域,同樣身為前端工程師,每個人專注開發的領域可能都不一樣,所打造出的技能樹...
Thumbnail
什麼是 Frontend Infrastructure (Infra) ? 提到前端網頁開發,可能很多人聯想到的都是 UI 畫面切版、動畫特效,甚至認為前端開發者的工作內容「離不開畫面」。但其實前端開發是一個非常廣的領域,同樣身為前端工程師,每個人專注開發的領域可能都不一樣,所打造出的技能樹...
Thumbnail
useContext 是一種 React hook,讓我們能夠直接取用其他元件的 Context,而無須層層傳遞 props,進而使程式碼簡潔易讀。
Thumbnail
useContext 是一種 React hook,讓我們能夠直接取用其他元件的 Context,而無須層層傳遞 props,進而使程式碼簡潔易讀。
Thumbnail
在我們使用的網站中,一個頁面會是由好幾個部份,例如按鈕、菜單、表格、卡片,這些部份可以在不同的畫面重複使用的就稱為元件(Component),今天要跟大家分享的「6個前端工程師私藏的元件庫」!
Thumbnail
在我們使用的網站中,一個頁面會是由好幾個部份,例如按鈕、菜單、表格、卡片,這些部份可以在不同的畫面重複使用的就稱為元件(Component),今天要跟大家分享的「6個前端工程師私藏的元件庫」!
Thumbnail
本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的! 用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站! 假如我們目標是要
Thumbnail
本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的! 用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站! 假如我們目標是要
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News