iT邦幫忙

reactjs相關文章
共有 711 則文章
鐵人賽 Modern Web DAY 16

技術 【Day16】數據展示元件 - Table

元件介紹 Table 顧名思義就是一個表格元件,用來整齊的顯示行列數據。 參考設計 & 屬性分析 我自己覺得 table 是一個還蠻繁瑣的元件,要組成一...

鐵人賽 Modern Web DAY 3

技術 React 基礎簡介 - Props,State與事件處理

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 雖...

鐵人賽 自我挑戰組 DAY 22

技術 【DAY 22】react-router,實現單頁式網站的秘密

【前言】  終於來到最後的react-router囉!再撐一下就可以把這三劍客都認識一遍了!【正文】  我想大家應該都很常聽到什麼SPA、單頁式網站、Singl...

鐵人賽 Modern Web DAY 25

技術 [Day 25] Reusable state — React 18 的 useEffect 在 mount 時為何會執行兩次?

在前面的章節中我們已經詳細的解析了 useEffect 正確的概念以及用法,也再三強調了 useEffect 的用途是同步資料到 React elements...

鐵人賽 Modern Web DAY 27

技術 [Day 27] useCallback 與 useMemo 的正確使用時機

除了最核心的 useState 以及 useEffect 以外,在 React 中最常被我們使用到的內建 hooks 應該就屬 useCallback 以及 u...

鐵人賽 Modern Web DAY 10

技術 [Day 10] React 畫面更新的核心機制(上):一律重繪渲染策略

在經過前面一些基本觀念的鋪陳之後,接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理,而這將會是真正掌握 React 這門技...

技術 看官方文檔安裝 React之選擇方式竟然這麼多 (上):什麼是 CDN?

挑戰 React 第二篇 安裝方式 CDN 連結 新手快速入門 Create React App 經驗豐富高手 更靈活的 Toolchain 使用 Nod...

技術 React雜談#1 React-Hook-Form - 建立快速的React表單

有使用過React的同學都知道,用React做輸入控制的時候, 通常做法是建立一個input的state, 具體如下: import { useState }...

鐵人賽 Modern Web DAY 6
React + D3 的正確姿勢 系列 第 6

技術 Day06-React元件比較

前言 今天要來講講比較進階一點的 component 了,如果對於 component 的基本觀念有任何不懂的歡迎先去看前兩天的文章來奠定一下基礎,沒問題的話就...

鐵人賽 Modern Web DAY 17

技術 Day17 - 貪吃蛇篇:產生食物(上菜啦~~)

想一想,決定食物如何出現 俗話說,吃飯皇帝大,如果不吃東西,貪吃蛇就長不大,也跑不快,所以今天我們要來製作貪吃蛇的另一個重頭戲,就是食物。 首先,我們要來決定食...

鐵人賽 Modern Web DAY 2
ReactJS 疑難排解 系列 第 2

技術 ReactJS 疑難排解:寫出一個好的 Render Counter

