iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

自己工具,自己 React - React學習 系列

在軟體開發中會用到各種工具,無論是時間換算、單位換算等等換算,或是隨機資料產出,這些看似小小工具,但如果有地方可以快速的提供服務,那該有多好~

儘管網路上有許多工具可以使用,但睫毛希望藉由這次的機會,學習 React。運用新的技巧和新穎的元件,打造出符合自己使用習慣的開發工具。

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 11

【D11】 小工具:轉換字串編碼(part 1)

在這邊進行字串轉換成某種編碼方式的字,這邊以 URI 和 ASCII 為範例。 不過仍與昨日發生相同問題,也就是第一個字讀不到。這問題之後再解,現在先初步建立我...

2022-09-26 ‧ 由 eyelash*睫毛 分享
DAY 12

【D12】 小小雜談:重整一下腳步

下半場規劃 目前已經到達 12 日,已經可以做出初步的 React 網頁,其中包含著建立 React 物件,並且在本機運作中轉譯(render)成我們想要的 H...

2022-09-27 ‧ 由 eyelash*睫毛 分享
DAY 13

【D13】 初探 props

本日先進行 component 內的 props初探,了解 component 如何與外面的資料進行互動,使每個物件都可以順利的把資料傳入作用。 建立第一版 c...

2022-09-28 ‧ 由 eyelash*睫毛 分享
DAY 14

【D14】 小工具:超連結頁面(props 運用)

把 component 做多點變化,製作出 IG 或是一些個人介紹常見的「多連結工具(Bio Link Tools)」,也就是多個超連結在同一個頁面。因此在這邊...

2022-09-29 ‧ 由 eyelash*睫毛 分享
DAY 15

【D15】 小工具:溫度換算(part 2)

先前遇到的問題 在第10天發現取到的值都是之前的值,對此完全不知道發生什麼事情。經過網友的回應,原來是在 batch update 發生的問題。原來 React...

2022-09-30 ‧ 由 eyelash*睫毛 分享
DAY 16

【D16】 小工具:轉換字串編碼(part 2)

先前問題與解法 於昨日探討 React 避免太多的轉譯(Render)動作,因此改變 state 並不會馬上反應,會需要等到批次作業,因此需要取得另外處理。 第...

2022-10-01 ‧ 由 eyelash*睫毛 分享
DAY 17

【D17】 再探 props:修改上下層資料(part 1)

無論是在 D15 還是 D16,都是在同一層進行修改資料,或是使用參數從「親層」(Parent,個人比較喜歡翻成「親層」,而不是「父層」)傳到「子層」(Chil...

2022-10-02 ‧ 由 eyelash*睫毛 分享
DAY 18

【D18】 再探 props:修改上下層資料(part 2)

上次使用了參數,讓可以從親層修改子層,但要如何讓子層修改親層呢? 製作新子層 要修改親層的方法,就是在修改的 handler 傳到子層,藉由呼叫 handler...

2022-10-03 ‧ 由 eyelash*睫毛 分享
DAY 19

【D19】 小工具:身分證製造機(part 1)-規則

這次製作新的小工具-身分證製造機! 身分證製造機這工具個人很常用,因為要模擬客戶進行交易、帳務處理、顧客管理等等都會要用到,而且還要可以批次產生,因此才想到要做...

2022-10-04 ‧ 由 eyelash*睫毛 分享
DAY 20

【D20】 小工具:身分證製造機(part 2)-身分證檢查功能

已經瞭解規則,接著就開始製作身分證製造機的作業。在開始前,先做個檢查機制,檢查我們的身分證號碼是否正確,也就是 TDD 的精神,這樣才能確認我們的身分證製造機產...

2022-10-05 ‧ 由 eyelash*睫毛 分享