iT邦幫忙

reactjs相關文章
共有 711 則文章
鐵人賽 Modern Web DAY 8
激戰 ReactJS 30天 系列 第 8

技術 【Day08】 東西拿來 - Props

在上一篇的程式碼中出現了this.props.XXX這種長相的東西這一篇就要來仔細的看看究竟這是什麼神奇的東東囉 Props props 的中文翻譯是道具在這裡...

鐵人賽 Software Development DAY 30
React框架白話文運動 系列 第 30

技術 React白話文運動30-結尾

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Modern Web DAY 8

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

勝負判斷分析 窮舉法 在 3x3 的圈圈叉叉遊戲中,獲勝的組合只有 8 種,以上圖為例,每個格子裡面的數字代表 block id,我們窮舉出所有獲勝連線: /...

鐵人賽 Modern Web DAY 2

技術 [影片]Gatsby.js 未來的網頁02:安裝Gatsby.js

實作是最好的學習。今天要介紹Gatsby.js的安裝及在local環境運行起來。 YouTube教學影片: ##安裝Gatsby CLI npm instal...

技術 【前端 HTML/JSX】在Input框內部加上Icon?除了使用Bootstrap、Semantic或Material-UI之外你還可以這麼做

相信像下列的輸入框需求,在前端開發的時候很容易遇到 菜鳥前端的第一直覺大概就會想要這樣寫... 把icon的部分直接放在 <input>裡面 &lt...

鐵人賽 自我挑戰組 DAY 24

技術 [Day 24] React Router- 指路者

以往在同個網站切換網頁的時候,就會重新刷新頁面,然後等待資源重新載入才能看到新的畫面,但是人的耐心是有限的,每次的切換如果都需要等待的話,人的耐心就會被消磨殆盡...

鐵人賽 Modern Web DAY 13

技術 Day 13 / Redux -- Container vs Component

Container vs Component <好讀版> 前言 在 redux 和 react 共同構成的架構下,我們建議將全部的元件分成下面兩類,...

鐵人賽 Modern Web DAY 27
Zero to hero with React.js 系列 第 27

技術 【Day 27 React】Redux+API 製作 meme generator—— Part1

現在網路上有許多有趣的梗圖,今天我們不求人!就來串接 Imgflip API 取得梗圖,再透過讓使用者輸入要放在圖片上的文字,做出最客製化的梗圖~ 環境建置...

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

技術 【Day 01】 前情提要

前言 ReactJS是我在不久前接觸到較新的技術當時用起來的心得實在是似懂非懂又沒有足夠的時間透徹研究導致對於基本概念機近全無只有簡單的知道他是什麼東東而已 然...

鐵人賽 Modern Web DAY 7

技術 【Day.07】React入門 - 簡介React、從class到Hook的發展歷史

(2024/04/06更新) 因應React在18後更新了許多不同的語法,更新後的教學之後將陸續放在 新的blog 中,歡迎讀者到該處閱讀,我依然會回覆這邊的...

鐵人賽 Modern Web DAY 19
Zero to hero with React.js 系列 第 19

技術 【Day19 React】React router 在 Single Page Application(SPA) 的應用

