iT邦幫忙

reactjs相關文章
共有 406 則文章
鐵人賽 Modern Web DAY 30

技術 react 大冒險-一些實用的 package-day 30

今天似乎是第 30 天,輕鬆一下~ 來介紹一些好用的 package (偽)結賽感言 總之晃的一下就 30 天了,怎麼感覺好像才剛開賽沒多久XDD 沒想到今年竟...

鐵人賽 Modern Web DAY 29

技術 react 大冒險-setTimeout setInterval in react -day 24

今天來說明如何在 react 內執行 setTimeout 跟 setInterval 複習概念,在 react 的生命週期中提到,`componentDidM...

鐵人賽 Modern Web DAY 28

技術 react 大冒險-render props-day 23

繼 higher-order-component 後,今天來說明 react 中另個概念 render-props 所謂的 render-props 就是在 c...

鐵人賽 Modern Web DAY 27

技術 react 大冒險-conditional rendering-day 22

寫著寫這竟然忘記了 conditional rendering 這回事XD 把這部分補回來 什麼是 conditional rendering conditio...

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

技術 react 大冒險-react router-day 21-2

今天繼續對 react router 做說明 除了上篇的 Link 外,react-router 還有一個叫 NavLink 的東西.. NavLink com...

鐵人賽 Modern Web DAY 26

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

今天接續昨天繼續分享第一次貢獻開源專案的心得。 第二步:閱讀 CONTRIBUTING.md & 開發 通常一個完整的開源專案,都會提供一個文檔讓想貢獻...

鐵人賽 Modern Web DAY 25

技術 react 大冒險-react router-day 21-1

繼前面提到 HOC 的概念後,緊接著介紹也是相當實用的 react router 本文使用的版本 會因版本不同 有些微差異 "react-route...

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

技術 react 大冒險-higher order component-day 20-2

上篇說明了 higher-order-component 的概念 用一個簡單的案例作為例子 開新檔案,名為 ClickerCounter.js 希望點擊元件上的...

鐵人賽 Modern Web DAY 23

技術 react 大冒險-higher order component-day 20-1

這篇來說明 React 實用的概念-高階元件(higher order component) 所謂的 higher order,其實在 js 中也有類似的概念,...

鐵人賽 Modern Web DAY 22

技術 react 大冒險-Lifecycle method-day 19

接續上篇,使用 promise 對 external api 取得值, 但如果想要在頁面讀取時就顯示出值,而不是等待使用者操作後才取值 就要靠 react 中的...

鐵人賽 Modern Web DAY 21

技術 react 大冒險-fetch data from API-day 18

react 如同一般 js,可以對 api 發出請求並取回值 send request 的幾種方法 js 是 synchronous 特性的語言,在同時間下,一...

鐵人賽 Modern Web DAY 20

技術 react 大冒險-unidirectional flow 單向資料流-day 17-2

在 Calculator 中 添加兩個 method handleCelsiusChange / handleFahrenheitChange 用來設定 Cal...

鐵人賽 Modern Web DAY 19

技術 react 大冒險-unidirectional flow 單向資料流-day 17-1

在 react 中有個特性稱為 單向資料流 unidirectional flow 簡單說就是 child component 內的資料都來自於 parent...

鐵人賽 Modern Web DAY 18

技術 react 大冒險-form in react-day 16-2

上篇 提到 react 表單內的事件,來實際應用,做一個表單 在 表單 中寫 method 分別為 submitHandler: 按提交後的 method ha...

鐵人賽 Modern Web DAY 18

技術 仿Trello - 串接Unsplash API

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

鐵人賽 Modern Web DAY 17

技術 react 大冒險-form in react-day 16

上篇提到如何為 component 添加樣式,文末得到了一個使用 bootstrap 樣式的表單, 接下來談談 react 中的表單 表單內常用的 DOM in...

鐵人賽 Modern Web DAY 17

技術 仿Trello - 客製化拖曳圖示

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

鐵人賽 Modern Web DAY 16

技術 react 大冒險-styling component-day 15

這裡來講講在 react 內,怎麼對 component 套用樣式 讓 component 醜小鴨變天鵝 inline styling css 屬性以駝峰式...

鐵人賽 Modern Web DAY 16

技術 仿Trello - 用React DnD製作拖放(drop)功能

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

鐵人賽 Modern Web DAY 15

技術 react 大冒險-react 事件處理-day 14

上篇提及的 state 跟 setState,這裡談談在 react 內的 event handling Handling Events in js 一般 js...

鐵人賽 Modern Web DAY 13

技術 【Day.13】React入門 - useEffect(生命週期)

在前面的文章中,我們曾經說過這句話: ...如果有仔細看剛剛範例中的程式碼,你會發現Menu開關的功能並沒有被加進去。這是因為在React元件中,以內部控制元...

鐵人賽 Modern Web DAY 15

技術 [Day 15] Server-Side-Rendering - (2) feat. Next.js

前一天介紹了 SSR 基本概念,今天則是要介紹 React 最有名的 SSR 框架:Next.js。 今天不是要來講 Next.js 怎麼使用,畢竟網路上學習資...

鐵人賽 Modern Web DAY 15

技術 仿Trello - 用React DnD製作拖曳(drag)功能

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

鐵人賽 Modern Web DAY 14

技術 react 大冒險-關於setState-day 13

setState 雖然 state 可被修改 但要搭配 react 內專屬的方法setState 不可以直接修改 state 上的值,直接修改 state 並不...

鐵人賽 Modern Web DAY 14

技術 仿Trello - 製作reducer

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

鐵人賽 Modern Web DAY 14

技術 [Day 14] Server-Side-Rendering - (1)

最近在 Frontend 技術圈裡,Server-Side-Rendering(SSR) 可說是一個越來越火熱的概念,剛好現在工作上的架構就是使用 Next.j...

鐵人賽 Modern Web DAY 13

技術 react 大冒險-顯示當下欄位輸入值的文字段落 state exercise-day 12

上篇介紹 prop 跟 state, 來做個關於 state 的練習 製做一個會顯示當下欄位輸入值的文字段落 回到 App.js,將原本的 ListItem c...

鐵人賽 Modern Web DAY 13

技術 仿Trello - 建立 Redux Store

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