學習如何用 React & Redux | TypeScript | Tailwind CSS 來做一個繪圖App

閱讀時間約 1 分鐘
想要知道如何用最新技術來製作一個繪圖App嗎? 在這裡我利用以下技術完成:
  • React - 前端UI library
  • Redux Tool Kit - State Management 用來傳遞不同Components or 頁面上State和dispatch Action 是一個中心Store(可以叫Manager來理解)
  • TypeScript - Strong Type 程式語言building on JavaScript
  • Tailwind CSS - Css in Js, 有自己的Design System framework

影片教學

總結

  • React | TypeScript | Tailwind CSS 已成為2023主要技術 https://roadmap.sh/frontend,透過案例學習希望能幫助大家學習 😃
  • 至於Redux,用於複雜的頁面很合適

更多相關教學文章

為什麼會看到廣告
avatar-img
12會員
33內容數
設計 + 程式,是一個出版對設計和程式的學習影片和教學文章,目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
JayLinXR 的其他內容
初次學習程式語言不知道從哪方面以及要如何有效學習程式語言,在這次分享希望可以幫助到你們
介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始,這次Jay帶你來做個NFT卡片,一次完整教學案例來理解HTML5和CSS3
XR 設計如何起步呢?這部影片為大家初步介紹關於VR AR 和 XR,往後會近一步講解如何設計XR 體驗設計呦 😃
介紹區塊鏈有哪些重要概念需要學習 - 內存池 - Proof of Work VS Proof of Stack - SLash
近幾年區塊鏈話題熱絡起來,這一集將簡單介紹區塊鏈基礎知識和所需要的技能,此為2022年,會持續關注區塊鏈的技術以及更新影片 總結 了解區塊鏈運作和專業術語 (Block, Transiation, Hash, DFi, Dapp, IPFS, Smart Contract) 當你選擇每個區塊鏈環境(
製作個人作品集有很多方法,Figma是一個免費又支援很多其他套件的工具,你可以用它來製作許多用途,本篇文章和視頻教學教你如何初步認識Figma
初次學習程式語言不知道從哪方面以及要如何有效學習程式語言,在這次分享希望可以幫助到你們
介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始,這次Jay帶你來做個NFT卡片,一次完整教學案例來理解HTML5和CSS3
XR 設計如何起步呢?這部影片為大家初步介紹關於VR AR 和 XR,往後會近一步講解如何設計XR 體驗設計呦 😃
介紹區塊鏈有哪些重要概念需要學習 - 內存池 - Proof of Work VS Proof of Stack - SLash
近幾年區塊鏈話題熱絡起來,這一集將簡單介紹區塊鏈基礎知識和所需要的技能,此為2022年,會持續關注區塊鏈的技術以及更新影片 總結 了解區塊鏈運作和專業術語 (Block, Transiation, Hash, DFi, Dapp, IPFS, Smart Contract) 當你選擇每個區塊鏈環境(
製作個人作品集有很多方法,Figma是一個免費又支援很多其他套件的工具,你可以用它來製作許多用途,本篇文章和視頻教學教你如何初步認識Figma
你可能也想看
Google News 追蹤
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
現代教育強調創新教學法,家庭教育中也可應用這些方法來激發孩子的學習興趣,本文將分享如何在家庭中使用翻轉教室和STEM教育等方法。 應用翻轉教室 讓孩子在家中預習學習材料,課後進行討論和實踐。 引入STEM教育 在家庭中進行簡單的科學實驗和工程項目。 鼓勵自主學習    -
「第一大腦儲存事物與概念的記憶,是分佈式儲存在一個龐大的神經網路。」 這好像蠻有道理,也解釋了寫作的時候,感覺很多回憶透過寫著寫著都連結起來。 所以,其實很多想法就在我們的腦子裡,但要怎麼有效將這些想法叫回來不容易。 我研究卡片盒筆記法收穫最大的,是把想法編號做索引的這個操作。
Thumbnail
有些人20歲時就死了,只是等80歲才埋葬。 你可能有聽過這句很有名的名言,看看自己和身邊的人,是不是已經停止前進了呢?
Thumbnail
自從疫情改變了學校教學的狀態以後,多元化的教學媒材也紛紛滲入教育之中。既然讓孩子接觸多媒體已經是無法阻止的事實,透過科技來輔助教師分析學生的學習狀況,又何嘗不是一件好事呢?這篇文章想要分享這兩年我是如何打造我的智慧教室,也會提及我如何運用科技來輔助教學、診斷學生的學習。
Thumbnail
經歷過疫情以後,我們透過遠距線上教學實現學習的可能性,有越來越多的人了解到學校與文憑不是學習唯一管道,現在我們在自主學習的路上多了一個工具:ChatGPT。 這篇文章是我重點吸收《超速學習》一書如何做的部分,結合ChatGPT,加上我自己實際應用過後的心得,希望可以把它化為一個簡單且實用的方法與步
Thumbnail
本文章介紹了間隔重複的概念,並說明了有哪些程式可以透過間隔重複來提高學習和記憶的效率,並提醒讀者要保持彈性,最後在文章結尾附上了間隔重複相關的科學論文。
Thumbnail
生活跟工作當中,我們常常運用書籍閱讀、生活觀察、網路搜尋來做情報的蒐集,要提高情報蒐集的品質要做到速度、深度、廣度三點。 ➊速度:運用關鍵字搜尋,並且要搜尋第一手資訊。 ➋深度:做好主題式學習,內容要多樣性且高價值。 ➌廣度:連結生活與工作,提煉案例並作回饋分析。
Thumbnail
本文章介紹了遺忘曲線和間距效應的概念,並說明了如何利用這兩個心理學原理來提高學習和記憶的效率。我分享了使用Memory Helper這個App來設定複習時間的經驗,並提醒讀者要保持彈性和自我寬容。
有的自閉症者管到無極限,有的自閉症者完全事不關己。 因此,要用自閉症者的學習方式,協助自閉症者見到人際界線。 視覺自閉症者用社交情境故事圖卡,聽覺自閉症者以討論分析狀況為主 之前的文章,有提到用因果關係進行。 而前提是,那是解決事不關己的自閉症者用的。 這次,我想補充的,是管到無極限的自閉症者,進行
最近的土耳其敍利亞大地震,因人手不夠,台灣的搜救隊進行回報。 因為台灣的九二一大地震,土耳其搜救隊有前來支援。 而在防震知識不斷更新,除了第一時間協助自閉症者更新防震知識,也要用自閉症者的方式,進行學習。 視覺自閉症者要用圖卡配對,聽覺自閉症者要進行聽指令 目前最近的防震措施,是〝趴、扶、穩〞。
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
現代教育強調創新教學法,家庭教育中也可應用這些方法來激發孩子的學習興趣,本文將分享如何在家庭中使用翻轉教室和STEM教育等方法。 應用翻轉教室 讓孩子在家中預習學習材料,課後進行討論和實踐。 引入STEM教育 在家庭中進行簡單的科學實驗和工程項目。 鼓勵自主學習    -
「第一大腦儲存事物與概念的記憶,是分佈式儲存在一個龐大的神經網路。」 這好像蠻有道理,也解釋了寫作的時候,感覺很多回憶透過寫著寫著都連結起來。 所以,其實很多想法就在我們的腦子裡,但要怎麼有效將這些想法叫回來不容易。 我研究卡片盒筆記法收穫最大的,是把想法編號做索引的這個操作。
Thumbnail
有些人20歲時就死了,只是等80歲才埋葬。 你可能有聽過這句很有名的名言,看看自己和身邊的人,是不是已經停止前進了呢?
Thumbnail
自從疫情改變了學校教學的狀態以後,多元化的教學媒材也紛紛滲入教育之中。既然讓孩子接觸多媒體已經是無法阻止的事實,透過科技來輔助教師分析學生的學習狀況,又何嘗不是一件好事呢?這篇文章想要分享這兩年我是如何打造我的智慧教室,也會提及我如何運用科技來輔助教學、診斷學生的學習。
Thumbnail
經歷過疫情以後,我們透過遠距線上教學實現學習的可能性,有越來越多的人了解到學校與文憑不是學習唯一管道,現在我們在自主學習的路上多了一個工具:ChatGPT。 這篇文章是我重點吸收《超速學習》一書如何做的部分,結合ChatGPT,加上我自己實際應用過後的心得,希望可以把它化為一個簡單且實用的方法與步
Thumbnail
本文章介紹了間隔重複的概念,並說明了有哪些程式可以透過間隔重複來提高學習和記憶的效率,並提醒讀者要保持彈性,最後在文章結尾附上了間隔重複相關的科學論文。
Thumbnail
生活跟工作當中,我們常常運用書籍閱讀、生活觀察、網路搜尋來做情報的蒐集,要提高情報蒐集的品質要做到速度、深度、廣度三點。 ➊速度:運用關鍵字搜尋,並且要搜尋第一手資訊。 ➋深度:做好主題式學習,內容要多樣性且高價值。 ➌廣度:連結生活與工作,提煉案例並作回饋分析。
Thumbnail
本文章介紹了遺忘曲線和間距效應的概念,並說明了如何利用這兩個心理學原理來提高學習和記憶的效率。我分享了使用Memory Helper這個App來設定複習時間的經驗,並提醒讀者要保持彈性和自我寬容。
有的自閉症者管到無極限,有的自閉症者完全事不關己。 因此,要用自閉症者的學習方式,協助自閉症者見到人際界線。 視覺自閉症者用社交情境故事圖卡,聽覺自閉症者以討論分析狀況為主 之前的文章,有提到用因果關係進行。 而前提是,那是解決事不關己的自閉症者用的。 這次,我想補充的,是管到無極限的自閉症者,進行
最近的土耳其敍利亞大地震,因人手不夠,台灣的搜救隊進行回報。 因為台灣的九二一大地震,土耳其搜救隊有前來支援。 而在防震知識不斷更新,除了第一時間協助自閉症者更新防震知識,也要用自閉症者的方式,進行學習。 視覺自閉症者要用圖卡配對,聽覺自閉症者要進行聽指令 目前最近的防震措施,是〝趴、扶、穩〞。