iT邦幫忙

reactjs相關文章
共有 711 則文章
鐵人賽 Modern Web DAY 26
一步一腳印的React旅程 系列 第 26

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(6)-上吧!迴圈!

Hi!大家好啊!其實最後五篇的時候一直在作品中間鬼打牆XD,有時候想說這樣做,睡前又想說可以這樣做,起床改一改上班又想到另外一個作法,總之真的覺得第一次使用組件...

鐵人賽 Modern Web DAY 16

技術 Day16 - 貪吃蛇篇:加入蛇的身體

昨天我們已經讓蛇的頭部可以動起來,並且可以接受方向鍵的操作來改變方向。接下來我們要讓這隻蛇有身體,讓他成為一條名符其實的蛇。 前情提要 在 Day12 - 貪吃...

鐵人賽 Modern Web DAY 28

技術 [Day 28] 一次弄懂 React hooks 的運作原理與設計思維(上)

React hooks 從 2019 年初推出以來也經過了幾年的時間,它以非常快的速度就發展成為 React 開發方式的絕對主流選擇。搭配 function c...

鐵人賽 Modern Web DAY 25

技術 Material UI更名為MUI、基本介紹、加載字體、import方式—Typography元件

本篇文章提及以下部分 Material Design 更名MUI Material UI優點 加載字體方法 import元件的方法 Typography-排版...

鐵人賽 Modern Web DAY 15
激戰 ReactJS 30天 系列 第 15

技術 【Day15】 進入最佳狀態 - Lifting State Up

在程式開發過程常常會出現一種情況一個屬性或狀態同時控制好幾個網頁元素這個時候怎麼寫就會直接影響著網頁的運行效能為了養成良好的習慣今天就來談談應該要怎麼寫會比較好...

鐵人賽 自我挑戰組 DAY 2

技術 【DAY 02】蝦咪?ES6、Babel、JSX要先來鑑定?

【前言】  我們昨天跟React說想跟他當好朋友,而且雙方也做了自我介紹了,如果按照少女漫畫的情節應該就可以直接牽手抱抱親親  BUT,人生就是有那個BUT。 ...

鐵人賽 Modern Web DAY 11

技術 [Day 11] React 畫面更新的核心機制(下):Reconciliation

接著我們將上一章節介紹到的一律重繪概念與流程替換成具體的 React 程式來解釋: 當我們在 component 裡呼叫 setState 方法來觸發資料更新時...

鐵人賽 自我挑戰組 DAY 23

技術 【DAY 23】react-router三劍客,Router、Route、Link(上)

【前言】  不怕我誤人子弟嗎QQ【正文】  昨天我們簡單的利用react-router模擬一個SPA的網頁,今天我們就來說說Router、Route、Link到...

鐵人賽 Modern Web DAY 11

技術 Day 11 / Redux -- Redux & React

Redux & React <好讀版> 前言 Redux 是一個基於 flux 的設計原理而設計的 library,跟 React 是兩個不...

鐵人賽 自我挑戰組 DAY 27

技術 [Day 27] 利用React Suspense & React Lazy來優化載入速度

在build專案的時候,我們會透過webpack將不同模組的component打包成同一支js,但是當專案的規模越來越大, 程式碼的size就會逐漸肥大,好幾m...

鐵人賽 Modern Web DAY 21

技術 Day20 | Component 被 Redux 罩著怎麼測試?

前言 就 Redux 而言,與上一篇的 Counter 不同的地方就是多了 Action 以及 Reducer,而它們也都只是純函數,測試並不會是難點,需要思考...

鐵人賽 自我挑戰組 DAY 2

技術 [Day 02] 利用create-react-app來開發React

React可以手動建立環境,或是自己寫webpack設定,安裝相關的套件,身為初學者的我為了比較快速上手(懶),決定採用官方提供的create-react-ap...

鐵人賽 Modern Web DAY 3
React + D3 的正確姿勢 系列 第 3

技術 Day03-virtual DOM

前言 今天要來介紹一項非常重要的觀念,只要講到 React.js 就一定會提到 virtual DOM 這個東西,究竟為什麼需要 virtual DOM 呢?今...

鐵人賽 Modern Web DAY 17
激戰 ReactJS 30天 系列 第 17

技術 【Day17】 從哪來到哪去 - Data Flow

經歷了前面十幾天的學習對於 React 程式的撰寫略懂略懂可是只是會寫會讓資料跑出來卻不了解裡面的資料傳遞流程這樣實在是感覺有點給他不太舒服因此這篇筆記要來認識...

