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

0 Like 0 留言 194 瀏覽

鐵人賽 Modern Web DAY 7

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

技術仿Trello - 建立基礎 List 部件

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

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

1 Like 0 留言 242 瀏覽

鐵人賽 Modern Web DAY 5

I Want To Know React 系列第 5 篇

技術 I Want To Know React - Render React Element

在上兩個篇章：初探 JSX 與 JSX 語法中，我們已經了解了 JSX 的由來、功能、內部原理以及語法了。在這個篇章中，我們將要學習如何把 React elem...

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

0 Like 0 留言 213 瀏覽

鐵人賽 Modern Web DAY 4

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 4 篇

技術 Day04 ー react-spring 的 Hooks API 其之 ③ ～useTrail～

［本日嘉賓：useTrail ］這邊的 Trial 是「蹤跡」的意思唷～！不是指小徑。想要元素們依序跟隨前一個元素做一樣的動作，就是要用這個 Hook...

Juri ‧ 2020-09-19

1 Like 0 留言 232 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 Day 4: 介紹 Server Side Render

React 的 server side renderer 是在 react-dom 這個套件的 react-dom/server 下，API 就只包含 4 個函...

DanSnow ‧ 2020-09-19

0 Like 1 留言 187 瀏覽

鐵人賽 Modern Web DAY 4

ReactJS 疑難排解系列第 4 篇

技術 ReactJS 疑難排解：會報錯的 console.log(event)

寫了多年的 js ，遇到不熟悉的使用情境大家肯定會先 console.log 一下曾經在 onChange event handler 中印過 event 是...

maxam ‧ 2020-09-19

0 Like 0 留言 420 瀏覽

鐵人賽 Modern Web DAY 6

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

技術仿Trello - 使用React Bootstrap

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

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

1 Like 0 留言 270 瀏覽

鐵人賽 Modern Web DAY 4

I Want To Know React 系列第 4 篇

技術 I Want To Know React - JSX 語法

回顧 JSX 從上一個篇章：初探 JSX 中，我們了解到 JSX 是一種 JavaScript 的擴充語法，支援在 JavaScript 中撰寫 HTML-li...

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

0 Like 0 留言 236 瀏覽

鐵人賽 Modern Web DAY 3

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 3 篇

技術 Day03 ー react-spring 的 Hooks API 其之 ② ～useSprings～

［今天要介紹的是：useSprings ］啊怎麼好像跟昨天一樣！（不不不，今天這個是詞尾有加 s 的，昨天的迷 U）當我們有好幾個不同的元素（例如 l...

Juri ‧ 2020-09-18

1 Like 0 留言 212 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 Day 3: React 介紹與建構環境

這篇與之後的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-gene...

DanSnow ‧ 2020-09-18

0 Like 1 留言 188 瀏覽

鐵人賽 Modern Web DAY 3

ReactJS 疑難排解系列第 3 篇

技術 ReactJS 疑難排解：為什麼按下取消，form 卻 submit 了

