iT邦幫忙

reactjs相關文章
共有 733 則文章
鐵人賽 Modern Web DAY 6
react 學習記錄 系列 第 6

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

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

鐵人賽 Modern Web DAY 5
react 學習記錄 系列 第 5

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

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

鐵人賽 Modern Web DAY 4
react 學習記錄 系列 第 4

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

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

鐵人賽 Modern Web DAY 3
react 學習記錄 系列 第 3

技術 [Day3]我的 react 學習記錄 - webpack

這篇文章的主要內容 簡單介紹 webpack 是什麼。 webpack 是什麼? 問問現在還算流行的 chatGPT Webpack是一個用於打包、轉換和管...

鐵人賽 Modern Web DAY 2
react 學習記錄 系列 第 2

技術 [Day2]我的 react 學習記錄 - npm & node.js

這篇文章的主要內容 簡單說說 npm 跟 node.js 是什麼。 npm & node npm 是 Node Package manager 的簡稱...

鐵人賽 Modern Web DAY 12

技術 【Day 12】傳遞state給子層用props,但props不只用來傳遞state

在了解state怎麼定義、怎麼操作後,還有一個很重要的部分,就是state在元件中傳遞的方式。這個部分也就是大家普遍都很熟悉的props,不只在Vue中是使用p...

鐵人賽 Modern Web DAY 11

技術 【Day 11】Vue的雙向綁定v-model!React也辦得到嗎?

v-model是vue框架裡面很常見的一種雙向綁定的用法,主要會實作在input、textarea、select等的這些表單標籤上,目的是為了實現資料的雙向同步...

鐵人賽 Modern Web DAY 1
react 學習記錄 系列 第 1

技術 [Day1]我的 react 學習記錄 - react 啟動!

在轉職成軟體工程師的這個過程,鐵人賽上大神前輩的文章總是帶給我很多啟發跟想法,自己也希望透過分享的方式讓自己對於 react 有更深入且全面的認識,了解框架運作...

鐵人賽 Modern Web DAY 9

技術 【Day 9】Vue & React上的單向資料流的應用

關於單向資料流,昨天已經有針對這麼部分透過程式碼來了解是怎樣的資料流design pattern了,但是單向資料流究竟和Vue和React有什麼關係呢?就讓我們...

鐵人賽 Modern Web DAY 6

技術 【Day 6】元件的一生!Vue的生命週期 vs. React的生命週期

昨天看了渲染機制後,緊接著再往前一步來看看元件的生命週期吧!常寫Vue的朋友們應該對生命週期都不陌生,因為偶爾還是會遇到需要透過生命週期API來實現一些功能的時...

鐵人賽 Modern Web DAY 1

技術 [Day 1] 為什麼要寫Custom Hook與測試

前言 當我們還是新手時,常常寫了一大堆程式碼,程式碼越來越亂,UI與邏輯瘋狂耦合,發生bug又找不到在哪,又發現好多地方都是差不多的功能,卻每個地方都寫不一樣,...

鐵人賽 Modern Web DAY 4

技術 【Day 4】 觸發重新渲染後的下一步 - Reconciliation (上)

昨天已經了解了imutable和mutable特性與觸發畫面重新渲染的關係,今天再另外深入一個與畫面更新有關的部分,也就是Reconciliation,或是稱為...

鐵人賽 Modern Web DAY 3

技術 【Day 3】可變特性與不可變特性&渲染的觸發與Virtual DOM的產生

不論是學習Vue或是學習React,除了學會怎麼使用它們的API或hook外,還必須了解它的渲染機制,這樣才可以避免出現一些預期外的bug而不自知,或是在需要某...

鐵人賽 Modern Web DAY 2

技術 【Day 2】這趟旅程,從認識mutable和immutable開始

我們先把什麼Vue不Vue的,React不React的放一旁,從一個很基礎,但很多初學者(包含我)卻沒有好好去理解的關鍵概念開始認識,那就是mutable和im...

鐵人賽 Mobile Development DAY 2

技術 DAY 2 - React Native 開發的成本與學習的管道

