iT邦幫忙

react相關文章
共有 560 則文章
鐵人賽 Modern Web DAY 23

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

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 自我挑戰組 DAY 3

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

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

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

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(6)-上吧!迴圈!

Hi!大家好啊!其實最後五篇的時候一直在作品中間鬼打牆XD,有時候想說這樣做,睡前又想說可以這樣做,起床改一改上班又想到另外一個作法,總之真的覺得第一次使用組件...

鐵人賽 Modern Web DAY 28

技術 【Day 28】React 的好搭檔 - Material UI && Recharts

鐵人賽進入尾聲了,基礎也都帶過了,最後就來介紹一些自己在寫 React 時常搭配的套件吧。 Material UI Material UI官網 這個函式庫針對...

鐵人賽 Modern Web DAY 14

技術 【Day 14】Form in React

今天要來介紹在 React 中如何建構最基本的 form。 重點可以歸納出這幾項: 建立 state 變數,且與 input value 做綁定 設定 onC...

鐵人賽 Modern Web DAY 16

技術 Day16 - 貪吃蛇篇:加入蛇的身體

昨天我們已經讓蛇的頭部可以動起來,並且可以接受方向鍵的操作來改變方向。接下來我們要讓這隻蛇有身體,讓他成為一條名符其實的蛇。 前情提要 在 Day12 - 貪吃...

鐵人賽 Modern Web DAY 20

技術 Day20 - 貪吃蛇篇:虛擬方向鍵及暫停遊戲

前情提要及動機 在 Day11 的功能構想中我們有提到,雖然到昨天 Day19 整個貪吃蛇遊戲已經很完整了,但是有一點美中不足的地方,就是透過手機開啟這個遊戲的...

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

技術 【Day20 React】Redux 入門

後面這二十天,將專攻 Redux,一樣也是透過做中學的方式來理解 Redux。 首先,官方文件是必備材料: Redux 官方中文文件 另外,這一篇 Code C...

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

技術 【Day 21 React】Redux 做遊戲角色陣容應用程式——趴萬

這次要做的專案是遊戲角色選取的應用程式 做出來的應用程式大概會像這樣: 可以從左邊的角色選項選取到右邊,陣容狀態會依被選取的角色而不斷更動。 建置環境 在專...

鐵人賽 自我挑戰組 DAY 15

技術 【DAY 15】利用redux與react搭配在做出一個To do list吧!(上)

