iT邦幫忙

front-end相關文章
共有 174 則文章
鐵人賽 Modern Web DAY 21

技術 【Day 21】React 渲染機制

我們都知道使用 React 讓我們的應用可以擁有非常好的效能,但背後裡 React 到底幫我們做了哪些努力呢? 今天就來初探一下 React 的渲染機制! 當我...

鐵人賽 Modern Web DAY 11

技術 [DAY 11] 煉金術就是分解構築之大哥哥來寫 JavaScript 之 ES6 真會玩

我想說的是 解構賦值語法是 ES6 的新特性,可以將陣列或物件中的資料取出成獨立變數 這篇來談 煉金術的基礎 不要瞎掰好嗎 來說說「解構」,當初第一次看...

鐵人賽 自我挑戰組 DAY 17

技術 改用百分比(%)為單位,讓你的 RWD 網頁縮放自如

過往我們不管是設width寬、height高時,或是在做margin或padding,比較習慣的單位都是用px,現在我們要改用%百分比,但在改用百分比前我們先...

鐵人賽 Modern Web DAY 20

技術 【Day 20】可能不需要redux (2) - contextAPI

昨天介紹了 useReducer 的用法,但是還缺少了 global state 的機制啊?怎麼會說可能可以不需要 redux 了? 今天就來介紹 contex...

鐵人賽 自我挑戰組 DAY 16

技術 RWD 不可顯示 X 軸法則

使用行動設備上網時不管是手機或是平板,不同於使用電腦會有滑鼠,而是使用我們的手指滑動銀幕,以使用習慣來說,通常是以上下滑動的方式來進行內容瀏覽,而不像是使用電...

鐵人賽 Modern Web DAY 10

技術 [DAY 10] 地圖除了畫在床單上,程式裡要怎麼用 map 呢?

我想說的是 map() 方法會建立一個新的陣列,其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。 上一篇講了箭頭函數,這一篇來講講 map...

鐵人賽 Modern Web DAY 9

技術 [DAY09] 箭頭函數

我想說的是 箭頭函數其實就是函式表達式(匿名函數)的簡化,是 ES6 中新增的功能 建構式中不能用箭頭函數,會報錯 箭頭函數是 ES6 中新增加的功能 先看...

鐵人賽 自我挑戰組 DAY 15

技術 響應式網頁(RWD)環境與 Media Query

在智慧型手機橫空出世進入我們的世界以後,網頁工程師/設計師突然面臨到了一個很大的問題,過往的設計都是依照 desktop 的螢幕瀏覽器與比例去構想的,但當智慧...

鐵人賽 自我挑戰組 DAY 14

技術 CSS 的 border-radius、box-shadow 和 liner-gradient

關於 HTML 和 CSS 的學習筆記,快要告一個段落了,之後會開始進入到響應式網頁(RWD)的介紹,今天是 HTML 和 CSS 的最後一篇文章,我們來介紹...

鐵人賽 Modern Web DAY 8

技術 [DAY08] 在按摩服務列表上為所欲為的增加服務

我想說的是 把靜態的按摩服務列表改為動態的,並且可以由使用者自由新增服務 建立一個可以自己新增的按摩服務列表 預期結果如下 先直接看完整程式碼,再來一段一...

鐵人賽 Modern Web DAY 7

技術 [DAY07] 介紹 State Hook

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

鐵人賽 自我挑戰組 DAY 13

技術 講完表格(table)今天來講表單(form)

上一篇我們講完了表格,今天我們來說說更廣泛運用的表單,還記得幾乎不管是甚麼網站大概都會有留言區,讓你可以留下自己的問題還有基本資料,最後有一個按鈕可以按送出,...

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 自我挑戰組 DAY 12

技術 如何在 HTML 上做表格再用 CSS 美化它

今天我們來說一說怎麼作表格,我就先說一個最簡單的結構,請看下方被包覆在<table>內的<tr><th><td&gt...

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 自我挑戰組 DAY 11

技術 CSS 的 LOGO 圖片隱藏標題與選單並排

之前我們都在講關於排版的東西,現在我們要開始講網站的內容囉,由上至下,我們先從.header開始講起,不管甚麼類型的網站,尤其是商業網站,一定都會有一個 lo...

鐵人賽 Modern Web DAY 14

技術 【Day 14】Form in React

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

鐵人賽 Modern Web DAY 4

技術 [DAY04] 你好世界

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

鐵人賽 自我挑戰組 DAY 10

技術 CSS 的絕對定位與相對定位

嗨~大家今天過得好嗎?(揮手) 上一篇我們好不容易說明完了用float及clear的排版方式了,所以我們現在知道了可以用 CSS RESET 來去除瀏覽器默認...

鐵人賽 Modern Web DAY 13

技術 【Day 13】Conditional Rendering

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

鐵人賽 自我挑戰組 DAY 9

技術 今天我們用 CSS 來排版吧

在正式開始之前,要先說兩件很重要的事,CSS RESET 和 {margin: 0 auto}。 CSS RESET 我們先來講關於 CSS RESET,目前...

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 6

技術 Day 06. 前線維護・陣列與函式 X 陣列與元組 - Array & Functions & Tuples

閱讀本篇文章前,仔細想想看 陣列的推論大致上是如何運作呢? 什麼時候要積極去對陣列進行型別註記呢? 如果還沒理解完畢的話,可以先翻看前一篇文章喔!...

鐵人賽 Modern Web DAY 12

技術 【Day 12】Styled-component

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

鐵人賽 自我挑戰組 DAY 8

技術 今天我來說說什麼是Box-Model

上一篇文章我們已經簡單說明了如何在 HTML 文件加上 CSS 內容,也說明了如何用選擇器方式選擇了對的 HTML 標籤,還記得我們在 Day.6 提到的&l...

鐵人賽 Modern Web DAY 2

技術 [DAY02] 套路開始

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

鐵人賽 Modern Web DAY 1

技術 [DAY01] 開門見山地說

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 自我挑戰組 DAY 7

技術 如何添加 CSS 內容及選擇器

網頁三要素( HTML、CSS、JavaScript ),HTML 是網站的內容 & 架構,CSS 則是網頁的樣式而 JavaScript 是網頁的特...