既然想選擇 React Native 作為開發工具,當然要先評估會有哪些成本?是否能負荷?進而開始學習。 使用 React Native CLI 開發 APP...

鐵人賽 Modern Web DAY 1

技術 【Day 1】為什麼我要從Vue學React?為什麼不只要會用,還要真的懂?

大家好!我是從韓文領域不務正業到軟體產業的文科少女,目前正在前端的世界努力中。因為希望自己能突破Junior的坎,所以為自己立下了一個參加鐵人賽的目標,希望透過...

鐵人賽 Mobile Development DAY 1

技術 DAY 1 - 前言&React Native 簡介

前言 預計分享的內容 有感於 React Navie 繁體中文的內容偏少加上在工作中踩了不少坑,因此這次鐵人賽將分享我以網頁前端工程師的角度開發 React N...

鐵人賽 Modern Web DAY 2

技術 加入元件庫

首先是元件庫,目前用的最順手的是 MUI ,先把會用到的部分安裝。 pnpm add @mui/material @emotion/react @emotion...

鐵人賽 Modern Web DAY 1

技術 建立 NX 專案

開發累積了些經驗後已經有一些用著趁手的套件,也做了一些將這些套件封裝後的工具,開了新專案的時候可以用 fork 或是將工具發布到 npm 上的方式來重用這些工具...

技術 從 2024 React Conf 看 React Native 發展

今年的 React Conf 除了眾所矚目的 React 19 ,同時以 meta 開發團隊開發的 React Native 也帶來了不少亮點。有關於 Reac...

技術 [React][MUI][Debug筆記] 為什麼ThemeProvider沒有改變背景顏色?

重點 使用MUI元件庫提供的CssBaseline API即可渲染CSS設定至整個網頁 目錄 前情提要 適用情境 發生原因 解決方法 參考文章 前情提要...

技術 React-Router-Dom v6版本 與 舊版的差異範例

在網路上查找相關文章的時候,發現很多用法已經淘汰了,所以就自己整理這篇來當作筆記。 現在react-router-dom v6 版本改了很多,例如: 不再支援...

技術 Nextjs: Hydration failed because the initial UI does not match what was rendered on the server

這是Reactv18開始有的問題,官方描述: While rendering your application, there was a difference...

技術 (自己回答自己)Re: 關於新手入門React+TypeScript遇到的困擾⋯

原篇發問網址在這:https://ithelp.ithome.com.tw/questions/10211232 前言這篇是我自己發問的,最後搞很久,才終於寫出...

技術 [筆記 + 使用心得]React 18 的更新

React 18 在今年稍早推出了穩定版,聽說解決了很多長久以來的問題,所以花了點時間,體驗看看這些新功能,並且統整一下,寫成今天的文章 5 new Hooks...

鐵人賽 Modern Web DAY 30

技術 [Day30]用 React 讓網站動起來:完賽結語

React 系列到第三十篇了!終於要完賽了,感動~ 其實原本沒有想要參加鐵人賽的,因為六角學院的小組成員們說要參加,為了挑戰自己,也讓自己學習更多而參加。 會選...

鐵人賽 Modern Web DAY 30

技術 [Day 30] 一次打破 React 常見的的學習門檻與觀念誤解:系列文總結以及完賽感言

2024/2 更新 - 實體書平裝版本上市 在經過快要一年的努力後,本系列文的實體書版本推出了~其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節,並以全彩印刷拉...

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

技術 React白話文運動30-結尾

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

鐵人賽 Modern Web DAY 30

技術 你是什麼人,適合怎麼看?—範例的程式碼、文章分類索引、結語

前言 最後一天我將文章分類成幾種類型已經幫你整理好分類了,如果想要快速索引就將捲軸捲到特地區域觀看該系列文章就好。 循序漸進式系列 搭配官方文件和所有文章可...

鐵人賽 Modern Web DAY 29

技術 [Day 29] 一次弄懂 React hooks 的運作原理與設計思維(下)

Hooks 的誕生是為了解決什麼問題 在深入 hooks 的設計脈絡之前,我們得先來談談 hooks 的誕生究竟是為了解決什麼問題。首先,hooks 是綁定配合...