React是奠基於JavaScript的前端框架，因此在開始學習之前，必須要有一些JavaScript的基礎認識，否則在學習上容易卡關。因此，今天我們來認識一下...
鯨魚
‧
2024-09-16
前言 Hi,大家好， 我在前端領域打滾已有兩年多，去年就有想要給自己一個挑戰參加鐵人賽，但始終沒有跨出那一步，今年告訴自己，無論如何都得要參賽。 過往開發都是...
鯨魚
‧
2024-09-15
以最簡為原則 本文將介紹如何以簡單的設計實現響應式布局（RWD），兼顧桌面與移動端需求，並比較 React 和 Vue 的不同實作方式。 "左圖展...
今天要來介紹編譯器的使用方式，我們在 Day02 的時候有提到，tsc 是用來將 TypeScript 編譯成 JavaScript 的指令。 為什麼會需要這樣...
在前兩篇文章中，我們深入探討了如何設計一個靈活、高效的 React 按鈕元件，還有助於在不同情境下保持一致的設計風格。今天，我們將這些按鈕設計應用到 Hero...
本系列文章使用 VS Code 作為 IDE。 首先，開一個空的資料夾，在裡面新增一個副檔名 .ts 的檔案，例如 app.ts。TypeScript 會根據...
在正式踏上 TypeScript 探索之旅前，我們有一些前置作業需要先完成。 安裝 Node.js請前往 Node.js 官方網站 下載，建議下載 LTS...
前言 前端工程師的面試主要以技術面試與行為面試為主，其中技術面試與 Javascript、前端框架為主，考的方式通常是口頭技術問答或上機考、筆試，跟其他軟體工程...
本身是一位 React 開發者，兩年前第一次自學接觸到 TypeScript，後來因前份工作主要專注於 VR 技能相關開發，且公司開發規範中不使用 TypeSc...
Hello，版上大大我是Twjoin哲煜科技的團隊成員～～跟大家分享近期我們團隊除了正業“開發專案“以外也小玩了一下Podcast，讓我們可以口無遮攔的大聊特聊...
在上一篇文章中，我們介紹了如何使用 Sass 和 map-get 來管理多主題樣式。隨著應用規模的擴大，程式碼變得越來越難以維護。今天，我們將探討為什麼選擇 C...
在前幾篇文章中，我們探討了模組化設計如何增強應用的靈活性與可維護性，同時介紹了如何優化元件重繪和狀態管理。使用 console.log 來檢查元件的重繪情況，是...
在之前的文章中，我們介紹了如何利用 CSS Modules 來提升 React 專案的樣式管理，使程式碼更加模組化且易於維護。本篇將更進一步，展示如何整合 SA...
最後來打造「依測站名稱查詢」的功能。關鍵字打上React Leaflet Search，有些外掛看起來是包含世界各地的經緯數據。比較廣泛，也不見得會有測站數據。...
醒來跑去申請氣象資料開放平臺的帳號，還真的解決問題了。可能政府資料開放平臺給的Api只是測試用吧。正常來說這個key不該曝光，要ignore一下。但既然接的只...
在前一篇文章中，我們成功配置了 Webpack 來處理字體和圖片資源，並討論了在大型 React 項目中如何通過路徑別名來簡化代碼管理。隨著文件結構變得更加複雜...
在前一篇文章中，我們成功地使用 Webpack 初始化了 React 專案並建立了基本的目錄結構。今天，我們將進一步優化開發環境，通過整合字體和圖片資源以及設置...
本身蠻喜歡地圖的，也想過要仔細研究GIS。所以在認識到Mapbox和Leaflet時，就像挖到了寶藏。 其中前者是基於OSM的大型地圖服務；而後者正如其名，是個...
練習完文字效果後我打算測試導入模型。事不宜遲，借一下自己快兩年前用Blender練習捏的動漫風人頭。一開始導入只有半張臉，趕快apply鏡像修改器，尷尬。 說到...
不要單純地以為，從CSS改字型可以妝點<Text />。但照著官方文件教的，在<Text />裡寫上font={fontUrl}，卻會遇...
終於進到實作環節啦——之前在Codrops曾看到用React Three Fiber做出酷炫3D效果的案例，就想說一定要趁著鐵人賽嘗試。 這次參考的程式碼中出現...
以下羅列一些寫React的好習慣： Takeaway 使用Fragments（空標籤）取代無效的div，因其可讀性更高，渲染出的DOM也更小 不會循序改變的s...
爬文時常看見「虛擬DOM」一詞，但還沒有梳理過，特於此筆記。 Takeaway 虛擬DOM其實是JS物件 Vue也有虛擬DOM，叫作VNode Svelte的...
TypeScript 在寫 JavaScript 的時候，你會直接使用變數，不管是 const, let, var，因為沒有定義他的 type，所以可以是任何東...
嗨點進來的你，我是 Yin，歡迎來到 Remix 的世界！ Remix SSR 先打預防針，Remix 是 SSR(Server Side Render) 架構...
行文至此，鐵人賽已經完成三分之二。雖說有保留約五天的緩衝進度，但每日撰文的壓力對意志仍是考驗。累倒是其次，做這件事占用掉生活多大的比例，又能交換到什麼，才是關鍵...
React vs Vue React要用onChange提供反向資料流，Vue是透過v-model達成雙向綁定 Vue的ref類似useState，而非use...
useEffect 是許多寫 React 的人必須要學習的 Hook 之一，它也是 React 中非常重要的概念之一。也讓很多人又愛又恨，愛的是它讓我們可以輕鬆...
使用時機 useState：邏輯簡單時做狀態管理。搭配展開語法、filter、map可分別實作增刪改 useReducer：1. 邏輯複雜時做狀態管理（譬如增...
關鍵字 Components：一段可複用的程式碼，React的最小單位。名稱以大寫開頭 JSX：類似模板語言的JS語法擴充。會回傳JS物件React elem...
jerrythepotato
Jamie
carolcheng
Ashley
haruowang
Yin
iThome鐵人賽
看影片追技術