iT邦幫忙

react相關文章
共有 1745 則文章
鐵人賽 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 撰寫 所以看起來有點不一樣,但是在...

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

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

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

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

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

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 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 3
每日文章推薦 系列 第 3

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

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

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

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

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

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

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

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

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

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

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

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29

技術 Day 29, Deploy上heroku吧!

終於到了今天,要push上heroku了。 本文參考官方文件實作: Rails 5 and Heroku: https://devcenter.heroku...

鐵人賽 Modern Web DAY 28

技術 Day 28 - 30 天 Progressive Web App 學習筆記 - To-Do List 搭配 React + Redux 實作 PWA

接下來 3 篇文章的目標是以 React + Redux + Webpack 的技術來完成 To-Do List 功能與 PWA,而內容會假設讀者已經熟悉 Re...

鐵人賽 Modern Web DAY 27

技術 Day 27:React Native 除錯

前言 前一篇寫單元測試的目的之一就是讓除錯變得容易一點,但實際在除錯的時候還是得掌握一些可以使用的工具,尤其是對寫 Web 習慣的開發者來說,一開始的時候看不到...

鐵人賽 Modern Web DAY 27

技術 Day 27 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - 完成 React + Redux 專案架構與功能

接下來 3 篇文章的目標是以 React + Redux + Webpack 的技術來完成 To-Do List 功能與 PWA,而內容會假設讀者已經熟悉 Re...

鐵人賽 Modern Web DAY 26

技術 Day 26 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - React + Redux + Webpack 環境建置

接下來 3 篇文章的目標是以 React + Redux + Webpack 的技術來完成 To-Do List 功能與 PWA,而內容會假設讀者已經熟悉 Re...

鐵人賽 Modern Web DAY 25

技術 Day 25:實作 Navigation 與 Drawer

前言 前一篇在 App 上呈現 Github User 頁面,必須使用 GraphQL Query,這篇想要來嘗試實作一個使用 GraphQL Mutation...

鐵人賽 Modern Web DAY 24

技術 Day 24:在 App 上呈現 Github User 頁面

前言 前一篇拼死拼活的才把 Token 拿回來,這篇要來用 Token 拿資料回來顯示 User 的頁面。 準備 GraphQL Client 經過一段考慮後,...

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

技術 Day 19, Reading List - React部分-1

說好補上就補上! 先加上rails books_controller.rb的home... def home @books = {books: Bo...

鐵人賽 Modern Web DAY 30
React - DOM界的彼方 系列 第 30

技術 Day 30: 回顧2016年,台灣前端開發社群分析與未來期許

&quot;The more you know, the more you know you don’t know.&quot; - Aristotle &q...

鐵人賽 Modern Web DAY 23

技術 換一種思考方式:React

換一種思考方式:React 假設你現在要寫一個可以管理 Todo List 的前端程式,你會怎麼寫?需要的功能大概有下面這幾個: 新增 todo 刪除 tod...

鐵人賽 Modern Web DAY 29
React - DOM界的彼方 系列 第 29

技術 Day 29: Redux篇: TodoApp改用Redux整合

今天的主題是在Redux中的最後一篇,我們將把之前React篇最後完成的TodoApp,改用Redux來管理應用程式領域的狀態。 註: 本文章同步放置於Gi...

鐵人賽 Modern Web DAY 14

技術 Day 14, React components 各種寫Component的方法

今天講三種component的建立方式,也是看網路上的Demo常用的,我這邊會寫三個一樣的Component,讓大家看看彼此間的互換。 最簡單的 extends...

鐵人賽 Modern Web DAY 14

技術 Day 14:編輯的藝術 - TextInput 與 Keyboard

前言 手機不是很好打字,如果可以用更簡單的方式搞定就應該盡量避免打字,但很多時候還是必須要讓使用者輸入,例如:回留言、寫筆記、填表單、搜尋,等等,因此還是必須熟...

鐵人賽 Modern Web DAY 13

技術 Day 13:Navigation Part II:新的 API - NavigationExperimental

前言 Product Pain 是 React Native 聆聽社群聲音的重要平台,而在上面 Navigator 是個知名的「Pain」,也催生了 Navig...

鐵人賽 Modern Web DAY 28
React - DOM界的彼方 系列 第 28

技術 Day 28: Redux篇: 使用middleware(中介軟體)處理異步動作

今天的主題是在Redux中處理副作用,我們要使用的是一個稱為middleware(中介軟體)的技巧來作,這在Redux裡就有內建這個設計了。以目前來說,mid...