iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 754 瀏覽

鐵人賽 Modern Web DAY 24

React 走出新手村系列第 24 篇

技術 React 走出新手村 — Next SSG

關於渲染的構想 pre-rendering 一直是 Next.js 的核心思想，他們將其分為兩種實作方法，一個是 Rendering，也就是一般的渲染概念，另一...

LucianoLee ‧ 2023-09-24

0 Like 0 留言 723 瀏覽

鐵人賽 Modern Web DAY 7

react 學習記錄系列第 7 篇

技術 [Day7]我的 react 學習記錄 - component

這篇文章的主要內容簡單說明什麼是元件化跟 react 裡面元件的種類什麼是元件？把畫面切分成一個個的區塊，並且透過傳入不同的參數讓那個區塊可以重複使用，...

evan_hsu ‧ 2023-09-21

0 Like 0 留言 842 瀏覽

鐵人賽 Modern Web DAY 5

Nextjs 13: 建構專屬於你的 SSR 網站！系列第 5 篇

技術 [next 13] - App Router 概念

今天要來介紹 next 13 推出的一個重要概念: app router，這是一個全新的 file-base system，取代原有的 pages router...

時雨 ‧ 2023-09-20

2 Like 0 留言 617 瀏覽

鐵人賽 SideProject30 DAY 5

用 React 和 Firebase 打造一個完整 side project 吧！系列第 5 篇

技術 Day05：Firebase 服務中的資料架構

本文同步刊載於我的個人部落格在規劃專案之資料表前，想先插播介紹關於 Firebase 的資料庫運作原理，此部分並不影響專案規劃之順序，因為這是在規畫專案前也...

Annie ‧ 2023-09-20

1 Like 1 留言 1058 瀏覽

鐵人賽 Modern Web DAY 5

30天React練功坊-攻克常見實務/面試問題系列第 5 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day5 An unexpected "0" in the page while doing condition rendering

tags: ItIron2023 react 前言昨天我們談到了多個類似的state在同一組件的管理問題，以及你可以如何利用一個共用的hanlder去優化，今...

windate3411 ‧ 2023-09-20

0 Like 0 留言 540 瀏覽

鐵人賽 Modern Web DAY 5

30 days of React 系列第 5 篇

技術 Day 5 - 建立元件之間的聯繫：匯出與引入

上一篇學習了基礎的元件使用，那麼元件之間該如何串聯，一起使用呢？今天要來學習：匯出與引入如何運作匯出元件的二種方法匯出與引入元件我們可以透過匯出（e...

yuu ‧ 2023-09-20 ‧團隊好想工作室 v7.0

0 Like 0 留言 809 瀏覽

鐵人賽 Modern Web DAY 23

React 走出新手村系列第 23 篇

技術 React 走出新手村 — 認識Next

動機主要還是想順著開頭篇章繼續補完 React server component，所以接下來就是會碰到 Next 這個框架，因為他與 React18 合作開發...

LucianoLee ‧ 2023-09-23

0 Like 0 留言 486 瀏覽

鐵人賽 Modern Web DAY 4

Nextjs 13: 建構專屬於你的 SSR 網站！系列第 4 篇

技術 [next 13] - Next 環境建置及技術選型

今天我們要來講如何做 Next 的環境建置，以及為 Next 的專案做技術選型，未來的程式範例以及專案實作都會以這個技術選型基礎為準喔！環境建置 Node.j...

時雨 ‧ 2023-09-19

0 Like 0 留言 667 瀏覽

鐵人賽 Modern Web DAY 15

從Vue學React！不只要會用，還要真的懂～系列第 15 篇

技術【Day 15】究竟是watch？還是生命週期API？處理副作用的useEffect

寫Vue的時候，偶爾會需要使用watch去監聽某個state的變動，來去進行一些邏輯操作。在接觸React之後，我發現React也有一個類似用途的hook，這個...

文科少女 ‧ 2023-09-21 ‧團隊曼陀號計畫V

2 Like 0 留言 688 瀏覽

鐵人賽 SideProject30 DAY 4

用 React 和 Firebase 打造一個完整 side project 吧！系列第 4 篇

技術 Day04：side project 必備的 Flow Chart(二)

本文同步刊載於我的個人部落格針對網站角色將 Flow Chart 再延伸上一篇文章中有提到，此次專案主要區分兩個角色，本篇將針對「顧客」角色進行 Fl...

Annie ‧ 2023-09-19

0 Like 1 留言 970 瀏覽

鐵人賽 Modern Web DAY 4

30天React練功坊-攻克常見實務/面試問題系列第 4 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day4: Way too many state in a component

tags: ItIron2023 react 前言昨天我們配合了兩個hook去理解react render的機制以及一些useState & useE...

windate3411 ‧ 2023-09-19

0 Like 0 留言 851 瀏覽

鐵人賽 Modern Web DAY 22

React 走出新手村系列第 22 篇

技術 React 走出新手村 — CSR處方簽

溫馨提示在之前架構和渲染機制的文章有提到一些渲染機制的基礎，還不熟悉的朋友可以先去閱讀那篇文章。那麼我們今天就來聊聊如何改善 Client Side Ren...

