iT邦幫忙

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

技術 Day 3 - Visual Studio Code 開發環境建置

上一章 Day 2 - Spring Boot 介紹, 開發工具與架構 Visual Studio Code 全新的開源IDE, 號稱一個IDE, 寫遍全語言...

鐵人賽 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 20
React - DOM界的彼方 系列 第 20

技術 Day 20: React篇: TodoList程式改造 => TodoApp

今天是鐵人賽的第20天,漫長的一個月旅程已經走完了3分之2,2017年只剩10多天就要到來。今天的主題是要來改造一下從前面一路學來的TodoList。為了專注...

鐵人賽 Modern Web DAY 16

技術 [Day 16 - 即時天氣] 定義並請求組件會使用到的資料 - useState 的更多使用

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

鐵人賽 Modern Web DAY 12

技術 【Day 12】Styled-component

原本今天要介紹其他主題的,但後來想想既然昨天都介紹 inline-style 了,今天就介紹另一種 styling 的方式 - styled-component...

鐵人賽 Modern Web DAY 8

技術 【Day 8】Class component && Functional component

今天與明天會來短暫介紹一下 class-based 的 component,今天將講解 class component 的基礎,也比較一下與 functiona...

鐵人賽 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 15

技術 [Day 15 - 即時天氣] 就是這個畫面 - 使用 Emotion 為組件增添 CSS 樣式

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

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

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

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

鐵人賽 Modern Web DAY 14

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

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

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

技術 Day 22: React篇: TodoApp程式 + 搜尋/過濾 + 排序

今天的主題是要加入搜尋、過濾與排序功能。這三個功能各有其重點,整個一起加進來會讓程式變得開始複雜,下面的解說就要仔細看了。 這個程式最後的呈現結果,就像下面的...

鐵人賽 Modern Web DAY 7

達標好文 技術 [Day 07 - 計數器] 幫計數器設個最大最小值吧 - JSX 中條件渲染的使用

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

鐵人賽 自我挑戰組 DAY 26

技術 【DAY 26】React-router,其它很有用的組件(上)

【前言】   倒數最後五篇~~一起加油吧! 【正文】   昨天講完Link,今天來講跟Link很常用到的其他組件八吧! Switch:用來包Route與Redi...

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

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

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

鐵人賽 Modern Web DAY 5

技術 Day04 | SCSS 加上 Webpack 混搭款,讓你寫 CSS 上天堂

前言 SCSS 是 CSS 的預處理器,就是替原本的 CSS 再加上一些強大的語法,讓我們在寫 CSS 的時候可以更加直觀,相關說明可以查閱 官方文檔 ,本篇就...

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

技術 [筆記][React]使用React開發的思考模式(1)-記得把共同狀態提升

前面幾篇文章把React基本的用法都說完了,剩下的就是該如何將它應用在實務面中,所以接下來我會試著和各位一同做出一些小作品,但是在那之前,我們得先了解如何正確的...

鐵人賽 Modern Web DAY 6

技術 Day 6 - Spring Data JPA 寫入與讀取資料

上一章 Day 5 - Spring Boot 啟動與測試 什麼是JPA? 全名Java Persistence API, 通過註解或XML描述, 來指定對象與...

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

技術 [筆記][React]使用React開發的思考模式(3)-最後來個小範例吧!

這一節我們來用前幾篇文章學到的一切來做個小範例吧!不知道大家在學網頁時,第一個嘗試的是什麼?當然這邊指的是除了Hello world!之外的XD,小弟我啊!遙想...

鐵人賽 Modern Web DAY 21

技術 [Day 21 - 即時天氣] 處理天氣圖示以及 useMemo 的使用

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

鐵人賽 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 4

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

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

鐵人賽 Modern Web DAY 27

技術 [Day 27 - 即時天氣] React 中的表單處理(Controlled vs Uncontrolled)以及 useRef 的使用

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

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

技術 [筆記][React]當React遇上Redux(2)-資料的傳遞方式

Hello!大家好!昨天初步認識了Redux後(真的非常初步XD),知道他如何管理資料了,那今天要來說說在Redux手上的資料該怎麼傳給React的組件!就請各...

徵才 [徵才]美商A10 Networks-FrontEnd Web Developer

【公司名稱】: 美商睿科網路科技有限公司 【公司地址】: 台北南港軟體園區三期 捷運南港展覽館站附近 台北市南港區三重路66號6樓 https://goo.gl...

鐵人賽 自我挑戰組 DAY 28

技術 【DAY 28】用react-loadable與react-router做code splitting吧

【前言】   第28天了....... 【正文】   雖著專案越來越大,我們要撰寫的js檔也越來越多,但最後我們都會在App.js(或是Root.js)去imp...

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

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

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

鐵人賽 Modern Web DAY 8

技術 Day 8 - Spring Data JPA 寫入與讀取資料 (3)

上一章 Day 7 - Spring Data JPA 寫入與讀取資料 (2) 新增完Model, 我們需要新增各別的Repository, 才能執行新增, 修...

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

技術 [筆記][React]當React遇上Redux(1)-初次見面

Hello!大家好啊!就算標題讓人搞不清楚狀況,但是點進來的時候應該還沒忘記昨天的成就感吧XD,為了能夠在最後獲得更大的滿足,今天再來開始繼續學習吧! 介紹R...