iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 337 瀏覽

鐵人賽 Modern Web DAY 17

I Want To Know React 系列第 17 篇

技術 I Want To Know React - 初探 Key

在上一篇中，我們介紹了 React render list 的語法，其中提及了 render React element list 時都必須要加上 key pr...

Henry Chang ‧ 2020-10-02 ‧團隊404 Not Found

1 Like 0 留言 516 瀏覽

鐵人賽 Modern Web DAY 17

從比入門再往前一點開始，一直到深入React.js 系列第 17 篇

技術【Day.17】React入門 - 利用useContext進行多層component溝通

我們完成了分頁，完成了用React製作的一個Menu和MenuItem，看似一切都大功告成了。然而不幸的是，這個時候客戶打來了一通電話: 欸!我想讓Menu...

Andy Chang ‧ 2020-10-02

1 Like 0 留言 729 瀏覽

鐵人賽 Modern Web DAY 17

循序漸進學習 Javascript 測試系列第 17 篇

技術 Day 17 測試 React 元件：使用 React Testing Library 測試元件的狀態

昨天我們學習了如何在測試裡 render 元件，並使用 testing library 家族的 jest-dom 及 dom-testing-library 來...

TWGD ‧ 2020-10-02

1 Like 0 留言 186 瀏覽

鐵人賽 Modern Web DAY 16

從 0 開始建一個 Static Site Generator 系列第 16 篇

技術 Day 16: 重新載入 js

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-10-01

1 Like 0 留言 930 瀏覽

鐵人賽 Modern Web DAY 16

循序漸進學習 Javascript 測試系列第 16 篇

技術 Day 16 測試 React 元件：render 元件及使用 Jest DOM & dom-testing-library

使用 ReactDOM 來 Render 被測試元件假設現在有一個 <FavoriteNumber /> 元件，我們要測試它是否有 render...

TWGD ‧ 2020-10-01

1 Like 0 留言 497 瀏覽

鐵人賽 Modern Web DAY 16

I Want To Know React 系列第 16 篇

技術 I Want To Know React - Render list

React render list 使用情境在撰寫前端頁面常常會需要把 list 中的內容全部顯示到畫面上。舉例來說，我們可能會需要把一個 list（Arr...

Henry Chang ‧ 2020-10-01 ‧團隊404 Not Found

1 Like 0 留言 755 瀏覽

鐵人賽 Modern Web DAY 16

從比入門再往前一點開始，一直到深入React.js 系列第 16 篇

技術【Day.16】React入門 - 想要分頁? react-router-dom

在過去，當我們要製作「分頁」時，多半是新增一個靜態HTML檔，讓web server根據檔案路徑去尋找，或是透過後端程式碼去定義什麼url要對應到哪個HTML檔...

Andy Chang ‧ 2020-10-01

0 Like 0 留言 442 瀏覽

鐵人賽 Modern Web DAY 18

React + GraphQL 全端練習筆記系列第 18 篇

技術仿Trello - 串接Unsplash API

本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 T...

Jasper ‧ 2020-10-01 ‧團隊Outcome First

1 Like 0 留言 286 瀏覽

鐵人賽 Modern Web DAY 15

從 0 開始建一個 Static Site Generator 系列第 15 篇

技術 Day 15: Universal Javascript

在 SSR 誕生時就出現了一種對於某種程式碼的稱呼 Isomorphic Javascript ，這種程式碼會把與環境相關的部份包裝成同樣的 API ，並靠著...

DanSnow ‧ 2020-09-30

1 Like 0 留言 739 瀏覽

鐵人賽 Modern Web DAY 15

從比入門再往前一點開始，一直到深入React.js 系列第 15 篇

技術【Day.15】React入門 - 非控制組件與useRef

reference，中文翻譯是「參考」。聽起來好像有點奇怪，但他在程式中一般是指「變數指向的記憶體位置上對應到的值」。超級複雜的啦。簡單來說可以想像成是...

Andy Chang ‧ 2020-09-30

0 Like 0 留言 432 瀏覽

鐵人賽 Modern Web DAY 17

React + GraphQL 全端練習筆記系列第 17 篇

技術仿Trello - 客製化拖曳圖示

本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。目...

Jasper ‧ 2020-09-30 ‧團隊Outcome First

1 Like 0 留言 291 瀏覽

鐵人賽 Modern Web DAY 15

I Want To Know React 系列第 15 篇

技術 I Want To Know React - 條件 render

React 條件 render 使用情境在撰寫前端頁面時，常常需要根據不同的 props / state 資料顯示不同的 element。舉例來說，使用者尚...

Henry Chang ‧ 2020-09-30 ‧團隊404 Not Found

1 Like 0 留言 1688 瀏覽

鐵人賽自我挑戰組 DAY 22

不前不後，不上不下，一個曾經交大資工書卷的軟體工程師成長之路系列第 22 篇

