iT邦幫忙

reactjs相關文章
共有 319 則文章

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

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

鐵人賽 Modern Web DAY 30

技術 [Day 30 - 臺灣好天氣] 發布上 Github Pages 不夠,還要變成手機 App!還有那些重要但故意先不告訴你的內容

昨天我們已經把「即時天氣 App」發佈到 Github Pages 上了並且正名為「臺灣好天氣」。 但是這類型的天氣 App 如果可以安裝到手機上的話有多好呢?...

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

技術 Day30-結語

前言 不知不覺就到最後一天了,沒想到這次竟然也可以完賽,果然每天屁話個幾句就可以順利產出文章了(X 為了呼應上面所說,所以今天就來當個文章小偷來分類一下這次系列...

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

技術 Day29-React + D3(二)

前言 昨天的文章利用 componentDidMount 結合 D3 ,但相信讀者一定會覺得這樣的寫法又臭又長,而且這個 class 裡面也才寫了一個 comp...

鐵人賽 Modern Web DAY 28

技術 [Day 28 - 即時天氣] 保存與更新使用者設定的地區資訊 - localStorage 與 useEffect 的搭配使用

useEffect, localStorage 昨天完成了讓使用者設定地區的表單頁面後,今天就讓我們來實作設定地區這個功能。最終的目標是當使用者按下儲存後,根據...

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

技術 Day28-React + D3(一)

前言 前面的文章都介紹完圖表的繪製後,今天終於要回歸主題,把 D3 跟 React 結合在一起了,今天跟明天的文章都會把以前所講的內容做一個統整,假如對 Rea...

鐵人賽 Modern Web DAY 30

技術 [DAY30] 被 React react 的後端工程師 - 後記

一開始會這麼定題目,其實是起源于我對前端的挑食,因為我不喜歡調畫面 左邊一點右邊一點這種事情我真的不喜歡做 所以取翻譯中 過敏 的意思來形容我的 React 學...

鐵人賽 Modern Web DAY 27

技術 [Day 27 - 即時天氣] React 中的表單處理(Controlled vs Uncontrolled)以及 useRef 的使用

keywords: useRef, controlled components, uncontrolled components, form 昨天已經建立好了天...

鐵人賽 Modern Web DAY 29

技術 [DAY29] 多 DOM 的動畫之我等了這篇 29 天之我完全不介意

我想說的是: 其實基礎的多個 DOM 的動畫,跟一個差不多 多個的就是專業的部分,我不清楚 上一篇中已經可以控制一個 DOM 元素的動畫效果 而想控制多個動...

鐵人賽 Modern Web DAY 26

技術 [Day 26 - 即時天氣] 切換顯示不同頁面 - 子層組件修改父層組件資料狀態的方式

今天設計師又氣噗噗的打電話來,跟我說這幾天她回家參加朋友婚禮,想說來看一下天氣資訊,沒想到即時天氣 App 的地點卻仍停留在「台北」,竟然找不到切換地點的地方,...

鐵人賽 Modern Web DAY 28

技術 [DAY28] React 動畫動得非常厲害

我想說的是: 動畫好酷炫耶,以前完全沒用過就跑來寫後端 react-transition-group 真的很厲害 看完之後...我還是不會想寫前端耶 用 t...

鐵人賽 Modern Web DAY 25

技術 [Day 25 - 即時天氣] 自己的鉤子自己做 - 建立 Custom Hook

keywords: Custom Hook 不知道這幾天在修改即時天氣 App 時,特別針對 WeatherApp.js 這支檔案,你有沒有覺得內容好像多到找個...

鐵人賽 Modern Web DAY 27

技術 [DAY27] 如果你快樂就拍拍手之在 react 使用動畫效果之基於 CSS

我想說的是: 其實使用起來也是很簡單,但是對於 react 本身的操作要夠熟悉 最近買了薩爾達織夢島,有點太投入 整個早上都在玩,本來早上就該發文的 這一篇...

鐵人賽 Modern Web DAY 30

技術 【React.js入門 - 30】 學了React之後,然後呢?

(借一下JSDC的標題,我很喜歡XD) 太好了,我好像有辦法用一個前端框架寫專案了,那接下來我該做什麼? 從學了React,到寫了兩三個前端框架專案之後,我...

鐵人賽 Modern Web DAY 25

技術 Day 25 - React Fetch 向後端API請求資料(2)

Day 24 - React Fetch 向後端API請求資料(1) 上一章實作了Fetch API獲取Member資料 今天我們要拿證照跟廠商資料 Certi...

鐵人賽 Modern Web DAY 24

技術 Day 24 - React Fetch 向後端API請求資料(1)

Day 23 - AJAX 與 Fetch API 上一章介紹了AJAX與Fetch API, 還有其使用方式 我們今天來實作看看 新增Member.js im...

鐵人賽 Modern Web DAY 24

技術 [Day 24 - 即時天氣] 跟風一下,在 React 中透過 Emotion 實作深色主題!

keywords: useState, Emotion, theme, emotion-theming 昨天在設計師的誠心建議之下,我們加入了「載入中」的狀態,...

鐵人賽 Modern Web DAY 26

技術 [DAY26] 今天天氣怎樣?等等我打一下 API 再跟你說

我想說的是 API 串接範例練習,就是這麼簡單 上一篇中安裝了 axios 於是我們就準備好了工具 接下來要做練習,試試看實際執行的結果 我們先直接在 Ma...

鐵人賽 Modern Web DAY 29

技術 【React.js入門 - 29】 使用圖片、使用css檔、新手容易遇到的問題

使用圖片 過去我們使用圖片是直接在src屬性寫路徑: <img src="./rice.jpg" alt="Rice&quo...

鐵人賽 Modern Web DAY 25

技術 [DAY25] 打來打去之 API 又要挨打之套件安裝方法之 npm 安裝方法學問多

我想說的是 在 React 裡面操作 ajax 可以使用 Axios 來達成 使用 --save 安裝,會將指定套件加入依賴列表,未來可快速建立相同開發環境...

鐵人賽 Modern Web DAY 23

技術 [Day 23 - 即時天氣] 實作資料載入中的提示狀態

keywords: useState, css-in-js, Emotion.js 昨天下班前,公司的設計師看了終於表示滿意:「沒錯,白天就是要是用太陽,晚上就...

鐵人賽 Modern Web DAY 23

技術 Day 23 - AJAX 與 Fetch API

上一章 Day 22 - React 第一個Component AJAX AJAX是以XMLHttpRequest(XHR)物件為主要核心的實作, 用於從客...

鐵人賽 Modern Web DAY 28

技術 【React.js入門 - 28】 我要更多更多的分頁 - react-router-dom (下)

Link v.s <a> 如果我們想讓使用者用GUI導向不同頁面,過去會使用<a>。而react-router-dom提供了一個和&lt...

鐵人賽 Modern Web DAY 22

技術 [Day 22 - 即時天氣] 讓白天和晚上使用不同天氣圖示

keywords: useMemo 昨天終於處理掉了即時天氣 App 中最軟的那塊,也就是天氣圖示的部分,就再鬆了一口氣的時候,腦中突然浮出公司設計師發出的聲音...

鐵人賽 Modern Web DAY 24

技術 [DAY24] 活用生命週期的奧秘之提升效能

我想說的是 使用 shouldComponentUpdate() 來優化組件效能 前幾天中我們已經對 React 生命週期有了基本的認識 那跟提高組件的性能...

鐵人賽 Modern Web DAY 21

技術 [Day 21 - 即時天氣] 處理天氣圖示以及 useMemo 的使用

昨天學到了 useCallback 能讓 React 組件內所定義的函式在 dependencies 不變的情況被「保存」下來,如此便可以把希望被覆用的函式放到...

鐵人賽 Modern Web DAY 26

技術 【React.js入門 - 26】 input使用、input與state的互動 (控制組件) 、其他輸入元素

先前我們在【React.js入門 - 06】 JSX (下)有稍微帶過說<input/>類的元件在取得使用者的輸入值時,必須透過e.target.v...

鐵人賽 Modern Web DAY 23

技術 [DAY23] 生命週期 2 生命如此變化無常之然後呢之然後他就死掉了

我想說的是 當組件被更新以及刪除的時候 react 的程式流程 錯誤處理 當一個組件在 render 的過程、生命週期 或在某個子組件的 construct...

鐵人賽 Modern Web DAY 21

技術 Day 21 - React 什麼是Component? 生命週期?

上一章 Day 20 - React 安裝與導入需要的package Component 是 React 中很重要的一環, 其中包括複雜的生命週期, 與各種不同...