iT邦幫忙

react相關文章
共有 560 則文章
鐵人賽 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 12
Zero to hero with React.js 系列 第 12

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

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

鐵人賽 Modern Web DAY 9

技術 React-Redux 表單練習

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

鐵人賽 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 componen...

鐵人賽 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 的 CD...

鐵人賽 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的觀念...

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

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

把整張名片作為一個 component 每一個 component 外層都會用一個 class 包起來。extends 指的是 React.component...

鐵人賽 Modern Web DAY 3

技術 瀑布流(Masonry layout)卡片排版

前言 經典的排版設計,最近需要刻瀑布式卡片設計,目前還在調教中... CSS 樣式 我是用styled-components 撰寫 所以看起來有點不一樣,但是在...

技術 怎麼import 資料夾內圖片?

前言 不要笑!! 我還真的不知道,我圖片通常都傳上免空在下載,但難免還是要回到最基本的觀念, 但其實跟以往的做法一樣,只是會因為React的資料夾結構,產生不...

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

技術 【Day6 React】學習都是從觀摩他人的 code 開始

Codepen 是寶庫!! 我是一個喜歡把玩顏色、嘗試各種介面風格的人,因此 codepen 是我經常使用的工具,更棒的是,可以在上面看到各種高手,用著千奇...

鐵人賽 Modern Web DAY 2

技術 組件間通訊 this.state this.props refs

前言 當我們初入React後,最容易遇到的問題就是組件間的通訊,算是第一大魔王拉,目前也只能跌跌撞撞慢慢找出攻略法。 目前看到寫比較完整的文章 參考 state...

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

技術 【Day5 React】render 一個會動的 React 日曆

日曆 DEMO 時間誠可貴,參加鐵人賽方得時間更加珍貴 我們可以直接把要呈現在 DOM 的內容直接寫在 ReactDOM.render() ,不過通常我們...

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

技術 【Day4 React】終於跟 World 說 Hello World!

簡易起手式,我使用 CDN 引入 React 來理解 React 的運作原理 我們需要的 CDN 有三個: 最基本的 React CDN React 在 0....

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

技術 【Day3 React】認識 JSX Syntax

理解 JSX 在撰寫 React Component 的時候,使用 JSX 可以提高程式撰寫的效率。JSX(JavaScript Extention)並不是一種...

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

技術 【Day2 React】React 環境設定 採用 Webpack 和 Babel

一個 React 的專案中我們需要什麼樣的函式庫? React.js core library React DOM library 這次不僅學習 React...

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

達標好文 技術 【Day1 React】What the hell is React?

鼓起勇氣挑一個沒有接觸過的 ReactJS 來挑戰 希望在這30天內可以盡最大所能挖掘 React 的奧秘! 作品懶人包 由於我喜歡嘗試各種新的可能 因此在這3...

鐵人賽 Modern Web DAY 3
每日文章推薦 系列 第 3

技術 Day3 為何是看中文的為主

原因 閱讀速度 同樣長度 中文的我可能看五分鐘 英文的可能要花上三倍時間 這麼多的文章要看我當然也只能有中文的先看中文 數量 我一天大概是看三四十篇文章 只認真...

技術 [筆記]動態<input type="file" /> 新增&刪除&圖片預覽-React.js

開頭 基礎 使用javascript 透過按鈕新增刪除欄位 進階 新增圖片並有圖片預覽功能 基礎 Demo: https://codepen.io/Cand...

技術 [TaichungBike] 公共腳踏車租借查詢 - React

TaichungBike 這個專案主要是用來練習React串接API,目的是要做一個各縣市公共腳踏車租借情況的立即查詢應用,往後會持續改善成一個Product。...

技術 redux-saga 學習筆記 (1)

為什麼要學習 redux-saga 主要用於管理 redux 中,非同步的 action 其他可選套件 redux-loop redux-thunk r...

鐵人賽 Modern Web DAY 30

技術 Day 30, 最後一天來個RRRR的總結。

鐵人賽最後一天了,也是我這系列的最後一篇文章。 在我的號召之下,公司其他兩位同事也一起參加鐵人賽,順便PO上他們的文章: 美術篇: http://ithelp...