技術美好的幻覺：Frontend 前端

先分享下 Frontend 的發音 https://www.youtube.com/watch?v=ZdtpKFbhTtk 記得是 Frontend 不是 Fr...

Mike Fang ‧ 2020-09-30

1 Like 0 留言 234 瀏覽

鐵人賽 Modern Web DAY 14

從 0 開始建一個 Static Site Generator 系列第 14 篇

技術 Day 14: 用 Helmet 管理 head 的內容

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-09-29

1 Like 1 留言 1149 瀏覽

鐵人賽 Modern Web DAY 14

從比入門再往前一點開始，一直到深入React.js 系列第 14 篇

技術【Day.14】React入門 - 輸入元素與控制組件

React 在輸入元素的處理上有一些比較特別的地方，先前我們已經使用過onClick()，這篇我們來一次講全部輸入元素。事件處理 onClick 之前都用過。...

Andy Chang ‧ 2020-09-29

0 Like 0 留言 283 瀏覽

鐵人賽 Modern Web DAY 29

以 Kotlin 為主要語言建構基本的 Online Judge 系統系列第 29 篇

技術 Day 29：批改系統網頁 (11) – 重新審核程式碼功能與其他雜項

昨日基本上我們已經完成了大致的 Online Judge 系統，剩下基本上就是看你打算要怎麼設計你的 Online Judge 系統來決定該怎麼打造你前端網頁...

灆洢 a.k.a Maplewing ‧ 2020-09-29

0 Like 0 留言 601 瀏覽

鐵人賽 Modern Web DAY 16

React + GraphQL 全端練習筆記系列第 16 篇

技術仿Trello - 用React DnD製作拖放(drop)功能

本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。有...

Jasper ‧ 2020-09-29 ‧團隊Outcome First

1 Like 0 留言 479 瀏覽

鐵人賽 Modern Web DAY 14

I Want To Know React 系列第 14 篇

技術 I Want To Know React - 正確使用 Event handler

在上一篇中介紹了 JSX Event 的使用方式，在本章節我們將近一步了解在 class component 中使用 event handler 的常見問題、對...

Henry Chang ‧ 2020-09-29 ‧團隊404 Not Found

1 Like 0 留言 135 瀏覽

鐵人賽 Modern Web DAY 13

從 0 開始建一個 Static Site Generator 系列第 13 篇

技術 Day 13: html 樣版與 eta.js

目前我們產生的 html 是寫死在程式中的，這篇要來讓使用者可以透過 ejs 的方式寫自己的樣版，不過我們實際要用的樣版引擎不是 ejs 而是 eta.js ，...

DanSnow ‧ 2020-09-28

0 Like 0 留言 2410 瀏覽

鐵人賽 Modern Web DAY 15

前端工程師一起來種一棵後端技能樹吧！系列第 15 篇

技術 [Day 15] Server-Side-Rendering - (2) feat. Next.js

前一天介紹了 SSR 基本概念，今天則是要介紹 React 最有名的 SSR 框架：Next.js。今天不是要來講 Next.js 怎麼使用，畢竟網路上學習資...

莫力全 Kyle Mo ‧ 2020-09-28 ‧團隊不要搶我隊友

1 Like 0 留言 844 瀏覽

鐵人賽 Modern Web DAY 15

React + GraphQL 全端練習筆記系列第 15 篇

技術仿Trello - 用React DnD製作拖曳(drag)功能

本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 R...

Jasper ‧ 2020-09-28 ‧團隊Outcome First

0 Like 0 留言 406 瀏覽

鐵人賽 Modern Web DAY 28

以 Kotlin 為主要語言建構基本的 Online Judge 系統系列第 28 篇

技術 Day 28：批改系統網頁 (10) – 製作操作資料相關頁面

昨天我們將獲取資料的網頁部分給完成了，今天就讓我們繼續將操作資料的網頁部分給完成吧！表單輸入元件在操作資料的部分，很常會使用到一些 <input&g...

灆洢 a.k.a Maplewing ‧ 2020-09-28

1 Like 0 留言 324 瀏覽

鐵人賽 Modern Web DAY 13

I Want To Know React 系列第 13 篇

技術 I Want To Know React - 處理 Event

如 HTML 一樣，JSX 也提供了處理 DOM event 的方法。就讓我們來了解一下語法吧！ JSX 處理 event 語法 JSX 註冊 event 語法...

Henry Chang ‧ 2020-09-28 ‧團隊404 Not Found

1 Like 0 留言 144 瀏覽

鐵人賽 Modern Web DAY 12

從 0 開始建一個 Static Site Generator 系列第 12 篇

技術 Day 12: 動態路由

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-09-27

1 Like 0 留言 726 瀏覽

鐵人賽 Modern Web DAY 12

從比入門再往前一點開始，一直到深入React.js 系列第 12 篇

技術【Day.12】React入門 - useState與解構賦值後的props

