今天的內容一樣以React為主,建立完前端應用程式之後,接著就是將前後端的應用程式連接。 首先在React應用程式專案中的package.json加上伺服器應...
關鍵字:notification 點擊通知時重新導向未成功 延續昨天在Day16~19時有試著做了一個點擊通知後可以跳轉回細節頁面的功能可是在以實機測試時,這...
在經過前面一些基本觀念的鋪陳之後,接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理,而這將會是真正掌握 React 這門技...
hashtags: #react, #components, #accessibility, #dialog About 對話視窗 是一種視窗,會覆蓋在主視窗...
想一想,決定食物如何出現 俗話說,吃飯皇帝大,如果不吃東西,貪吃蛇就長不大,也跑不快,所以今天我們要來製作貪吃蛇的另一個重頭戲,就是食物。 首先,我們要來決定食...
說明 一進 Redux Toolkit 的官網,就會看到以下示意圖。 它最初是為了解決使用 Redux 的三個常見問題 配置 Redux Store 過於複...
這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...
在前面的章節中我們已經詳細的解析了 useEffect 正確的概念以及用法,也再三強調了 useEffect 的用途是同步資料到 React elements...
有使用過React的同學都知道,用React做輸入控制的時候, 通常做法是建立一個input的state, 具體如下: import { useState }...
這篇文章不同於過往的技術分享或是關於工程師職涯的心得,要來介紹的是一個自己嘗試過後覺得十分有效的「工作術」,不管讀者的職業是什麼,我認為都有運用這個工作術的空間...
除了最核心的 useState 以及 useEffect 以外,在 React 中最常被我們使用到的內建 hooks 應該就屬 useCallback 以及 u...
Day 27 - React And BootStrap 動態橫幅廣告 Carousel 上一章做了橫幅廣告 現在加入卡片式資訊, 我們一樣使用Reactstr...
tags: 2021鐵人賽 React 還記得這個網站有篩選圖表的功能嗎?當初畫wireframe的時候考量到未來圖表可能會越來越多,因此規劃了下拉式選單來做篩...
hashtags: #react, #components, #accessibility, #calendar, #control 本篇接續前篇 如何製作月...
React 狀態管理的分類 React的 狀態管理主要分三類:Local state、Context、Third Party 前面已經介紹了 Redux 及...
[情境任務] 美食家:這是我第一次吃到這種味道,這道菜有著前所未有的新鮮味…你們的餐點真是太好吃了~我寫了餐點評論送給你們 解師傅:哇!這怎麼好意思~太感謝了!...
tags: 2021鐵人賽 React 在Day9說明了useEffect的用法,不過其實當Card.js渲染時,會發現console有錯誤訊息如下: src...
因為gatsby是基於React,所以在使用上需要會一些React語法,而且了解React也可以讓自己開發起來更有彈性一點(畢竟它都提供了!不用就浪費了,蠻合理...
Hi!恭喜踏入第11篇!完成1/3的賽程了!這樣子一直倒數心態是不是不太好XD,不過我還是很沈醉在給自己壓力的,哈哈哈,但是結束後還是讓我耍廢一陣子吧!欸?現在...
現今的網頁架構相較於過往偏向靜態的形式已經變得複雜許多,大部分資料都要靠動態抓取,而抓取資料的過程就會產生許多 Request 請求去取得 Response ,...
在沒有用過框架的chrome的除錯工具前,我其實不知道類似這樣的工具在開發上能夠有什麼幫助?不過經過實際使用一陣子之後, 才發現dev tools真的太好用了(...
【前言】這個 IT 鐵人的比賽,一開始是 Sen 問我要不要比,我本來是沒有多大興趣的,因為不會得名,也沒想到有什麼好寫的。只是接了 DINO 的工作之後,認...
鐵人賽剩下 5 天,接下來我想聚焦在一些經驗分享,畢竟除了學習技術以外,適時的採取一些實際行動更能夠快速吸收所學知識與進步。 身為軟體工程師, Github 自...
【前言】 昨天我們很簡(ㄙㄨㄟˊ)略(ㄅㄧㄢˋ)的介紹ES6、Babel、JSX之後,我們要來使用React撰寫我們第一個Component囉! 【正文】 ...
繼昨天 export 之後我們就可以來撰寫 reducer。把 NEW_MEME 加進來 import { RECEIVE_MEMES, NEW_MEME }...
Listing memes 今天第一個任務 94 呈現 memes~~~第一步驟,先進到 App.js import { connect } from 're...
繪製頁面草稿 按照慣例,我們先來畫一下我們整個遊戲畫面呈現的草稿,下面是我對整個遊戲面化的初步想像。 我把所有的元素都集中放在中間區塊,因為人的視線比起左右移動...
[情境任務] 小當家:客人點了一大桌的桌菜,真是累死我了! 解師傅:哇~這些菜看起來太美味了!看看那個醬汁!讓我拍個照先~ 解師傅拍的照片真漂亮,我們把它們放在...
hashtags: #react, #components, #accessibility, #calendar, #control 本篇接續前篇 如何製作月曆...
動手做勝過千言萬語 因為用的是Windows10的筆電,已經先請他安裝完以下項目,方便後續開發與操作: Git For Windows Nodejs...