iT邦幫忙

react相關文章
共有 1744 則文章
鐵人賽 Modern Web DAY 8

技術 type

今天來看看讓我又愛又恨的 type type 眾所周知,JavaScript 本身是弱型別的語言他會根據你賦予的值,來判定當前的型別在 JavaScript 中...

鐵人賽 Modern Web DAY 8

技術 [Day 8]用React讓網站動起來:Key

昨天我們用state lifting的方式做了一個清單小程式,可以新增項目,然後在下方呈現出來。但是,如果將這個程式放在瀏覽器上跑,會出現一個小問題,也就是缺少...

鐵人賽 Modern Web DAY 8

技術 create-react-app內容、優缺點、是否eject評估

先前提到撰寫一個react的應用程式就會需要以下步驟 安裝react和reactDOM 安裝webpack和webpack-cli 安裝bebal、scss等...

鐵人賽 自我挑戰組 DAY 9

技術 Day-9 專案演練 - UI 建置(上) charkra UI & tailwind CSS

Day-9 專案演練 - UI 建置(上) charkra UI & tailwind CSS 終於要開始做 UI 了,專案的開發也終於有種要啟程的感...

鐵人賽 Modern Web DAY 10

技術 如何製作對話視窗 dialog【 dialog | 我不會寫 React Component 】

hashtags: #react, #components, #accessibility, #dialog About 對話視窗 是一種視窗,會覆蓋在主視窗...

鐵人賽 Modern Web DAY 9

技術 [Day 09] 單向資料流 & DOM 渲染策略

在繼續深談 React 管理並更新畫面的策略與機制之前,我們先來探究一下關於單向資料流的概念,以及在尚未使用前端框架時實現單向資料流的 DOM 渲染策略,來幫助...

鐵人賽 Modern Web DAY 8
開始搞懂React生態系 系列 第 8

技術 Day 08 useEffect 語法及使用情境

理解生命週期 元件在畫面上渲染 DOM 元素,它的生命週期可以分成三個階段: Mount -> Update -> Unmount Mount...

鐵人賽 Modern Web DAY 8

達標好文 技術 [Day 08] JSX 的重要特性與規則以及其背後緣由

為了滿足 transpiler 轉換的正確性,因此 JSX 語法在撰寫上會有一些重要的特性與規則需要注意。這些規則可能大多數人多少都聽過,但是卻不是很了解為什麼...

鐵人賽 Modern Web DAY 12

技術 day12: hosting SVG icon

為了讓開發更加方便,在本次鐵人賽中會使用套件 @svgr/webpack 來搭配 create-react-app 操作 .svg 檔案。 優點是同一個 .sv...

鐵人賽 影片教學 DAY 10
150 分鐘學 React 系列 第 10

技術 第 9 天 [ Functional Component 、 Class Component ]

今天的重點摘錄 以前就有這兩種寫法,只是 React 16.8 之後多了 Hook ,讓 Functional Component 能做的事變多了 Class...

鐵人賽 Modern Web DAY 8

技術 Day 8 - 為什麼要用 Context

前言 在 React 元件之間,如果要傳遞資料,很直覺會想到 props,一個一個往下傳遞。但有時候考量到層級很多很深,如果一個資料要從第一層往下送到第五層,總...

鐵人賽 Modern Web DAY 8

技術 [DAY 8] React 列表渲染,將陣列、物件渲染成元素

[情境任務] 小當家:我把餐廳大致上的料理都開發出來囉!名單都整理好了,直接列上去就行 解師傅:太好了~哇!這菜色有點多呢!一個一個列好像太花時間了…不知道能不...

鐵人賽 影片教學 DAY 7
我讀你看 系列 第 7

技術 [React] React Context 練習題 - 常見的一種 Pattern

Part 3 of Passing Data Deeply with Context @ ReactJS Doc beta 今天來做官方文件最下方的練習題...

鐵人賽 Modern Web DAY 7

技術 【D7】 解析 .jsx

經過幾天的實作與摸索,建立出第一個 React 運用,但是裡面還是有些東西不熟悉,這時要探討一下這些是什麼東西。 本日的範本是昨日-【D6】的 .jsx,這邊會...

鐵人賽 Modern Web DAY 7

技術 Day 07 - 來做一個美食地圖吧!

