iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 1634 瀏覽

鐵人賽自我挑戰組 DAY 9

React初心者30天的探索之路系列第 9 篇

技術 [Day 09] React State & props

State state 為自身component 存放資料的地方，管理內部狀態，格式為一個物件，以class component來說，在建立自身的compone...

Lieutenant ‧ 2020-09-09

0 Like 0 留言 10210 瀏覽

鐵人賽自我挑戰組 DAY 8

React初心者30天的探索之路系列第 8 篇

技術 [Day 08] React lifeCycle 生命週期

什麼是生命週期？就像人有生老病死，component也有類似這樣的概念，了解生命週期可以讓我們知道如何在「對」的時間做「對」的事。從官方提供的這張圖表，可以...

Lieutenant ‧ 2020-09-08

0 Like 0 留言 6300 瀏覽

鐵人賽自我挑戰組 DAY 7

React初心者30天的探索之路系列第 7 篇

技術 [Day 07] Functional Component v.s Class Component

原本以為只有Class Component的寫法，但在看技術文章的時候發現還有一種寫法是Function component，有了React Hook之後，好像...

Lieutenant ‧ 2020-09-07

0 Like 0 留言 3288 瀏覽

鐵人賽自我挑戰組 DAY 5

React初心者30天的探索之路系列第 5 篇

技術 [Day 05] React JSX - html 和JavaScript的完美結合

React利用JSX語法來開發，類似XML的寫法，可以將UI介面跟程式邏輯跟緊密的結合（在html中使用JavaScript語法），一般的瀏覽器是看不懂JSX的...

Lieutenant ‧ 2020-09-05

0 Like 2 留言 4603 瀏覽

鐵人賽自我挑戰組 DAY 4

React初心者30天的探索之路系列第 4 篇

技術 [Day 04] 理解React Virtual DOM

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

Lieutenant ‧ 2020-09-04

0 Like 0 留言 2163 瀏覽

鐵人賽自我挑戰組 DAY 3

React初心者30天的探索之路系列第 3 篇

技術 [Day 03] create-react-app資料夾結構

成功用npx create-react-app指令建構出來的資料夾目錄會如下圖那麼接下來就一一介紹每個檔案的用途吧！ package.json記錄專案用的套件...

Lieutenant ‧ 2020-09-03

0 Like 0 留言 2938 瀏覽

鐵人賽自我挑戰組 DAY 2

React初心者30天的探索之路系列第 2 篇

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

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

Lieutenant ‧ 2020-09-02

0 Like 0 留言 1410 瀏覽

鐵人賽自我挑戰組 DAY 1

React初心者30天的探索之路系列第 1 篇

技術 [Day 01]學習前言

打開求職網站發現不少公司都是要求會前端三大框架，不知不覺已經成為前端工程師的標準配備了，好多公司都用React開發，不愧是前端框架市佔率最高的！假設學會了Re...

Lieutenant ‧ 2020-09-01

0 Like 0 留言 1039 瀏覽

技術 React 元件的生命周期:

React 元件的生命周期: 只講常用的: 1.constructor:初始化4.render:在網頁上輸出元件內容2.componentDidMount:輸出...

jbuduoo ‧ 2020-07-23

1 Like 0 留言 1352 瀏覽

技術 React 學習筆記_29(在React中使用Redux - 5)

簡介上一篇中我們已經將大部分的內容與功能都建立完成，最後要建立的便是給使用者選擇要看到那些Todo的選項按鈕，顯示篩選分別為 : 全部Todo 已經完成的T...

Fandix ‧ 2020-05-21

2 Like 0 留言 1092 瀏覽

技術 React 學習筆記_28(在React中使用Redux - 4)

簡介上一篇中我們已經將AddTodo建立好並且確認Reducer會產生新的state，接下來要建立將Todo物件顯示在UI的組件，由於TodoList只負責渲...

Fandix ‧ 2020-05-20

1 Like 0 留言 925 瀏覽

技術 React 學習筆記_27(在React中使用Redux - 3)

簡介上一篇中我們已經將Action與如何處理Action的Reducer建立好了，接下來將整個TodoList專案透過以下順序建立: 輸入新的Todo內容並...

Fandix ‧ 2020-05-19

2 Like 0 留言 916 瀏覽

技術 React 學習筆記_26(在React中使用Redux - 2)

簡介上一篇中提到了React與Redux的結合並且設計了Component的階層，本篇將照著設計好的Component進行實作。 Action Creater...

Fandix ‧ 2020-05-18

1 Like 0 留言 3247 瀏覽

技術 MensWalk - Pure React Calendar

Pure JS React 日曆使用 new Date 製作日曆更新：我後來改寫的更加簡潔，並且抽離成hook詳情可參考前端野人顯示日期需要注意m...

前端野人 ‧ 2020-05-18

2 Like 0 留言 1620 瀏覽

技術 React 學習筆記_25(在React中使用Redux - 1)

