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

JayLinXR-avatar-img
JayLinXR
發佈於軟體開發
更新 發佈閱讀 2 分鐘

想要知道如何用最新技術來製作一個繪圖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，用於複雜的頁面很合適


更多相關教學文章

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/


JayLinXR軟體開發
留言
avatar-img
留言分享你的想法！
avatar-img
JayLinXR
13會員
39內容數
設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
JayLinXR的其他內容
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
JayLinXR
JayLin教你製作DarkMode & LightMode 主題在你的網站上
教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃 註: 最後面"dark"請改為"black"，錄製太快沒有看到有錯誤
#教學#程式#設計
Thumbnail
avatar-avatar
JayLinXR
JayLin教你製作DarkMode & LightMode 主題在你的網站上
教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃 註: 最後面"dark"請改為"black"，錄製太快沒有看到有錯誤
#教學#程式#設計
Thumbnail
avatar-avatar
JayLinXR
學習如何用 TailwindCSS | React | React Router 來做一個動態導覽列
動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
#教學#學習#程式
Thumbnail
avatar-avatar
JayLinXR
學習如何用 TailwindCSS | React | React Router 來做一個動態導覽列
動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
#教學#學習#程式
Thumbnail
avatar-avatar
JayLinXR
Tailwind CSS 初學課程教學
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend 擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度 和不需要創建CSS檔案即可以用class去做Styling
#教學#設計#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
Tailwind CSS 初學課程教學
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend 擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度 和不需要創建CSS檔案即可以用class去做Styling
#教學#設計#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習Next.js 做一個簡單的作品集(Portfolio)
這集跟大家初步介紹Next.js和如何安裝與設置最後製作一個作品集(Portfolio) 如果對設計有興趣的朋友們可以看以下連結文章來學習Figma設計軟件 https://vocus.cc/article/645c733dfd89780001ffe890
#學習#教學#React
Thumbnail
avatar-avatar
JayLinXR
學習Next.js 做一個簡單的作品集(Portfolio)
這集跟大家初步介紹Next.js和如何安裝與設置最後製作一個作品集(Portfolio) 如果對設計有興趣的朋友們可以看以下連結文章來學習Figma設計軟件 https://vocus.cc/article/645c733dfd89780001ffe890
#學習#教學#React
Thumbnail
avatar-avatar
JayLinXR
學習用TypeScript | React | TailwildCSS 跟JayLin一起做待辦事項 App
Todo App是一個很好學習程式語言的專案開始，JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
#學習#專案#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習用TypeScript | React | TailwildCSS 跟JayLin一起做待辦事項 App
Todo App是一個很好學習程式語言的專案開始，JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
#學習#專案#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習如何用 React & Redux | TypeScript | Tailwind CSS 來做一個繪圖App
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習如何用 React & Redux | TypeScript | Tailwind CSS 來做一個繪圖App
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
如何靠自學程式語言?成為年薪百萬軟體工程師(Software Engineer)
初次學習程式語言不知道從哪方面以及要如何有效學習程式語言，在這次分享希望可以幫助到你們
#軟體工程師#程式#台積電
Thumbnail
avatar-avatar
JayLinXR
如何靠自學程式語言?成為年薪百萬軟體工程師(Software Engineer)
初次學習程式語言不知道從哪方面以及要如何有效學習程式語言，在這次分享希望可以幫助到你們
#軟體工程師#程式#台積電
Thumbnail
avatar-avatar
JayLinXR
如何用FIgma製作個人作品集UX/UI教學
製作個人作品集有很多方法，Figma是一個免費又支援很多其他套件的工具，你可以用它來製作許多用途，本篇文章和視頻教學教你如何初步認識Figma
#Figma#教學#設計
Thumbnail
avatar-avatar
JayLinXR
如何用FIgma製作個人作品集UX/UI教學
製作個人作品集有很多方法，Figma是一個免費又支援很多其他套件的工具，你可以用它來製作許多用途，本篇文章和視頻教學教你如何初步認識Figma
#Figma#教學#設計
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News