來到第七天,我們利用這禮拜所學做一個台南美食地圖!美食之都說是台南應該不為過吧 那我是拿 TDX (Transport Data eXchange) 提供的...

鐵人賽 Modern Web DAY 7

技術 Day 7 - 為什麼要用 Redux

前言 今天要來談談 React 的一個好朋友,React 做為一個 view library,肯定會很希望有人幫他好好管一下 model 層級的東西,這樣合作起...

技術 Create-React-App 到 Vite: 將開發速度提升到新的檔次

今天這篇文章會示範如何將 create-react-app 轉成 vite,大幅提升開發速度 什麼是 Vite? Next Generation Fronte...

鐵人賽 Modern Web DAY 9

技術 [DAY 09] 自己的Hook自己做!useToggle 再進化,useToggle+!

延伸情境 前一篇的 useToggle 顯然可以再更好,除了一般狀態之間切換,也可以再加入特定狀態的指定切換,來讓整體閱讀更直覺;也可以再嘗試額外加入 sid...

鐵人賽 自我挑戰組 DAY 8

技術 Day-8 專案演練-建立新專案

Day-8 專案演練-建立新專案 記得第六天的時候提過,我比較喜歡的開發環境,會以那時說的內容為基底,建置 MyNote 這個小應用,今天這篇文章會提到詳細的...

鐵人賽 Modern Web DAY 7

技術 [Day 07] JSX 根本就不是在 JavaScript 中寫 HTML

在前面的章節中,我們已經詳細的解析了 React element 相關的核心概念以及建立的方法。不過當你去參考絕大多數的 React 專案的程式碼時,你會發現幾...

鐵人賽 Modern Web DAY 7
開始搞懂React生態系 系列 第 7

技術 Day 07 useState

State Hook State 是 React 一種特別的變數,當 State 發生改變時,所有關連到這個 State 的 DOM 元素,會依據此變數改變後的...

鐵人賽 Modern Web DAY 11

技術 day11: Button

為昨天做好的 ButtonBase 補上一些樣式設定,再透過 props.variant 控制按鈕外型,以及 props.{start | end}Icon 來...

鐵人賽 影片教學 DAY 9
150 分鐘學 React 系列 第 9

技術 第 8 天 [ 重複渲染、條件渲染、預設值、 dangerouslySetInnerHTML ]

今天的重點摘錄 重複渲染: map 條件渲染: && 預設值: || dangerouslySetInnerHTML={{__html: St...

鐵人賽 Modern Web DAY 12

技術 [DAY12]React ES6介紹

前言ES6這個主題應該要放在前面介紹的,但我當時沒注意到就跳過了,所以今天來補介紹ES6!相信大家在寫javascript或是react的時候常常會看到ES6這...

鐵人賽 Software Development DAY 7
React框架白話文運動 系列 第 7

技術 React白話文運動07-JSX

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Modern Web DAY 6

技術 【D6】 建立互動元件

這次要建立互動的功能,讓我們動作可以很快在 .js 檔案中運作,並且轉譯(render,之前叫做「渲染」,感覺「轉譯」比較合理,先以「轉譯」為主)到畫面。 目標...

鐵人賽 影片教學 DAY 6
我讀你看 系列 第 6

技術 [React] 我知道你可能用過,但它為什麼要叫 React Context?

Part 2 of Passing Data Deeply with Context @ ReactJS Doc beta 我知道多數人都聽過或用過 Rea...

鐵人賽 Modern Web DAY 6

技術 Day 06 - 給地圖加上彈跳窗

彈跳窗也是個常用的功能,所以我們今天來看看如何在地圖上產生彈跳窗!剛好前幾天學了如何在地圖上標記 Marker,結合一下來做一個小功能~ GoGo Popup...

鐵人賽 Modern Web DAY 7

技術 Day 07 甜死人不償命的 JSX 語法糖 (React 簡介)

它為了解決什麼問題而生? 正如我在 Day 03 有提到的,它使用了 Virtual DOM 來解決直接操作 DOM 造成的性能問題。並且採用有別於 bindi...

鐵人賽 Modern Web DAY 8

技術 [DAY 08] 自己的Hook自己做!useToggle 讓你想開就開,想關就關

終於進入正題啦! 情境 不論是現實世界還是網路上,小朋友看到東西都喜歡碰一下摸一下(手賤),只要能互動就會興奮到一個不行,特別是能開開關關的東西,一不小心就會...