Hi!大家好啊!其實最後五篇的時候一直在作品中間鬼打牆XD,有時候想說這樣做,睡前又想說可以這樣做,起床改一改上班又想到另外一個作法,總之真的覺得第一次使用組件...
昨天我們已經讓蛇的頭部可以動起來,並且可以接受方向鍵的操作來改變方向。接下來我們要讓這隻蛇有身體,讓他成為一條名符其實的蛇。 前情提要 在 Day12 - 貪吃...
React hooks 從 2019 年初推出以來也經過了幾年的時間,它以非常快的速度就發展成為 React 開發方式的絕對主流選擇。搭配 function c...
本篇文章提及以下部分 Material Design 更名MUI Material UI優點 加載字體方法 import元件的方法 Typography-排版...
在程式開發過程常常會出現一種情況一個屬性或狀態同時控制好幾個網頁元素這個時候怎麼寫就會直接影響著網頁的運行效能為了養成良好的習慣今天就來談談應該要怎麼寫會比較好...
【前言】 我們昨天跟React說想跟他當好朋友,而且雙方也做了自我介紹了,如果按照少女漫畫的情節應該就可以直接牽手抱抱親親 BUT,人生就是有那個BUT。 ...
接著我們將上一章節介紹到的一律重繪概念與流程替換成具體的 React 程式來解釋: 當我們在 component 裡呼叫 setState 方法來觸發資料更新時...
【前言】 不怕我誤人子弟嗎QQ【正文】 昨天我們簡單的利用react-router模擬一個SPA的網頁,今天我們就來說說Router、Route、Link到...
Redux & React <好讀版> 前言 Redux 是一個基於 flux 的設計原理而設計的 library,跟 React 是兩個不...
在build專案的時候,我們會透過webpack將不同模組的component打包成同一支js,但是當專案的規模越來越大, 程式碼的size就會逐漸肥大,好幾m...
前言 就 Redux 而言,與上一篇的 Counter 不同的地方就是多了 Action 以及 Reducer,而它們也都只是純函數,測試並不會是難點,需要思考...
React可以手動建立環境,或是自己寫webpack設定,安裝相關的套件,身為初學者的我為了比較快速上手(懶),決定採用官方提供的create-react-ap...
前言 今天要來介紹一項非常重要的觀念,只要講到 React.js 就一定會提到 virtual DOM 這個東西,究竟為什麼需要 virtual DOM 呢?今...
經歷了前面十幾天的學習對於 React 程式的撰寫略懂略懂可是只是會寫會讓資料跑出來卻不了解裡面的資料傳遞流程這樣實在是感覺有點給他不太舒服因此這篇筆記要來認識...
我們是一個成立一年的公司,我們雖然很新但很有活力,致力於打造一個方便、易用的線上建站服務。 對於招募,我們不做誇大的承諾、不講無用的冗言;尊重設計也尊重開發;工...
前言 在講完 React.js 中的基本架構後,今天要來講講要如何在 JSX 中加入 event handler ,既然 React.js 可以說是將 HTML...
本篇文章將會提及以下部分 如何部署react到github page? 為什麼react部署在github page上後重新整理會出現404 github p...
一開始會這麼定題目,其實是起源于我對前端的挑食,因為我不喜歡調畫面左邊一點右邊一點這種事情我真的不喜歡做所以取翻譯中 過敏 的意思來形容我的 React 學習過...
既然要自己寫SPA,我們先來談談前端框架,本文分成上下篇,這邊重點不在教會你使用,而是想告訴你框架做了些什麼,以下用React來當例子: 傑森是一名網頁設計師,...
前言 本篇主要會說明,在 Hooks 讓 Function Component 具備 State 後,該如何使用及設置。 前置準備 文中的專案會以 Day0...
今天這篇文章會示範如何將 create-react-app 轉成 vite,大幅提升開發速度 什麼是 Vite? Next Generation Fronte...
前言 本篇會開始提及 React 本身的基本用法和使用觀念,大概會提個三四篇,和去年不同的是,所有範例都會使用 Hooks ,如果有任何問題再麻煩留言告訴我,謝...
為了滿足 transpiler 轉換的正確性,因此 JSX 語法在撰寫上會有一些重要的特性與規則需要注意。這些規則可能大多數人多少都聽過,但是卻不是很了解為什麼...
在繼續深談 React 管理並更新畫面的策略與機制之前,我們先來探究一下關於單向資料流的概念,以及在尚未使用前端框架時實現單向資料流的 DOM 渲染策略,來幫助...
本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 在...
勝負判斷分析 昨天完成了 row 方向和 column 方向的勝負判斷,今天我們要來完成右斜和左斜方向的勝負判斷,我這邊先把這兩個方向命名為 forwardSl...
今天呢,就先來定義Action 先歸納一下 看看我們的containers/ReadingList.jsx class ReadingList extends...
前言 在 Day03 了解怎麼建立自己的最簡單的 component 後,我們開始深入了解如何使用 solidjs 這框架帶給我們的基礎方法, createSi...
如果 npm start 後遇到錯誤.. 人品不好的時候執行 npm start 卻出現錯誤..NPM start returns error, “There...
元件介紹 Progress circle 跟上一篇 Progress bar 一樣是能夠展示當前進度的元件。只是在外觀上面以圓形替代長條形,好處是在寬度不夠的排...