LucianoLee ‧ 2023-09-22

0 Like 0 留言 751 瀏覽

鐵人賽 Modern Web DAY 21

React 走出新手村系列第 21 篇

技術 React 走出新手村 — 資料夾的分類

分類的哲學這次要分享的是大家檔案分類的進化過程，分類檔案其實也蠻有學問的，一方面是語意上的邏輯，另一方面是資料夾內的檔案性質問題，一般來說我們會盡量把開發中的...

LucianoLee ‧ 2023-09-21

0 Like 0 留言 558 瀏覽

鐵人賽 Modern Web DAY 6

react 學習記錄系列第 6 篇

技術 [Day6]我的 react 學習記錄 - JSX 跟 babel 的作用

這篇文章的主要內容簡單說明 JSX 跟 babel 的作用。 JSX 語法在上一篇文章中有出現一個有點像是 html 的標籤。 const App: Re...

evan_hsu ‧ 2023-09-20

0 Like 0 留言 660 瀏覽

鐵人賽 Modern Web DAY 5

react 學習記錄系列第 5 篇

技術 [Day5]我的 react 學習記錄 - react 是什麼

這篇文章的主要內容簡單介紹一下 react 是什麼。什麼是 React ? React 是由 Meta 團隊維護的開源 JavaScript Librar...

evan_hsu ‧ 2023-09-19

0 Like 0 留言 738 瀏覽

鐵人賽 Modern Web DAY 4

30 days of React 系列第 4 篇

技術 Day 4 - React 元件初探

今天要來學習元件，要探索的內容有： React component簡介如何創建component 如何使用component 瀏覽器如何認知 React...

yuu ‧ 2023-09-19 ‧團隊好想工作室 v7.0

2 Like 0 留言 2162 瀏覽

鐵人賽 SideProject30 DAY 3

用 React 和 Firebase 打造一個完整 side project 吧！系列第 3 篇

技術 Day03：side project 必備的 Flow Chart(一)

本文同步刊載於我的個人部落格一、Flow Chart 是什麼？流程圖(Flow Chart)是一種圖形化表示流程或過程的工具，通常用來展示一个系统、流...

Annie ‧ 2023-09-18

0 Like 0 留言 527 瀏覽

技術 React 六角學院-學習筆記(React Hooks)

React Hook(useState, useEffect...等) 在React中函式內一般變數若更新畫面上不會跟著更動所以要用useState等方法...

willy718066 ‧ 2023-09-29

0 Like 0 留言 531 瀏覽

鐵人賽 Modern Web DAY 3

Nextjs 13: 建構專屬於你的 SSR 網站！系列第 3 篇

技術 [next 13] - Next 13.4 - 全新版本的 Next

升版後的 Next Next 在今年升版到 13.4，並增加了許多新的功能，同時也大幅翻轉了原先的寫法。總的來說，新版本的 Next 將 data fetch...

時雨 ‧ 2023-09-18

0 Like 0 留言 698 瀏覽

鐵人賽 Modern Web DAY 14

從Vue學React！不只要會用，還要真的懂～系列第 14 篇

技術【Day 14】設計樣式共用的元件！Vue有v-slot，那React可以怎麼做！？

對vue比較熟悉的朋友們，應該對於slot的使用都不陌生，slot對於增加元件的使用彈性上有著很大的幫助。但是React沒有vue框架中的v-slot，要怎麼彈...

文科少女 ‧ 2023-09-20 ‧團隊曼陀號計畫V

1 Like 0 留言 1295 瀏覽

鐵人賽 Modern Web DAY 3

30天React練功坊-攻克常見實務/面試問題系列第 3 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day3: Uncaught TypeError: Cannot set properties of undefined

tags: ItIron2023 react 前言昨天我們再次探討了一些基本的useState觀念以及react的一些render邏輯，基本上你只要知道第一天...

windate3411 ‧ 2023-09-18

0 Like 0 留言 943 瀏覽

鐵人賽 Modern Web DAY 20

React 走出新手村系列第 20 篇

技術 React 走出新手村 — 創造合邏輯的組件

Compund Pattern 這次要分享的是 Compound Pattern，如果你常常使用一些 component library 的話，這樣的使用你應該...

LucianoLee ‧ 2023-09-20

0 Like 0 留言 916 瀏覽

鐵人賽 Modern Web DAY 4

react 學習記錄系列第 4 篇

技術 [Day4]我的 react 學習記錄 - 用 webpack 來建立 react 開發環境

這篇文章的主要內容使用 webpack 建立一個陽春的 TypeScript + react 開發環境初始化 npm 專案開啟 terminal 然...

evan_hsu ‧ 2023-09-18

0 Like 0 留言 479 瀏覽

鐵人賽 Modern Web DAY 2

Nextjs 13: 建構專屬於你的 SSR 網站！系列第 2 篇

技術 [next 13] - Next 是什麼？

今天會介紹一下 Next 是什麼、為什麼要使用 Next，來幫助一些沒什麼接觸 Next 的朋友快速認識什麼是 Next。 Next 出現背景如同上一篇講的，...

