iT邦幫忙

reactjs相關文章
共有 711 則文章
鐵人賽 Modern Web DAY 18

技術 【Day18】導航元件 - Breadcrumb

元件介紹 Breadcrumb 是一個導航元件,用於顯示當前系統層級結構中的路徑位置,並且點擊路徑能返回之前的頁面。在系統有多個層級架構,並且希望能幫助用戶清楚...

鐵人賽 Modern Web DAY 17

技術 【Day17】數據展示元件 - Infinite scroll

元件介紹 Infinite scroll 能在面對多筆資料時,讓捲軸滑動到底部時再載入下一頁面的資料。 由於一次性向後端取得大批的資料,對於後端的資料計算、資料...

鐵人賽 Modern Web DAY 18

技術 DAY18-Mongo db atlas realm

前言: 昨天我們介紹了如何使用Mongodb atlas的一些最基本的功能,今天我們要更進一步介紹怎麼使用realm、怎麼寫出簡單的api,以及將架在Realm...

鐵人賽 影片教學 DAY 30

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day30 社群網站上線啦!

終於完賽了!感謝支持與追蹤這一系列影片的朋友們!希望未來有機會可以再拍其他主題的影片和大家分享! 連續 30 天不中斷每天上傳一支教學影片,教你如何用 Rea...

鐵人賽 Modern Web DAY 15

技術 Day15 X Tree Shaking

在昨天我們學會了 code splitting 與 dynamic import 的技巧,讓程式在打包時可以形成好幾個 bundle chunks,並在真的需...

鐵人賽 Modern Web DAY 16

技術 【Day16】數據展示元件 - Table

元件介紹 Table 顧名思義就是一個表格元件,用來整齊的顯示行列數據。 參考設計 & 屬性分析 我自己覺得 table 是一個還蠻繁瑣的元件,要組成一...

鐵人賽 Modern Web DAY 14
30天學 React.js 系列 第 14

技術 [Day14][筆記] React 事件處理

重點整理 事件命名上必須使用小駝峰,且為 String 事件中必須放一個回傳 Function return ( <button onClick...

鐵人賽 影片教學 DAY 29

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day29 搜尋文章

連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...

鐵人賽 Modern Web DAY 13
30天學 React.js 系列 第 13

技術 [Day13] [筆記]React Hooks-UseReducer

簡介 useReducer 簡單來說就是 useState 進階用法。而且寫法上其實跟 Redux 差異不大。我們就直接來看範例吧 寫法如下: const [s...

鐵人賽 Modern Web DAY 15

技術 【Day15】數據展示元件 - Carousel

元件介紹 Carousel 是一個像旋轉木馬一樣會輪流轉的輪播元件。在一個內容空間有限的可視範圍中進行內容的輪播展示。通常適用於一組圖片或是卡片的輪播。 Car...

鐵人賽 影片教學 DAY 28

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day28 留言電子郵件通知

連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...

鐵人賽 Modern Web DAY 12
30天學 React.js 系列 第 12

技術 [Day12] [筆記]React Hooks - UseContent

前言 介紹 useContext 前,我們必須先認識 Context。 Context 概念有點像是 React 的全域變數概念,像是使用者登入狀態、樣式等等。...

鐵人賽 Modern Web DAY 14

技術 【Day14】數據展示元件 - Card

元件介紹 Card 是一個可以顯示單個主題內容及操作的元件,通常這個主題內容包含圖片、標題、描述或是一些操作。 例如在電商網站,一個商品或需要包含商品圖片、商品...

鐵人賽 影片教學 DAY 27

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day27 無限捲動讀取文章列表

連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...

鐵人賽 Modern Web DAY 11

技術 Day 11 state & props -2

第十一天囉~ 昨天我們說到 state , 那我們如何去改變 state 呢? 當我們直接改動 state , 會發現, 畫面根本不會更新 like: clas...

鐵人賽 Modern Web DAY 13

技術 【Day13】數據展示元件 - Accordion/Collapse 摺疊面板

元件介紹 Accordion 是一個可折疊/展開內容區域的元件。主要是針對顯示內容複雜或很多的頁面進行分區塊的顯示及隱藏。 參考設計 & 屬性分析 元件...

鐵人賽 影片教學 DAY 26

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day26 根據主題篩選文章列表

連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...

鐵人賽 Modern Web DAY 12

技術 【Day12】數據展示元件 - Tooltip

元件介紹 Tooltip 是一個文字彈出提醒元件,當 active 狀態時,會顯示對該子元件描述的文字。 參考設計 & 屬性分析 位置 相對於被包覆的子...

鐵人賽 影片教學 DAY 25

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day25 阻擋會員路由

連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...

鐵人賽 影片教學 DAY 24

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day24 修改會員密碼

連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...

鐵人賽 Modern Web DAY 11

技術 【Day11】數據展示元件 - Badge

元件介紹 Badge 可以讓我們在其 children element 的右上角(預設位置)顯示一個小徽章,通常用來表示需要處理的訊息數量,透過醒目的視覺形式來...

鐵人賽 影片教學 DAY 23

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day23 上傳會員照片

連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...

鐵人賽 Modern Web DAY 7

技術 [Day 7]想不到有梗的標題LA(前端篇)

沒有想到連假結束後的第一天就要冨樫了...,我工作的公司在新加坡,而我在台灣full remote,我們中秋放連假而新加坡那邊沒放假,導致一開工就滿多事情要處理...

鐵人賽 Modern Web DAY 7
30天學 React.js 系列 第 7

技術 [Day7] [筆記] React Props (上)

前言 前兩天,我們知道了何謂 Component 、 Component 如何撰寫與 React 開發邏輯。而今天我們要進入 React 重頭戲,資料傳遞。我們...

鐵人賽 影片教學 DAY 22

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day22 修改會員名稱

連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...

鐵人賽 Modern Web DAY 9

技術 【Day09】數據輸入元件 - Upload

元件介紹 Upload 是一個上傳元件。幫助我們能夠發佈文字、圖片、影片、檔案到後端伺服器上。 參考設計 & 屬性分析 客製化上傳元件樣式 我們原生的...

鐵人賽 Modern Web DAY 6
30天學 React.js 系列 第 6

技術 [Day6] [筆記] React Component (下)

前言 昨天我們知道 Component 是什麼,與其優點。那我們今天就接續介紹在 Component 中使用表達式、以及如何客製化撰寫 Component 。...

鐵人賽 影片教學 DAY 21

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day21 發表與收藏文章列表

連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...

鐵人賽 Modern Web DAY 5
30天學 React.js 系列 第 5

技術 [Day5][筆記] React Component (上)

前言 昨天我們認識了 JSX 語法,透過 JSX 語法我們可以方便地在 JavaScript 中輕鬆撰刻畫 UI 介面。而今天我們要來認識 React 元件,了...

鐵人賽 影片教學 DAY 20

技術 前端工程師也能開發全端網頁:挑戰 30 天用 React 加上 Firebase 打造社群網站|Day20 會員選單

連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...