iT邦幫忙

react相關文章
共有 560 則文章
鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 14

技術 【Day 14】Form in React

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

鐵人賽 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 4

技術 [DAY04] 你好世界

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

鐵人賽 Modern Web DAY 13

技術 【Day 13】Conditional Rendering

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

鐵人賽 Software Development DAY 2

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

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

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 12

技術 【Day 12】Styled-component

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

鐵人賽 Software Development DAY 1

技術 [Day1] 說個笑話:我要一天學會設計模式

嗨 大家好 我是一路爬坡的阿肥 今天開始跟著阿肥不間斷爬坡吧! 我與設計模式的初遇 四年前有個剛畢業的菜逼八,帶著「WEB前端就是網頁設計」的認知,傻傻地進到...

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 2

技術 [DAY02] 套路開始

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

鐵人賽 Software Development DAY 1

技術 遠征之旅出發前,我們先從這段歷史說起

※取自《大話西遊之仙履奇緣》劇照 這故事要從20年前說起。 (現在流行網路上的圖原封不動地抄襲拿來用,若有不小心盜圖侵權,請務必來信告知,本人馬上把圖片下架,...

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 1

技術 [DAY01] 開門見山地說

我想說的是: 這是個原本只會 JQuery 的後端工程師學 React 的筆記 並不會有甚麼高深的內容,但是可以保證會有很多垃圾話、冷笑話、鄉民哏 Oxfo...

鐵人賽 Modern Web DAY 11

技術 【Day 10】CSS && Inline-style

到昨天為止都著重在 JS 的部分,基本的功能已經可以完成了,但除了功能以外,網頁應用的外觀也是很重要的,所以今天就暫時把 JS 擺在一邊,看看在 React 中...

鐵人賽 Modern Web DAY 9

技術 【Day 9】Component Lifecycle

昨天對 class-based component 有了初步的認識,然而除了 state ,在 hooks 出來以前 class component 還有一項...

鐵人賽 Modern Web DAY 8

技術 【Day 8】Class component && Functional component

今天與明天會來短暫介紹一下 class-based 的 component,今天將講解 class component 的基礎,也比較一下與 functiona...

鐵人賽 Modern Web DAY 1

達標好文 技術 Day 00 | React With TypeScript - 旅途漫長,所以我們需要地圖

Hi!大家好,我是神 Q 超人,很開心又過了一年了(咦? 自從去年鐵人賽毅然決然退隱修煉後,一直在等著的就是這個機會 XD ,希望能夠記取去年到後半段不知道在寫...

鐵人賽 Modern Web DAY 7

技術 【Day 7】型別檢查 && PropTypes

昨天講解了 props 的應用,讓子元件可以接收來自父元件的資料。 但是隨著應用規模的提升,透過型別檢查可以減少許多可能的錯誤。 要達成這個目的,許多人會選擇...

鐵人賽 Modern Web DAY 7

技術 Day7. React的基本用法 (六)

今天新增了deleteItem的方法,並在JSX中加入我們的刪除按鈕,並綁到deleteItem上。 這邊用到官方文檔給出的一個方法,可以同時間事件跟參數綁到監...

鐵人賽 Modern Web DAY 6

技術 Day6. React的基本用法 (五)

這兩天會開始做一點小東西,做個react的總結,為了實作上的方便性,可能會用上前幾個文章沒講到的語法但不會都詳細說明,我會簡單的說一下功能,有興趣的再麻煩去看看...

鐵人賽 Modern Web DAY 6

技術 【Day 6】Child Component && Props

昨天介紹了可以在 component 中使用的 state,然而 React 一般建議能夠用越少 state 越好,因為 state 的改變是非同步的,stat...

鐵人賽 Modern Web DAY 5

技術 【Day 5】 第一個 hook - useState

今天終於要介紹 React hooks 中的第一個hook 了 - useState,Start! 建立自己的 component 在講解 state 概念與...