時雨 ‧ 2023-09-17

0 Like 0 留言 1562 瀏覽

鐵人賽 Modern Web DAY 19

React 走出新手村系列第 19 篇

技術 React 走出新手村 — 路由基礎

你也是這樣嗎？有太多新手在基礎還不熟的情況下，只因為路由設定的原因，改學用 Next 框架，但相信我 React-router-dom 真的不難，而且在選擇用...

LucianoLee ‧ 2023-09-19

2 Like 1 留言 894 瀏覽

鐵人賽 SideProject30 DAY 2

用 React 和 Firebase 打造一個完整 side project 吧！系列第 2 篇

技術 Day02：用最短時間完成 side project 規劃

本文同步刊載於我的個人部落格從 user story 開始思考網站功能延伸第一天的主題發想，我將自己視為使用者，站在使用者角度出發後，初步規劃網站功能...

Annie ‧ 2023-09-17

0 Like 1 留言 1164 瀏覽

鐵人賽 Modern Web DAY 2

30天React練功坊-攻克常見實務/面試問題系列第 2 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day2: setState isn't working correctly when called multiple times

tags: ItIron2023 react 前言昨天我們用了一個非常基本的問題了解了關於react的render機制以及useState可能會碰到的一個小問...

windate3411 ‧ 2023-09-17

0 Like 0 留言 688 瀏覽

鐵人賽 Modern Web DAY 13

從Vue學React！不只要會用，還要真的懂～系列第 13 篇

技術【Day 13】Vue與React實現互動效果的事件綁定

前幾天已經了解關於state的存取及更新方式，還有從父層把state透過props的傳遞給子層的方式，今天就讓我們把重點放在怎麼讓頁面能擁有實際的互動功能，也就...

文科少女 ‧ 2023-09-19 ‧團隊曼陀號計畫V

2 Like 0 留言 785 瀏覽

鐵人賽 SideProject30 DAY 1

用 React 和 Firebase 打造一個完整 side project 吧！系列第 1 篇

技術 Day01：在 side project 開始之前

本文同步刊載於我的部落格 30天可以做什麼？身為一位工程師，最需要的就是以 side project 來展示自己的技能，在一年一度的鐵人賽中看見 sid...

Annie ‧ 2023-09-16

1 Like 1 留言 2473 瀏覽

鐵人賽 Modern Web DAY 1

30天React練功坊-攻克常見實務/面試問題系列第 1 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day1: setState isn't working with push method

tags: ItIron2023 react 前言總算又到了今年的鐵人賽了，今年的主題其實讓我掙扎很久，原先我是打算寫一些前端AI工具使用或是一些框架的深度技...

windate3411 ‧ 2023-09-16

技術 React 走出新手村 — Next SSG

技術 [Day7]我的 react 學習記錄 - component

技術 [next 13] - App Router 概念

技術 Day05：Firebase 服務中的資料架構

技術 30天React練功坊-攻克常見實務/面試問題 Day5 An unexpected "0" in the page while doing condition rendering

技術 Day 5 - 建立元件之間的聯繫：匯出與引入

技術 React 走出新手村 — 認識Next

技術 [next 13] - Next 環境建置及技術選型

技術 【Day 15】究竟是watch？還是生命週期API？處理副作用的useEffect

技術 Day04：side project 必備的 Flow Chart(二)

技術 30天React練功坊-攻克常見實務/面試問題 Day4: Way too many state in a component

技術 React 走出新手村 — CSR處方簽

技術 React 走出新手村 — 資料夾的分類

技術 [Day6]我的 react 學習記錄 - JSX 跟 babel 的作用

技術 [Day5]我的 react 學習記錄 - react 是什麼

技術 Day 4 - React 元件初探

技術 Day03：side project 必備的 Flow Chart(一)

技術 React 六角學院-學習筆記(React Hooks)

技術 [next 13] - Next 13.4 - 全新版本的 Next

技術 【Day 14】設計樣式共用的元件！Vue有v-slot，那React可以怎麼做！？

技術 30天React練功坊-攻克常見實務/面試問題 Day3: Uncaught TypeError: Cannot set properties of undefined

技術 React 走出新手村 — 創造合邏輯的組件

技術 [Day4]我的 react 學習記錄 - 用 webpack 來建立 react 開發環境

技術 [next 13] - Next 是什麼？

技術 React 走出新手村 — 路由基礎

技術 Day02：用最短時間完成 side project 規劃

技術 30天React練功坊-攻克常見實務/面試問題 Day2: setState isn't working correctly when called multiple times

技術 【Day 13】Vue與React實現互動效果的事件綁定

技術 Day01：在 side project 開始之前

技術 30天React練功坊-攻克常見實務/面試問題 Day1: setState isn't working with push method

標記使用者

技術【Day 15】究竟是watch？還是生命週期API？處理副作用的useEffect

技術【Day 14】設計樣式共用的元件！Vue有v-slot，那React可以怎麼做！？

技術【Day 13】Vue與React實現互動效果的事件綁定