iT邦幫忙

react相關文章
共有 1744 則文章
鐵人賽 Software Development DAY 6

技術 [Day6] 老闆:來一碗大腸麵線 ─ 工廠方法(Factory Method) <實作篇>

嗨 大家好 我是一路爬坡的阿肥 最近天氣開始有點涼爽,騎車去上班瀏海也不分岔了~上班族小確幸++ 今日文章適合搭配範例專案的packages/day06-c...

鐵人賽 Modern Web DAY 7

技術 [DAY07] 介紹 State Hook

我想說的是介紹 useState hook,並且做一個計數器 上一篇建立了一個靜態的純按摩店服務列表因為老闆今天找到一個身懷絕技的按摩師,他想在服務清單上加...

鐵人賽 Modern Web DAY 10

技術 Day09 | 掌管 Lifecycle 和一切作用的 useEffect

前言 Lifecycle 被稱為生命週期,在 Component 中,我們可以大致把生命週期分成三個: Component Render 完畢。 Compon...

鐵人賽 Modern Web DAY 17

技術 【Day 17】Redux 實戰演練

今天將直接實作 redux,如果不知道 redux 運作概念的讀者可以回去看看昨天的概念介紹喔~今天嘗試將 dark theme 與 light theme 實...

鐵人賽 Modern Web DAY 9

技術 Day08 | Function Component 的 State 在哪裡

前言 本篇主要會說明,在 Hooks 讓 Function Component 具備 State 後,該如何使用及設置。 前置準備 文中的專案會以 Day0...

鐵人賽 Modern Web DAY 4

達標好文 技術 [Day 04 - 計數器] 把 HTML 寫在 JavaScript 中!? - JSX 的使用

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

鐵人賽 Modern Web DAY 16

技術 【Day 16】state management - redux 基礎概念

今天開始會進入 React 中比較進階的主題 - state management在前幾天中我們介紹了 state,也介紹了 props,我們了解一個 comp...

鐵人賽 Modern Web DAY 4

技術 Day 4 - Spring Boot 快速建立專案

上一章 Day 3 - Visual Studio Code 開發環境建置 Visual Studio Code 使用內建Command, 將建立專案方式簡單化...

鐵人賽 Software Development DAY 5

技術 [Day5] 老闆:來一碗大腸麵線 ─ 工廠方法(Factory Method) <模式篇>

嗨 大家好 我是一路爬坡的阿肥 突然想到雙十連假要去澎湖渡假敲開心~(灑花) 啊 等一下!(是真的突然想到) 那不就表示就連在澎湖也要記得發文嗎 ? 情境描述...

鐵人賽 Modern Web DAY 3

達標好文 技術 [Day 03 - 計數器] 用原生 JavaScript 做一個簡單的計數器

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 15

技術 【Day15 路由神器 - React-router 】

講到 SPA(single page application)與傳統網頁的差異,應該很多人會想到傳統網頁跳頁往往會有一段載入時間,導致畫面空白,讓使用者需要對著...

鐵人賽 Modern Web DAY 8

技術 Day07 | 從 Hooks 開始的 Component 新生活

前言 本篇會開始提及 React 本身的基本用法和使用觀念,大概會提個三四篇,和去年不同的是,所有範例都會使用 Hooks ,如果有任何問題再麻煩留言告訴我,謝...

鐵人賽 Modern Web DAY 7

技術 Day06 | 一次說完 JSX 基本用法

前言 本來打算直接從 Hooks 開始說起 React,但後來發現還是得先理解基本的操作方法,後續的文章會看得比較輕鬆,但我不會對語法著墨的太深,畢竟接下來的...

鐵人賽 Modern Web DAY 2

達標好文 技術 [Day 02] React 中一定會用到的 JavaScript 語法

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

鐵人賽 Software Development DAY 3

技術 [Day3] 虛實之間 就用 React 築起所見即所得的世界吧!

嗨 大家好 我是一路爬坡的阿肥 每次搭高鐵往返老家跟北部的時候,就會想著: 「每次搭車可以省 3 個小時,每年搭個 20 次,這樣一年就幫我省了 60 個小時,...

鐵人賽 Modern Web DAY 2

技術 Day 2 - Spring Boot 介紹, 開發工具與架構

上一章 Day 1 - 為什麼要前後端分離? 開發過WEB項目的朋友, 都應該處理過繁複的配置, 一堆XML與Properties檔 這使的專案配置對於新人來說...

鐵人賽 Modern Web DAY 14

技術 【Day 14】Form in React

今天要來介紹在 React 中如何建構最基本的 form。 重點可以歸納出這幾項: 建立 state 變數,且與 input value 做綁定 設定 onC...

鐵人賽 Modern Web DAY 13

技術 【Day 13】Conditional Rendering

大家好,經過兩篇 style 的介紹,今天總算要回到處理邏輯的部分了。 一般在開發應用時,常常會需要根據特定 condition 做邏輯判斷,除了一般我們熟知的...

鐵人賽 Modern Web DAY 1

達標好文 技術 [Day 01] 沒學過 React 可以從 Hooks 開始嗎?

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

鐵人賽 Modern Web DAY 6

技術 [DAY06] 終極蛇皮上班太認真之其實是半夜趴著滑手機之肩頸痠痛之做個按摩服務吧

我想說的是使用 JSX 建立一個跟 todoList 87分像的東西 在思考用什麼做主題的過程中,覺得 todolist 跟 hello world 一樣了...

鐵人賽 Modern Web DAY 1

技術 Day 1 - 為什麼要前後端分離?

前後端分離已成為業界的標準之一, 有效的分離解藕, 可以讓我們的專案維護更容易, 業務邏輯更清晰, 不會像以往牽一髮而動全身, 同時也可以支援不同客戶端服務(W...

鐵人賽 Software Development DAY 2

技術 [Day2] 太陽與月亮 Typescript與Javascript

嗨 大家好 我是一路爬坡的阿肥 今天吃月餅消化的熱量,應該可以讓大腦擠出10天份的文章 不過實際上應該會變成肚子的一部份吧(哭) 先談Javascript J...

鐵人賽 Modern Web DAY 12

技術 【Day 12】Styled-component

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

技術 Day03 | JSX 瀏覽器看不懂?要翻譯就靠 Babel

前言 基本上瀏覽器只看得懂三種語言,分別是 HTM、CSS 和 JavaScript,因此接下來學習 React 使用的 JSX 語法,瀏覽器無法讀懂,也沒辦法...

鐵人賽 Modern Web DAY 5

技術 [DAY05] JSX 到底是多 X!

我想說的是: JSX 是一種語法糖 (Syntatic Sugar),一種語法類似 XML 的 ECMAScript 語法擴充 當遇到&lt;,JSX 就當...

鐵人賽 Modern Web DAY 4

技術 [DAY04] 你好世界

我想說的是:基礎 Hello World 建立和組件說明 冷知識:於1972年,貝爾實驗室成員布萊恩·柯林漢撰寫的內部技術檔案《A Tutorial Int...

鐵人賽 Modern Web DAY 3

技術 [DAY03] 上帝視角之路徑之熟門熟路老司機之資料夾說明

我想說的是:快速了解各個資料夾內資料的用處 用框架的好習慣就是先搞清楚各個資料夾的用處就像是你今天出國去了國外的合法賭場,至少要先知道人家的規矩跟行情知道籌...

鐵人賽 Modern Web DAY 2

技術 [DAY02] 套路開始

我想說的是:環境安裝方法:安裝 Node.js、安裝 create-react-app、npm start 首先安裝 Node.js這部分可以使用官方網站的...