徵才 【徵才】JS 全端工程師加入我們!一起打造最好的中文建站平台。

我們是一個成立一年的公司,我們雖然很新但很有活力,致力於打造一個方便、易用的線上建站服務。 對於招募,我們不做誇大的承諾、不講無用的冗言;尊重設計也尊重開發;工...

鐵人賽 Modern Web DAY 7
React + D3 的正確姿勢 系列 第 7

技術 Day07-React event handler

前言 在講完 React.js 中的基本架構後,今天要來講講要如何在 JSX 中加入 event handler ,既然 React.js 可以說是將 HTML...

鐵人賽 Modern Web DAY 9

技術 在github page部署react—簡述為何重新整理出現404 feat.解決方案

本篇文章將會提及以下部分 如何部署react到github page? 為什麼react部署在github page上後重新整理會出現404 github p...

鐵人賽 Modern Web DAY 30

技術 [DAY30] 被 React react 的後端工程師 - 後記

一開始會這麼定題目,其實是起源于我對前端的挑食,因為我不喜歡調畫面左邊一點右邊一點這種事情我真的不喜歡做所以取翻譯中 過敏 的意思來形容我的 React 學習過...

鐵人賽 自我挑戰組 DAY 3

技術 [DAY03]淺談前端SPA框架-以React為例(上篇)

既然要自己寫SPA,我們先來談談前端框架,本文分成上下篇,這邊重點不在教會你使用,而是想告訴你框架做了些什麼,以下用React來當例子: 傑森是一名網頁設計師,...

鐵人賽 Modern Web DAY 9

技術 Day08 | Function Component 的 State 在哪裡

前言 本篇主要會說明,在 Hooks 讓 Function Component 具備 State 後,該如何使用及設置。 前置準備 文中的專案會以 Day0...

技術 Create-React-App 到 Vite: 將開發速度提升到新的檔次

今天這篇文章會示範如何將 create-react-app 轉成 vite,大幅提升開發速度 什麼是 Vite? Next Generation Fronte...

鐵人賽 Modern Web DAY 8

技術 Day07 | 從 Hooks 開始的 Component 新生活

前言 本篇會開始提及 React 本身的基本用法和使用觀念,大概會提個三四篇,和去年不同的是,所有範例都會使用 Hooks ,如果有任何問題再麻煩留言告訴我,謝...

鐵人賽 Modern Web DAY 8

技術 [Day 08] JSX 的重要特性與規則以及其背後緣由

為了滿足 transpiler 轉換的正確性,因此 JSX 語法在撰寫上會有一些重要的特性與規則需要注意。這些規則可能大多數人多少都聽過,但是卻不是很了解為什麼...

鐵人賽 Modern Web DAY 9

技術 [Day 09] 單向資料流 & DOM 渲染策略

在繼續深談 React 管理並更新畫面的策略與機制之前,我們先來探究一下關於單向資料流的概念,以及在尚未使用前端框架時實現單向資料流的 DOM 渲染策略,來幫助...

鐵人賽 Modern Web DAY 1

技術 React 基礎簡介 - React element與JSX

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 在...

鐵人賽 Modern Web DAY 9

技術 Day09 - Tic Tac Toe篇:勝負判斷方法(2/2)

勝負判斷分析 昨天完成了 row 方向和 column 方向的勝負判斷,今天我們要來完成右斜和左斜方向的勝負判斷,我這邊先把這兩個方向命名為 forwardSl...

鐵人賽 Modern Web DAY 24

技術 Day 24, Redux Action / ActionCreator 根本是歸納法

今天呢,就先來定義Action 先歸納一下 看看我們的containers/ReadingList.jsx class ReadingList extends...

鐵人賽 Modern Web DAY 1

技術 Day04: 那些 solidjs 帶給我們的方法(一)

前言 在 Day03 了解怎麼建立自己的最簡單的 component 後,我們開始深入了解如何使用 solidjs 這框架帶給我們的基礎方法, createSi...

鐵人賽 Modern Web DAY 8

技術 react 大冒險-create react app 出現錯誤-day 6(番外篇)

如果 npm start 後遇到錯誤.. 人品不好的時候執行 npm start 卻出現錯誤..NPM start returns error, “There...

鐵人賽 Modern Web DAY 27

技術 【Day27】反饋元件 - Progress circle

元件介紹 Progress circle 跟上一篇 Progress bar 一樣是能夠展示當前進度的元件。只是在外觀上面以圓形替代長條形,好處是在寬度不夠的排...