做 SPA 囉~~ 唉不是!此 SPA 非彼 SPA。。。。 今天要學習 React router,並透過 Single Page Application(SP...

鐵人賽 自我挑戰組 DAY 20

技術 [Day 20] 用Redux Thunk 來處理非同步action

Redux Thunk的目的就是為了實踐middleware,讓action能做更多的事,想必大家都曾經看過這個錯誤,當action為非同步的時候,就會報錯,R...

鐵人賽 Modern Web DAY 10
一步一腳印的React旅程 系列 第 10

技術 [筆記][React]使用React開發的思考模式(1)-記得把共同狀態提升

前面幾篇文章把React基本的用法都說完了,剩下的就是該如何將它應用在實務面中,所以接下來我會試著和各位一同做出一些小作品,但是在那之前,我們得先了解如何正確的...

鐵人賽 自我挑戰組 DAY 7

技術 【DAY 07】React Component也有生老病死?(上)

【前言】  昨天講完Refs,會不會覺得目前React已經很煩了呢?希望你不會......XD 【正文】  今天要來聊聊React Component的生命週期...

鐵人賽 自我挑戰組 DAY 27

技術 【DAY 27】React-router,其它很有用的組件(下)

【前言】  終於要來到倒數幾篇了!!!有沒有對於這些更熟悉了呢?希望有幫到大家!【正文】  今天來介紹<Redirect>吧! <Redire...

鐵人賽 Modern Web DAY 4
Zero to hero with React.js 系列 第 4

技術 【Day4 React】終於跟 World 說 Hello World!

簡易起手式,我使用 CDN 引入 React 來理解 React 的運作原理 我們需要的 CDN 有三個: 最基本的 React CDN React 在 0....

鐵人賽 自我挑戰組 DAY 28

技術 【DAY 28】用react-loadable與react-router做code splitting吧

【前言】  第28天了.......【正文】  雖著專案越來越大,我們要撰寫的js檔也越來越多,但最後我們都會在App.js(或是Root.js)去import...

鐵人賽 Modern Web DAY 15

技術 仿Trello - 用React DnD製作拖曳(drag)功能

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

鐵人賽 Modern Web DAY 7

技術 Day06 | 一次說完 JSX 基本用法

前言 本來打算直接從 Hooks 開始說起 React,但後來發現還是得先理解基本的操作方法,後續的文章會看得比較輕鬆,但我不會對語法著墨的太深,畢竟接下來的...

鐵人賽 自我挑戰組 DAY 4

技術 [Day 04] 理解React Virtual DOM

會特別寫這篇的原因是以前學習框架的時候只學語法而不懂原理,如果被問到使用框架有什麼好處可能也回答不太出來,由於React是透過Virtual DOM來提升網頁渲...

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

技術 【Day14】 我問你要答R - Forms

核心的概念在前10天差不多都認識了常常我們在寫網頁程式的時候會用到一些互動事件功能接下來就要來認識在 React 中是怎麼呈現這些比較常見的功能囉~ Forms...

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

技術 Day02-React.js基本介紹(JSX)

什麼是 React.js 在開始正式進入今天文章的教學內容之前,先帶大家簡單了解一下什麼是 React.js 。 一進到 React.js 的官網便可以看到這段...

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

技術 【Day07】 你的狀態還好嗎 - State

State 在上一篇的最後有稍微提到組件(components)是可以透過 state 攜帶狀態資料state 是 constructor 中的一部分換句話說他...

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

技術 【Day12】 Rendering

從激戰ReactJS系列開始以來為了滿足多到溢出來的好奇心以及證實自己理解的概念是否正確我們寫了很多小小小小測試程式這些程式裡面有一個共同點就是他們都有使用到r...

鐵人賽 Modern Web DAY 23

技術 【Day23】導航元件 - Pagination

元件介紹 Pagination 是一個分頁元件,當頁面中一次要載入過多的資料時,載入及渲染將會花費更多的時間,因此,考慮分批載入資料的時候,需要分頁元件來幫助我...

鐵人賽 Modern Web DAY 13
一步一腳印的React旅程 系列 第 13

技術 [筆記][React]當React遇上Redux(1)-初次見面

Hello!大家好啊!就算標題讓人搞不清楚狀況,但是點進來的時候應該還沒忘記昨天的成就感吧XD,為了能夠在最後獲得更大的滿足,今天再來開始繼續學習吧! 介紹R...

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

技術 【Day10】 三個願望一次滿足 - 組件API

前面說明了組件的生命週期那這篇就要來介紹常常會使用到的三個 Component API setState 呼叫setState可以更新組件的 state並且會通...

鐵人賽 Modern Web DAY 13

技術 【Day13】數據展示元件 - Accordion/Collapse 摺疊面板

元件介紹 Accordion 是一個可折疊/展開內容區域的元件。主要是針對顯示內容複雜或很多的頁面進行分區塊的顯示及隱藏。 參考設計 & 屬性分析 元件...

鐵人賽 Modern Web DAY 24

技術 Day 24 - React Fetch 向後端API請求資料(1)

Day 23 - AJAX 與 Fetch API 上一章介紹了AJAX與Fetch API, 還有其使用方式 我們今天來實作看看 新增Member.js im...

鐵人賽 Modern Web DAY 24

技術 React route—useNavigate介紹、控制history stack、傳遞參數、重新導向

本文提及以下內容 基本設置 useNavigate控制導向 useNavigate傳遞history stack useNavigate傳遞狀態 頁面重新導向...