還記得在Day.04我們實作的觀察者模式嗎? 由於這種「當某個JS變數改變時，有很多DOM元素需要被改變」的功能很常被使用，React將其拉了出來做成獨立的AP...

Andy Chang ‧ 2020-09-27

0 Like 0 留言 326 瀏覽

鐵人賽 Modern Web DAY 27

以 Kotlin 為主要語言建構基本的 Online Judge 系統系列第 27 篇

技術 Day 27：批改系統網頁 (9) – 製作取得資料相關頁面

昨天我們完成了登入與登出相關的操作，接下來就讓我們一步一步完成接下來的頁面吧！題目總列表頁面首先先讓我們從獲得題目總列表的資料來顯示的頁面開始吧！雖然我們...

灆洢 a.k.a Maplewing ‧ 2020-09-27

0 Like 0 留言 375 瀏覽

鐵人賽 Modern Web DAY 14

React + GraphQL 全端練習筆記系列第 14 篇

技術仿Trello - 製作reducer

本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 S...

Jasper ‧ 2020-09-27 ‧團隊Outcome First

1 Like 1 留言 539 瀏覽

鐵人賽 Modern Web DAY 12

I Want To Know React 系列第 12 篇

技術 I Want To Know React - Lifecycle 階段

回顧 React Lifecycle 在上個章節中，我們了解了 React component instance 的生命週期（Lifecycle）代表一個 co...

Henry Chang ‧ 2020-09-27 ‧團隊404 Not Found

0 Like 0 留言 2486 瀏覽

鐵人賽 Modern Web DAY 14

前端工程師一起來種一棵後端技能樹吧！系列第 14 篇

技術 [Day 14] Server-Side-Rendering - (1)

最近在 Frontend 技術圈裡，Server-Side-Rendering（SSR）可說是一個越來越火熱的概念，剛好現在工作上的架構就是使用 Next.j...

莫力全 Kyle Mo ‧ 2020-09-27 ‧團隊不要搶我隊友

1 Like 0 留言 321 瀏覽

鐵人賽 Software Development DAY 11

前端工程師不能不知道的生產力工具系列第 11 篇

技術 [Day11] 瀏覽器開發工具 - 擴充功能篇

雖然開發者工具中已經提供相當豐富的功能，也一直持續發展中。不過 Google 有開放提供可裝在開發者工具的擴充功能的 API，像是目前大多主流的前端框架的開發者...

YURI ‧ 2020-09-26

技術 I Want To Know React - 初探 Key

技術 【Day.17】React入門 - 利用useContext進行多層component溝通

技術 Day 17 測試 React 元件：使用 React Testing Library 測試元件的狀態

技術 Day 16: 重新載入 js

技術 Day 16 測試 React 元件：render 元件及使用 Jest DOM & dom-testing-library

技術 I Want To Know React - Render list

技術 【Day.16】React入門 - 想要分頁? react-router-dom

技術 仿Trello - 串接Unsplash API

技術 Day 15: Universal Javascript

技術 【Day.15】React入門 - 非控制組件與useRef

技術 仿Trello - 客製化拖曳圖示

技術 I Want To Know React - 條件 render

技術 美好的幻覺：Frontend 前端

技術 Day 14: 用 Helmet 管理 head 的內容

技術 【Day.14】React入門 - 輸入元素與控制組件

技術 Day 29：批改系統網頁 (11) – 重新審核程式碼功能與其他雜項

技術 仿Trello - 用React DnD製作拖放(drop)功能

技術 I Want To Know React - 正確使用 Event handler

技術 Day 13: html 樣版與 eta.js

技術 [Day 15] Server-Side-Rendering - (2) feat. Next.js

技術 仿Trello - 用React DnD製作拖曳(drag)功能

技術 Day 28：批改系統網頁 (10) – 製作操作資料相關頁面

技術 I Want To Know React - 處理 Event

技術 Day 12: 動態路由

技術 【Day.12】React入門 - useState與解構賦值後的props

技術 Day 27：批改系統網頁 (9) – 製作取得資料相關頁面

技術 仿Trello - 製作reducer

技術 I Want To Know React - Lifecycle 階段

技術 [Day 14] Server-Side-Rendering - (1)

技術 [Day11] 瀏覽器開發工具 - 擴充功能篇

At

技術【Day.17】React入門 - 利用useContext進行多層component溝通

技術【Day.16】React入門 - 想要分頁? react-router-dom

技術仿Trello - 串接Unsplash API

技術【Day.15】React入門 - 非控制組件與useRef

技術仿Trello - 客製化拖曳圖示

技術美好的幻覺：Frontend 前端

技術【Day.14】React入門 - 輸入元素與控制組件

技術仿Trello - 用React DnD製作拖放(drop)功能

技術仿Trello - 用React DnD製作拖曳(drag)功能

技術【Day.12】React入門 - useState與解構賦值後的props

技術仿Trello - 製作reducer