【前言】   呼~~終於進行到一半了(灑花!越來越不知道前言要寫什麼來湊字數了XD 【正文】   在這次的範例,我們要利用redux與react再次做一個to...

鐵人賽 Modern Web DAY 17

技術 【Day 17】Redux 實戰演練

今天將直接實作 redux,如果不知道 redux 運作概念的讀者可以回去看看昨天的概念介紹喔~ 今天嘗試將 dark theme 與 light theme...

鐵人賽 Modern Web DAY 22

技術 <22 - React 上陣 01> Webpack - Babel - React 聯手

火紅的 React,建立元件銳不可擋,今天來寫一個 Hello World 的 React 元件,然後示範該如何透過 webpack 以及 babel 來 bu...

鐵人賽 自我挑戰組 DAY 16

技術 【DAY 16】利用redux與react搭配在做出一個to do list吧!(中)

【前言】   又是一個禮拜的煎熬......但還是得要繼續看redux,加油加油 【正文】   昨天把presentational component順勢寫完了...

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

技術 【Day18 React】React Flux 架構——Action

今天,要來學習 to-do app 中的 Action 先在 js 資料夾下創建一個 actions 資料夾,裡面新增一個 TodoActions.js 在 a...

鐵人賽 Modern Web DAY 20

技術 Day 20, Reading List - React部分-2

先上圖,不囉嗦。 這邊還只有UI的功能而已,補上三支code! ReadingListWidget 準備要專門與後端溝通! 還有包裝component進去。...

鐵人賽 自我挑戰組 DAY 5

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

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

鐵人賽 Modern Web DAY 7

技術 【Day 7】型別檢查 && PropTypes

昨天講解了 props 的應用,讓子元件可以接收來自父元件的資料。 但是隨著應用規模的提升,透過型別檢查可以減少許多可能的錯誤。 要達成這個目的,許多人會選擇...

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

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(4)-Redux登板,建立store

昨天把新增的表單處理完了!今天要來處理Redux的部分,雖然年代久遠,不知道大家還記不記得,忘記的話就當作複習,來做一次吧! 確認資料 在要做新作業的時候,最...

鐵人賽 Modern Web DAY 17

技術 Day16 | SPA 的換頁不是你的換頁

前言 今天要和大家介紹的是 SPA, 是一種提升用戶在瀏覽網頁時的技術, 傳統式的網頁在切換頁面時,都會送出一個 Url 給服務器,之後服務器會依它收到的 Ur...

鐵人賽 Modern Web DAY 28

技術 Day27 | 最強聯名款 TSX 上市-Babel、Webpack、Jest 篇

前言 進到入最後一個章節,本篇章開始會持續說明如何將 TypeScript 導入 React 專案裡,最後會再和大家介紹筆者怎麼在專案裡運用 TypeScrip...

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

技術 【Day 29 React】Redux+API 製作 meme generator—— Part3

Create meme items 昨天把 API 裡的 meme names 都 render 出來之後,我們今天要把圖片呈現出來。 先在 component...

鐵人賽 自我挑戰組 DAY 8

技術 【DAY 08】React Component也有生老病死?(下)

【前言】   昨天稍微提到了React component的其中兩個生命週期componentDidMount和componentWillUnmount。今天就...

鐵人賽 Modern Web DAY 11

技術 【Day 10】CSS && Inline-style

到昨天為止都著重在 JS 的部分,基本的功能已經可以完成了,但除了功能以外,網頁應用的外觀也是很重要的,所以今天就暫時把 JS 擺在一邊,看看在 React 中...

鐵人賽 Modern Web DAY 13

技術 Day13 - 貪吃蛇篇:頁面佈局規劃

頁面佈局規劃 如同前篇遊戲 Tic Tac Toe 一樣,我們要來規劃一下遊戲的畫面,因為我希望我們貪吃蛇的遊戲在電腦上可以玩,在手機上也可以玩,所以我想要把遊...

鐵人賽 自我挑戰組 DAY 1

技術 【DAY 01】你好React,我可以當你好朋友嗎?

【前言】   咳咳,我是Hyora,一個剛滿四個月、天天都很厭世、擔心什麼時候會被火掉的超廢前端工程師。雖是本科系出身,但大學程式課程要不是低空飛過,不然就是能...

鐵人賽 Software Development DAY 1

技術 遠征之旅出發前,我們先從這段歷史說起

※取自《大話西遊之仙履奇緣》劇照 這故事要從20年前說起。 (現在流行網路上的圖原封不動地抄襲拿來用,若有不小心盜圖侵權,請務必來信告知,本人馬上把圖片下架,...

鐵人賽 Modern Web DAY 27

技術 Day 27 - React And BootStrap 動態橫幅廣告 Carousel

上一章 Day 26 - React Router And Link 在做前端頁面時, 許多人都使用Bootstrap 簡單易用, 大大的加快了開發速度 而它也...

鐵人賽 Modern Web DAY 22

技術 【Day 22】React.memo

昨天講到了 class based component 可以透過 shouldComponentUpdate 比較前一次 props 與 前一次 state 來...

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

技術 【Day 25 React】Redux 做遊戲角色陣容應用程式——趴ㄈ ㄞˋ

mapping dispatch to props import { bindActionCreators } from 'redux'; import {...

鐵人賽 Modern Web DAY 23

技術 <23 - React 上陣 02> Webpack - Babel - React 聯手 - 撰寫多個元件並匯入至某個JS

繼上一篇 <22 - React 上陣> Webpack - Babel - React 聯手,已經做好基本的安裝與設定,接下來要更進一步寫多個元件...