說到計算 render 次數,大家可能一開始想到的便是下面這段扣 const RenderCounter = () => { const render...

鐵人賽 Modern Web DAY 27

技術 [Day 27] 高效工作術:番茄工作法

這篇文章不同於過往的技術分享或是關於工程師職涯的心得,要來介紹的是一個自己嘗試過後覺得十分有效的「工作術」,不管讀者的職業是什麼,我認為都有運用這個工作術的空間...

鐵人賽 Software Development DAY 21

技術 Day 21 - 二周目 - React 必備知識和效能議題

回憶 昨天我們以非同步函數測試的例子說明單元測試/整合測試的差異,到目前為止後端的部分打算先到這。之後的幾天,我們開始進入研究前端。 目標 在 Day 11 -...

鐵人賽 影片教學 DAY 1

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day1 系列影片介紹

2021/10/23 更新:新增範例網站以及程式碼連結 (影片教學組的頭香我搶走囉XD) 大家好!我又來參加 iThome 舉辦的鐵人賽了! 09/01 至...

鐵人賽 Modern Web DAY 12

技術 [Day 12] 沒了解過 Cache,就別說網站性能沒救了! - (1)

現今的網頁架構相較於過往偏向靜態的形式已經變得複雜許多,大部分資料都要靠動態抓取,而抓取資料的過程就會產生許多 Request 請求去取得 Response ,...

鐵人賽 Modern Web DAY 11
一步一腳印的React旅程 系列 第 11

技術 [筆記][React]使用React開發的思考模式(2)-組件的構成模式

Hi!恭喜踏入第11篇!完成1/3的賽程了!這樣子一直倒數心態是不是不太好XD,不過我還是很沈醉在給自己壓力的,哈哈哈,但是結束後還是讓我耍廢一陣子吧!欸?現在...

鐵人賽 Modern Web DAY 2

技術 Day2. React的基本用法 (一)

因為gatsby是基於React,所以在使用上需要會一些React語法,而且了解React也可以讓自己開發起來更有彈性一點(畢竟它都提供了!不用就浪費了,蠻合理...

鐵人賽 自我挑戰組 DAY 17

技術 [Day 17] React Developer Tools除錯工具

在沒有用過框架的chrome的除錯工具前,我其實不知道類似這樣的工具在開發上能夠有什麼幫助?不過經過實際使用一陣子之後, 才發現dev tools真的太好用了(...

鐵人賽 Modern Web DAY 25

技術 [Day 25] 菜鳥工程師的初次 Open Source Contribution - (1)

鐵人賽剩下 5 天,接下來我想聚焦在一些經驗分享,畢竟除了學習技術以外,適時的採取一些實際行動更能夠快速吸收所學知識與進步。 身為軟體工程師, Github 自...

鐵人賽 Modern Web DAY 23
激戰 ReactJS 30天 系列 第 23

技術 【Day23】 有形才有靈

所有網頁的開始都是要先有框架才能繼續下去所以呢今天要把所有應該要看到的東西一口氣全長出來! 網頁框架&組件 首先來張腦海浮出的架構長相: 整個網頁總共有 6 個...

鐵人賽 自我挑戰組 DAY 22

技術 【Day22】ChatGPT請教教我:React入門(八)- React & axios !API串起來!

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

鐵人賽 自我挑戰組 DAY 3

技術 【DAY 03】Hello, React! 我終於印出你了!

【前言】  昨天我們很簡(ㄙㄨㄟˊ)略(ㄅㄧㄢˋ)的介紹ES6、Babel、JSX之後,我們要來使用React撰寫我們第一個Component囉! 【正文】  ...

鐵人賽 Modern Web DAY 30
Zero to hero with React.js 系列 第 30

技術 【Day 30 React】Redux+API 製作 meme generator—— 完結篇

繼昨天 export 之後我們就可以來撰寫 reducer。把 NEW_MEME 加進來 import { RECEIVE_MEMES, NEW_MEME }...

鐵人賽 Modern Web DAY 28
Zero to hero with React.js 系列 第 28

技術 【Day 28 React】Redux+API 製作 meme generator—— Part2

Listing memes 今天第一個任務 94 呈現 memes~~~第一步驟,先進到 App.js import { connect } from 're...

鐵人賽 Modern Web DAY 23

技術 Day23 - 記憶方塊篇:頁面佈局規劃

繪製頁面草稿 按照慣例,我們先來畫一下我們整個遊戲畫面呈現的草稿,下面是我對整個遊戲面化的初步想像。 我把所有的元素都集中放在中間區塊,因為人的視線比起左右移動...

徵才 【徵才】東森得易購 徵 React資深前端工程師(研發中心)

[團隊簡介] 前端團隊成員目前7人, 需補足8人。團隊採敏捷開發流程。 公司未來將發展跨境電商, 包括中國大陸, 東南亞, 日本, 韓國是我們的合作目標。 ht...

鐵人賽 Modern Web DAY 12

技術 [Day 12] 如何在子 component 裡觸發更新父 component 的資料

React 中以 state 資料以及 setState 作為 reconciliation 的觸發點,並且以 props 作為 component 層層往下的...

鐵人賽 自我挑戰組 DAY 5

技術 【DAY 05】React!說,State又是誰啊?

【前言】  昨天我們講到Props是由父層傳遞下去,不過有時候我們要讓Component本身對自己做相關的狀態變更或是Component變化,那這時候應該要怎麼...

鐵人賽 影片教學 DAY 8

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day8 文章主題列表

連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...

鐵人賽 Modern Web DAY 13
激戰 ReactJS 30天 系列 第 13

技術 【Day13】 搭火車排排隊 - Lists and Keys

祝大家 2018新年快樂 =D雖然是值得慶祝的日子但挑戰還是依然要繼續新的一年希望能夠在最開始就達成持續30天的小成就那麼廢話不多說下面正文開始啦~~~ 當資料...