簡介雖然Redux與React沒有關係，可以用Redux搭配Angular,JQuery甚至原生JavaScript，不過由於React是單向資料流的形式，若...

Fandix ‧ 2020-05-17

0 Like 0 留言 6007 瀏覽

技術【React.js 筆記】- 使用useContext和useReducer進行多層子父元件溝通

接續自己的文章【React.js入門 - 21】各階層Component的溝通在React中常常會遇到需要在多層component的之間溝通的情形。在沒有...

Andy Chang ‧ 2020-05-07

2 Like 0 留言 6693 瀏覽

技術 React 學習筆記_23(在React中使用Icons)

簡介 Font Awesome 是一個基於CSS和LESS的字體和圖標工具套件，常常能夠在HTML中加入一些圖標，但是在React中是使用JSX來撰寫HTML的...

Fandix ‧ 2020-05-06

1 Like 0 留言 14919 瀏覽

技術 React 學習筆記_19(在React中使用Axios調用JSON-Server數據)

簡介 axios 是一個基於 Promise 的 HTTP 客戶端，專門服務於瀏覽器和 node.js 。功能在瀏覽器中傳送 XMLHttpRequest...

Fandix ‧ 2020-04-12

3 Like 0 留言 3632 瀏覽

技術 React 學習筆記_16(React Toastify彈出組件)

React Toastify彈出組件簡介使用React-Toastify來達成簡易的彈出效果。 Step 1: Installation npm insta...

Fandix ‧ 2020-04-06

1 Like 0 留言 1385 瀏覽

技術 React 學習筆記_15(React 圈圈叉叉練習 - 2)

前言上一篇已經完成了圈圈叉叉的遊戲，現在要加入"回到上一步"的功能。上一篇的程式中使用了slice()這個方法來複製squares，其...

Fandix ‧ 2020-04-04

1 Like 0 留言 1207 瀏覽

技術 React 學習筆記_14(React 圈圈叉叉練習 - 1)

前言主要練習React官網中的題目，使用React達成做出圈圈叉叉的小遊戲，練習項目為利用props傳遞資料建立互動式Component 提升State...

Fandix ‧ 2020-04-04

1 Like 0 留言 1000 瀏覽

技術 React 學習筆記_13(React 中的生命週期)

React Component的生命週期生命週期狀態 Mounting : 會再元件建立時被執行 Update : 正在重新選染HTML時執行 Unmoun...

Fandix ‧ 2020-03-29

1 Like 0 留言 571 瀏覽

技術 React 學習筆記_8 (Thinking in React - 4 )

第五步：加入相反的資料流目前已經建立了由上往下傳遞的props與state，但需要加入反向的資料流。為了確保當使用者改變表格內容後就會更新state已反映...

Fandix ‧ 2020-03-22

1 Like 0 留言 627 瀏覽

技術 React 學習筆記_7 (Thinking in React - 3 )

第三步：找出最少（但完整）的 UI State 思考應用程式最少需要哪些可變的 state，關鍵是DRY(避免重複代碼原則)DRY(避免重複代碼原則):在軟體...

Fandix ‧ 2020-03-21

1 Like 0 留言 827 瀏覽

技術 React 學習筆記_6 (Thinking in React - 2 )

第二步：在 React 中建立一個靜態版本不要使用 state 來建立靜態版本，因為state是保留給互動性，也就是會隨時間改變的資料。可以從最上層往下層...

Fandix ‧ 2020-03-19

1 Like 0 留言 835 瀏覽

技術 React 學習筆記_5(Thinking in React - 1 )

React 思考第一步：將 UI 拆解成數個 component 單一功能原則:在物件導向程式領域中，單一功能原則規定每個類都應該有一個單一的功能，並且該功能...

Fandix ‧ 2020-03-18

2 Like 0 留言 989 瀏覽

技術 React 學習筆記_4(可控組件(State)與不可控組件(Ref))

Ref 在典型的 React中，props 是父層與子層唯一的互動方式。藉由使用新的 prop 重新 render 來改變你的子層。什麼時候該使用 Ref...

Fandix ‧ 2020-03-16

1 Like 0 留言 1701 瀏覽

技術 React 學習筆記_3(合成事件/Component中的事件處理)

React Router 安裝react-router-dom yarn add react-router-dom 使用方法:1.匯入BrowserRo...

Fandix ‧ 2020-03-15

1 Like 0 留言 1113 瀏覽

技術 React 學習筆記_2(使用Props傳遞參數)

擴充Google Chrome React 使用者工具 React 開發者工具支援 Chrome 瀏覽器，可以在擴充套件商店下載（Chrome 擴充套件）。下載...

Fandix ‧ 2020-03-14

1 Like 0 留言 1105 瀏覽

技術 React 學習筆記_1(使用React Create App 建立React)

使用React Create App 快速建立React模板開啟命令提示字元使用命令 "cd desktop" 將目錄移動到桌面使用命...

Fandix ‧ 2020-03-13