iT邦幫忙

react相關文章
共有 565 則文章
鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 5
I Want To Know React 系列 第 5

技術 I Want To Know React - Render React Element

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

鐵人賽 Modern Web DAY 4

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

[ 本日嘉賓:useTrail ] 這邊的 Trial 是「蹤跡」的意思唷~!不是指小徑。 想要元素們依序跟隨前一個元素做一樣的動作,就是要用這個 Hook...

鐵人賽 Modern Web DAY 4

技術 Day 4: 介紹 Server Side Render

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

鐵人賽 Modern Web DAY 4
ReactJS 疑難排解 系列 第 4

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

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

鐵人賽 Modern Web DAY 6

技術 仿Trello - 使用React Bootstrap

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

鐵人賽 Modern Web DAY 4
I Want To Know React 系列 第 4

技術 I Want To Know React - JSX 語法

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

鐵人賽 Modern Web DAY 3

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

[ 今天要介紹的是:useSprings ] 啊怎麼好像跟昨天一樣!(不不不,今天這個是詞尾有加 s 的,昨天的迷 U) 當我們有好幾個不同的元素(例如 l...

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 3
ReactJS 疑難排解 系列 第 3

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

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

鐵人賽 Modern Web DAY 5

技術 仿Trello - 添加 Stylesheets

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

鐵人賽 Modern Web DAY 3
I Want To Know React 系列 第 3

技術 I Want To Know React - 初探 JSX

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

鐵人賽 自我挑戰組 DAY 4

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

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

鐵人賽 Modern Web DAY 2

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

[ 本日的主角:useSpring ] 最基本款的 Hook,通常若沒什麼特別需求,選用這個就可以了 好的~!我不會鋪陳(也不知道要鋪陳什麼 ry),use...

鐵人賽 Modern Web DAY 4

技術 仿Trello - 建立React專案

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

鐵人賽 自我挑戰組 DAY 3

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

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

鐵人賽 Modern Web DAY 2
I Want To Know React 系列 第 2

技術 I Want To Know React - 初探 React

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

鐵人賽 Modern Web DAY 1

技術 Day01 ー react-spring 是什麼?~開場、目錄~

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 1
I Want To Know React 系列 第 1

技術 Why I Want To Know React

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 自我挑戰組 DAY 11
React基礎 系列 第 11

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

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

鐵人賽 自我挑戰組 DAY 10
React基礎 系列 第 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 自我挑戰組 DAY 9
React基礎 系列 第 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 自我挑戰組 DAY 8
React基礎 系列 第 8

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 7

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

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