元件介紹 Table 顧名思義就是一個表格元件,用來整齊的顯示行列數據。 參考設計 & 屬性分析 我自己覺得 table 是一個還蠻繁瑣的元件,要組成一...
本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 雖...
【前言】 終於來到最後的react-router囉!再撐一下就可以把這三劍客都認識一遍了!【正文】 我想大家應該都很常聽到什麼SPA、單頁式網站、Singl...
在前面的章節中我們已經詳細的解析了 useEffect 正確的概念以及用法,也再三強調了 useEffect 的用途是同步資料到 React elements...
除了最核心的 useState 以及 useEffect 以外,在 React 中最常被我們使用到的內建 hooks 應該就屬 useCallback 以及 u...
在經過前面一些基本觀念的鋪陳之後,接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理,而這將會是真正掌握 React 這門技...
挑戰 React 第二篇 安裝方式 CDN 連結 新手快速入門 Create React App 經驗豐富高手 更靈活的 Toolchain 使用 Nod...
有使用過React的同學都知道,用React做輸入控制的時候, 通常做法是建立一個input的state, 具體如下: import { useState }...
前言 今天要來講講比較進階一點的 component 了,如果對於 component 的基本觀念有任何不懂的歡迎先去看前兩天的文章來奠定一下基礎,沒問題的話就...
想一想,決定食物如何出現 俗話說,吃飯皇帝大,如果不吃東西,貪吃蛇就長不大,也跑不快,所以今天我們要來製作貪吃蛇的另一個重頭戲,就是食物。 首先,我們要來決定食...
說到計算 render 次數,大家可能一開始想到的便是下面這段扣 const RenderCounter = () => { const render...
這篇文章不同於過往的技術分享或是關於工程師職涯的心得,要來介紹的是一個自己嘗試過後覺得十分有效的「工作術」,不管讀者的職業是什麼,我認為都有運用這個工作術的空間...
回憶 昨天我們以非同步函數測試的例子說明單元測試/整合測試的差異,到目前為止後端的部分打算先到這。之後的幾天,我們開始進入研究前端。 目標 在 Day 11 -...
2021/10/23 更新:新增範例網站以及程式碼連結 (影片教學組的頭香我搶走囉XD) 大家好!我又來參加 iThome 舉辦的鐵人賽了! 09/01 至...
現今的網頁架構相較於過往偏向靜態的形式已經變得複雜許多,大部分資料都要靠動態抓取,而抓取資料的過程就會產生許多 Request 請求去取得 Response ,...
Hi!恭喜踏入第11篇!完成1/3的賽程了!這樣子一直倒數心態是不是不太好XD,不過我還是很沈醉在給自己壓力的,哈哈哈,但是結束後還是讓我耍廢一陣子吧!欸?現在...
因為gatsby是基於React,所以在使用上需要會一些React語法,而且了解React也可以讓自己開發起來更有彈性一點(畢竟它都提供了!不用就浪費了,蠻合理...
在沒有用過框架的chrome的除錯工具前,我其實不知道類似這樣的工具在開發上能夠有什麼幫助?不過經過實際使用一陣子之後, 才發現dev tools真的太好用了(...
鐵人賽剩下 5 天,接下來我想聚焦在一些經驗分享,畢竟除了學習技術以外,適時的採取一些實際行動更能夠快速吸收所學知識與進步。 身為軟體工程師, Github 自...
所有網頁的開始都是要先有框架才能繼續下去所以呢今天要把所有應該要看到的東西一口氣全長出來! 網頁框架&組件 首先來張腦海浮出的架構長相: 整個網頁總共有 6 個...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...
【前言】 昨天我們很簡(ㄙㄨㄟˊ)略(ㄅㄧㄢˋ)的介紹ES6、Babel、JSX之後,我們要來使用React撰寫我們第一個Component囉! 【正文】 ...
繼昨天 export 之後我們就可以來撰寫 reducer。把 NEW_MEME 加進來 import { RECEIVE_MEMES, NEW_MEME }...
Listing memes 今天第一個任務 94 呈現 memes~~~第一步驟,先進到 App.js import { connect } from 're...
繪製頁面草稿 按照慣例,我們先來畫一下我們整個遊戲畫面呈現的草稿,下面是我對整個遊戲面化的初步想像。 我把所有的元素都集中放在中間區塊,因為人的視線比起左右移動...
[團隊簡介] 前端團隊成員目前7人, 需補足8人。團隊採敏捷開發流程。 公司未來將發展跨境電商, 包括中國大陸, 東南亞, 日本, 韓國是我們的合作目標。 ht...
React 中以 state 資料以及 setState 作為 reconciliation 的觸發點,並且以 props 作為 component 層層往下的...
【前言】 昨天我們講到Props是由父層傳遞下去,不過有時候我們要讓Component本身對自己做相關的狀態變更或是Component變化,那這時候應該要怎麼...
連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...
祝大家 2018新年快樂 =D雖然是值得慶祝的日子但挑戰還是依然要繼續新的一年希望能夠在最開始就達成持續30天的小成就那麼廢話不多說下面正文開始啦~~~ 當資料...