先來看一段簡單的 code <form onSubmit={handleSubmit}> ... <button onClick={h...

maxam ‧ 2020-09-18

0 Like 0 留言 229 瀏覽

鐵人賽 Modern Web DAY 5

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

技術仿Trello - 添加 Stylesheets

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

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

1 Like 0 留言 250 瀏覽

鐵人賽 Modern Web DAY 3

I Want To Know React 系列第 3 篇

技術 I Want To Know React - 初探 JSX

簡介 JSX JSX 全名為 JavaScript XML，是一種 JavaScript 的擴充語法，支援在 JavaScript 中撰寫 HTML-like/...

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

0 Like 0 留言 126 瀏覽

鐵人賽自我挑戰組 DAY 4

不用前端框架手把手打造基礎SPA網站系列第 4 篇

技術 [DAY04]淺談前端SPA框架-以React為例(下篇)

在了解什麼是render後，傑森從React官網看到另一個範例，有段文字這樣寫道: Component 使你可以將 UI 拆分成獨立且可複用的程式碼什麼是...

yellow_river ‧ 2020-09-18

0 Like 0 留言 247 瀏覽

鐵人賽 Modern Web DAY 2

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 2 篇

技術 Day02 ー react-spring 的 Hooks API 其之 ① ～useSpring～

［本日的主角：useSpring ］最基本款的 Hook，通常若沒什麼特別需求，選用這個就可以了好的～！我不會鋪陳（也不知道要鋪陳什麼 ry），use...

Juri ‧ 2020-09-17

0 Like 0 留言 205 瀏覽

鐵人賽 Modern Web DAY 4

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

技術仿Trello - 建立React專案

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

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

0 Like 0 留言 225 瀏覽

鐵人賽自我挑戰組 DAY 3

不用前端框架手把手打造基礎SPA網站系列第 3 篇

技術 [DAY03]淺談前端SPA框架-以React為例(上篇)

既然要自己寫SPA，我們先來談談前端框架，本文分成上下篇，這邊重點不在教會你使用，而是想告訴你框架做了些什麼，以下用React來當例子: 傑森是一名網頁設計師，...

yellow_river ‧ 2020-09-17

1 Like 0 留言 244 瀏覽

鐵人賽 Modern Web DAY 2

I Want To Know React 系列第 2 篇

技術 I Want To Know React - 初探 React

簡介 React React 是一個用來製作 UI（User Interface, 使用者介面）的 JavaScript 函式庫，旨在用更簡易快速的方式建構前端...

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

0 Like 0 留言 417 瀏覽

鐵人賽 Modern Web DAY 1

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 1 篇

技術 Day01 ー react-spring 是什麼？～開場、目錄～

［首先，簡單自介 & 開場 (灬ºωº灬) ］由於自己的經歷跟別人很不一樣，覺得有必要自介一下這樣～淡水某私立大學日文系畢業，女生。日文程度...

Juri ‧ 2020-09-16

0 Like 0 留言 208 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 React 基礎簡介 - Props，State與事件處理

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

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

2 Like 0 留言 240 瀏覽

鐵人賽 Modern Web DAY 1

I Want To Know React 系列第 1 篇

技術 Why I Want To Know React

回到斯巴達鐵人賽的動機距離上次參加 ITHome 鐵人賽已經三年多了，連續 30 天輸出文章的高壓洗禮仍歷歷在目，但在寫鐵人賽的題目： I Want To K...

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

0 Like 0 留言 220 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 React 基礎簡介 - React Component 與 Hooks

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

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

2 Like 0 留言 226 瀏覽

鐵人賽 Modern Web DAY 1

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

技術 React 基礎簡介 - React element與JSX

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

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

0 Like 0 留言 298 瀏覽

鐵人賽自我挑戰組 DAY 11

React基礎系列第 11 篇

技術第十一天，React的props與state(上)

React的props與state(上) props 的資料結構就是一個物件JavaScript Object，就像是var props={name:'jack...

jbuduoo ‧ 2020-09-11

0 Like 0 留言 213 瀏覽

鐵人賽自我挑戰組 DAY 10

React基礎系列第 10 篇

技術第10天，React三種使用CSS方法

React三種使用CSS方法一、在檔案中寫寫css的第一個作法 Header.js import React from "react";...

jbuduoo ‧ 2020-09-10

0 Like 0 留言 266 瀏覽

鐵人賽 Modern Web DAY 9

我不用Expo啦，React Native！系列第 9 篇

技術 [Day9] Redux：我是大家的無人機

今日關鍵字：無人...Redux 假如有一天，你在家煮了咖哩不小心煮了太多想分給對面的人如果是以前都是平房時直接走過去就好如果場景變換成現代你住...

b97201019 ‧ 2020-09-09

0 Like 0 留言 164 瀏覽

鐵人賽自我挑戰組 DAY 9

React基礎系列第 9 篇

技術第九天，React 元件的生命周期:

React 元件的生命周期: 這是用console.log跑程式所出來的順序，數字是記錄而已。 1.constructor:初始化 4.render:在網頁上輸...

jbuduoo ‧ 2020-09-09

0 Like 0 留言 351 瀏覽

鐵人賽 Modern Web DAY 8

我不用Expo啦，React Native！系列第 8 篇

技術 [Day8] 輪播：神奇的上下交錯

今日關鍵字：carousel 接續昨天把資料整理好了今天要把資料呈現在畫面上（不過這裡我想的輪播其實跟一般的輪播不同,沒有要自動播放總之先來找找看）...

b97201019 ‧ 2020-09-08

0 Like 0 留言 240 瀏覽

鐵人賽自我挑戰組 DAY 8

React基礎系列第 8 篇

技術第八天，React圖文元件，重覆使用

React圖文元件，重覆使用利用一個元件，傳入多個網路圖片位置及文件名稱，做成類似相冊的東西。匯入元件使用「import SrcTest from './...

jbuduoo ‧ 2020-09-08

0 Like 0 留言 472 瀏覽

鐵人賽 Modern Web DAY 6

從0到1： 5個月轉職工程師大挑戰系列第 7 篇

技術 Day 7: 接續 Create-react-app: What's in my folder? { D3 }

接續昨天用 create-react-app 開啟專案之後，今天要來看看我們的專案資料庫裡面有什麼東西！ What’s in my folders? 1....

Roy Wang ‧ 2020-09-07

0 Like 0 留言 306 瀏覽

鐵人賽 Modern Web DAY 7

我不用Expo啦，React Native！系列第 7 篇

技術 [Day7] 訂定資料格式-2

今日關鍵字：interface 建立動畫格式延續昨天的interface 首先幫我的動畫資料訂定格式這時如果要設定一個動畫陣列 [Anime1 ,Ani...

b97201019 ‧ 2020-09-07

技術 仿Trello - 建立基礎 List 部件

技術 I Want To Know React - Render React Element

技術 Day04 ー react-spring 的 Hooks API 其之 ③ ～useTrail～

技術 Day 4: 介紹 Server Side Render

技術 ReactJS 疑難排解：會報錯的 console.log(event)

技術 仿Trello - 使用React Bootstrap

技術 I Want To Know React - JSX 語法

技術 Day03 ー react-spring 的 Hooks API 其之 ② ～useSprings～

技術 Day 3: React 介紹與建構環境

技術 ReactJS 疑難排解：為什麼按下取消，form 卻 submit 了

技術 仿Trello - 添加 Stylesheets

技術 I Want To Know React - 初探 JSX

技術 [DAY04]淺談前端SPA框架-以React為例(下篇)

技術 Day02 ー react-spring 的 Hooks API 其之 ① ～useSpring～

技術 仿Trello - 建立React專案

技術 [DAY03]淺談前端SPA框架-以React為例(上篇)

技術 I Want To Know React - 初探 React

技術 Day01 ー react-spring 是什麼？～開場、目錄～

技術 React 基礎簡介 - Props，State與事件處理

技術 Why I Want To Know React

技術 React 基礎簡介 - React Component 與 Hooks

技術 React 基礎簡介 - React element與JSX

技術 第十一天，React的props與state(上)

技術 第10天，React三種使用CSS方法

技術 [Day9] Redux：我是大家的無人機

技術 第九天，React 元件的生命周期:

技術 [Day8] 輪播：神奇的上下交錯

技術 第八天，React圖文元件，重覆使用

技術 Day 7: 接續 Create-react-app: What's in my folder? { D3 }

技術 [Day7] 訂定資料格式-2

At

技術仿Trello - 建立基礎 List 部件

技術仿Trello - 使用React Bootstrap

技術仿Trello - 添加 Stylesheets

技術仿Trello - 建立React專案

技術第十一天，React的props與state(上)

技術第10天，React三種使用CSS方法

技術第九天，React 元件的生命周期:

技術第八天，React圖文元件，重覆使用