React 條件 render 使用情境 在撰寫前端頁面時,常常需要根據不同的 props / state 資料顯示不同的 element。 舉例來說,使用者尚...
先分享下 Frontend 的發音 https://www.youtube.com/watch?v=ZdtpKFbhTtk 記得是 Frontend 不是 Fr...
[ 假 3D 電子鐘 ] 轉轉轉~! 時間的顯示,也是 Web 前端常常會要處理到的事情之一,做時鐘對初心者來說也是一個很好的練習題材唷。 那就 Demo...
這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...
React 在輸入元素的處理上有一些比較特別的地方,先前我們已經使用過onClick(),這篇我們來一次講全部輸入元素。 事件處理 onClick 之前都用過。...
昨日基本上我們已經完成了大致的 Online Judge 系統,剩下基本上就是看你打算要怎麼設計你的 Online Judge 系統來決定該怎麼打造你前端網頁...
本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 有...
在上一篇中介紹了 JSX Event 的使用方式,在本章節我們將近一步了解在 class component 中使用 event handler 的常見問題、對...
目前我們產生的 html 是寫死在程式中的,這篇要來讓使用者可以透過 ejs 的方式寫自己的樣版,不過我們實際要用的樣版引擎不是 ejs 而是 eta.js ,...
前一天介紹了 SSR 基本概念,今天則是要介紹 React 最有名的 SSR 框架:Next.js。 今天不是要來講 Next.js 怎麼使用,畢竟網路上學習資...
本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 R...
昨天我們將獲取資料的網頁部分給完成了,今天就讓我們繼續將操作資料的網頁部分給完成吧! 表單輸入元件 在操作資料的部分,很常會使用到一些 <input&g...
如 HTML 一樣,JSX 也提供了處理 DOM event 的方法。就讓我們來了解一下語法吧! JSX 處理 event 語法 JSX 註冊 event 語法...
[ 漂亮的 Show 出商品 ] 不只商品,只要是需要大量展示在頁面上的東西都可以用的唷 :D 應用實作到現在,感覺其實最難的就是要構想動畫如何「演出」了~...
這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...
還記得在Day.04我們實作的觀察者模式嗎? 由於這種「當某個JS變數改變時,有很多DOM元素需要被改變」的功能很常被使用,React將其拉了出來做成獨立的AP...
昨天我們完成了登入與登出相關的操作,接下來就讓我們一步一步完成接下來的頁面吧! 題目總列表頁面 首先先讓我們從獲得題目總列表的資料來顯示的頁面開始吧!雖然我們...
本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 S...
回顧 React Lifecycle 在上個章節中,我們了解了 React component instance 的生命週期(Lifecycle)代表一個 co...
最近在 Frontend 技術圈裡,Server-Side-Rendering(SSR) 可說是一個越來越火熱的概念,剛好現在工作上的架構就是使用 Next.j...
[ Search Bar ] 搜尋 Bar ~! Search Bar 也是 Web 前端的必修課題之一呢!尤其是處理 RWD 時 Search Bar 要...
雖然開發者工具中已經提供相當豐富的功能,也一直持續發展中。不過 Google 有開放提供可裝在開發者工具的擴充功能的 API,像是目前大多主流的前端框架的開發者...
這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...
在 初探 State、Class Component State 語法、State 內部運作原理 這三個篇章中介紹了 state 的概念、用法與運作原理。 如果...
本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 簡...
有了JSX之後,工程師還是不滿足。因為過去像這樣的過程不斷的重複: let menuItemWording=[ "Like的發問",...
昨天我們建立了 HTTPS 連線,藉以讓使用者可以登入網站。不過雖然已經可以登入網站了,但是卻還是有登入後各個元件之間狀態無法同步資料的問題,究竟我們該如何解...
Application Cache 這邊也可以看成是 server side 的快取,快取存在的位置在 backend server 與 database 之間...
[ 字母漸變 ] いろはにほへと、ちりぬるを~♪ 其實也不清楚這類特效的正式名稱或目的是什麼(?),或許單純讓人感覺很酷炫用的吧(欸#) Demo Time...
從這篇開始,程式碼的目錄結構會有很大的變化,在這之前我們都把 SSR 與我們自己的 blog 的程式碼混在一起,但這系列是要做出一個通用的 SSG ,所以之後會...