iT邦幫忙

react相關文章
共有 1745 則文章
鐵人賽 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...

鐵人賽 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
學會Elm寫前端 系列 第 23

技術 23 elm Q&A: 聽說和react, redux有關係?

如果你來自react 學react一定會用到redux來處理state的問題,那你就開始學redux,可是redux好難,一下又是reducer, 一下又是ac...

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

技術 【Day 27 React】Redux+API 製作 meme generator—— Part1

現在網路上有許多有趣的梗圖,今天我們不求人!就來串接 Imgflip API 取得梗圖,再透過讓使用者輸入要放在圖片上的文字,做出最客製化的梗圖~ 環境建置...

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

技術 【Day 26 React】Redux 做遊戲角色陣容應用程式——完結篇

上一篇建立完角色陣容後,今天要來做已選取的角色陣容。在 component 資料夾中新增 HeroList.js import React, { Compone...

鐵人賽 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 24
Zero to hero with React.js 系列 第 24

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

介面的呈現 在做好基本功能之後,先來把介面刻完,然後就可以把功能 map 到 UI 元件上了。除了 import React 和 component 之外,我們...

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

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

接續昨天在 index.js 寫完 reducer 的程式碼,現在要把這些程式碼分別放進各自的 reducer 裡,實現最結構化的撰寫模式。我們在 reduce...

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

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

Action 的設定 有 provider,有 store,有 reducer,明星三缺一,現在只缺 action 啦!第一個要定義的 action,就來寫寫選...

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

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

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

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

技術 【Day20 React】Redux 入門

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

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

技術 【Day19 React】React router 在 Single Page Application(SPA) 的應用

做 SPA 囉~~ 唉不是!此 SPA 非彼 SPA。。。。 今天要學習 React router,並透過 Single Page Application(SP...

技術 [ESLint] Parsing error: Unexpected token =

有時遇到這種問題,程式碼是對的,轉寫格式有錯就會出現類似問題,可能會是Parsing error: Unexpected token < 、Parsing...

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

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

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

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

技術 【Day17 React】Flux to-do text

新增 dispatcher.js 檔案,並在 TodoStore.js 裡註冊 dispatcher import { Dispatcher } from &q...

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

技術 【Day 16 React】React Flux 架構—— Store Event

上一篇文章介紹了 Flux 的基礎,今天就讓我們用 To-do app 來更深入了解 Flux 架構的運作原理吧~~~~~~ Store Change 每一次的...

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

技術 【Day15 React】React Flux 架構介紹

Flux Introduction 大家好,很高興可以在鐵人賽這個公眾場合上自我介紹,前幾年我也都有受邀來自介,很開心大家找我朋友 React,最後都會找到我這...

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

技術 【Day 14 React】React + Webpack ——搜尋功能 #Part3

呈現符合搜尋的結果 首先,我要先把寫死的 Toothpaste 產品資訊替換掉,替換成可以動態塞入符合搜尋結果的程式碼。 在 Results 這個 compon...

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

技術 【Day 13 React】React + Webpack ——搜尋功能 #Part2

取得 input 的值 昨天做到 input event 的綁定,不過尚未取得 input 的值,在 handleQuery 裡,我們可以用 event.tar...

鐵人賽 Modern Web DAY 10

技術 偵測滾動事件

React 有幾種偵測Scroll 的方式,通常是用的方式寫 不過有時候你要動到邏輯問題的撰寫方式,你可能就要拆步驟寫: 基本上 是分這三大元素去修改, com...

鐵人賽 Modern Web DAY 9

技術 React-Redux 表單練習

前言 當react結合redux後,就有的觀念就大轉變,要趕快脫離段適應期,所以要不段的修煉,今天練習的是redux 表單 練習目標 程式 看來挑錯練習範例...

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

技術 【Day 12 React】React + Webpack ——搜尋功能 #Part1

前面幾篇的做法,我都是直接引用 CDN 來操作。我們還有第二種方法可以 include React,就是透過第二篇介紹過的 Webpack,所以今天就來學學 W...

鐵人賽 Modern Web DAY 8

技術 React-Redux-框架練習(2)

前言 續昨天的文章: Getting started with create-react-app, Redux, React Router & Red...

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

技術 【Day 11 React】Events and Data Changes in React

今天要介紹如何即時得到使用者輸入的色碼,並即時 render 到氣球上。DEMO 建立 Component 首先,建立一個 Balloon component...

鐵人賽 Modern Web DAY 7

技術 React-Redux-框架練習(1)

前言 我找到一篇 Redux 的初學教學,是一個外國人寫的,我順便翻寫他所做的文章,也方便我釐清觀念。 Getting started with create...

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

技術 【Day 10 React】透過番茄計時器實作理解 React State and Lifecycle

之前我修了一堂 University of California, San Diego 開的線上課程 Learning How to Learn: Powerf...

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

技術 【Day9 React】從拆解電子名片學習 React Props #Part3

皮卡丘就這麼跑進我的文章裡。。。 目前我的專案長這樣~ 我一樣用電子名片這個專案來學習 React props 的運作原理,今天也會將我預先儲存在 json 裡...

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

技術 【Day8 React】從拆解電子名片學習 React Components #Part2

今天講解把如何模組化程式碼 前提:我們目前所有的程式碼都放在 index.html 裡面,分別嵌入了 React, React-dom, babel 的 CDN...

鐵人賽 Modern Web DAY 5

技術 撰寫邏輯 - You call library. Framework calls you.

前言 我偶而間看到了,一個提問,『react is library or framework?』,這句提問似乎,沒什麼特別,但仔細想想,其實也算是一個大問題。今...

鐵人賽 Modern Web DAY 4

技術 與APi 失聯 404 notFound 頁面跳轉製作

前言 最近測api時剛好斷線,想說這是一個好機會,就順手先加上api斷線時的頁面跳轉,下面講react-router-dom的 exact、strict的觀念r...