Contents
彌合設計與開發之間的差距! 用 Material-UI/React 來分解詳細的設計並將其變為現實
從這 40.5 小時的課程,你會學到
- 用 Material-UI 從頭開始建立設計精美的營運型應用程式
- 利用 Material-UI 的響應式設計系統,建立在每個螢幕上都完美的應用程式
- 完善 UX/UI 設計的直覺,並看到概念的實際應用
- 在 React JS 中進行搜尋引擎最佳化
- 從 create-react-app 遷移到 Next JS
- 使用 Firebase 的無伺服器功能
- 用 react-lottie 匯出並有效整合動畫
- 在 React JS 中用 Google Analytics 收集資料並跟蹤事件
- 確保 Material-UI 中的樣式支援跨瀏覽器
- 部署營運型 Material-UI/React JS 應用程式
要求
- 熟練掌握 React JS — 這是一個中級水平的課程!
- Mac 或 Windows 電腦
課程說明
歡迎來到學習 Material-UI 的第一文獻推薦付費資源!
在 40 個小時和 200 多個講座中,我將教給你關於使用自 React 本身以來我所學到的最有用的工具–Material-UI來建構精心設計的應用程式的絕對所有知識。
把你的網頁開發技能提高到一個全新的水平,並透過獲得建立專業設計的應用程式的信心,將自己與普通的 React 開發人員區分開來
在學習了 React 之後,我想很多開發者都會遇到一個共同的問題–在實際建構你自己的專案時,有什麼最佳實踐!?你可能腦子裡有一個非常酷的應用程式或網站的想法,但感覺你不知道到底如何用 React 來建立它。你應該從頭開始建立每一個小元件和功能嗎?當然不是!你應該學會讓 Material-UI 來做這些事情。學習讓 Material-UI 為你完成繁重的工作,它擁有全面的可客製化的元件庫,並集成了風格化、主題化、網格和響應式設計系統。
在學習 React 的過程中,你所學的大多數課程都集中在教你理解和建構 React 應用程式所需的核心概念和基本語法/結構。這通常是透過建立一些小專案來完成的,每個專案都圍繞著某個概念,或者透過建立一個大專案,在你進行的過程中納入每個概念。這樣的學習很好,對於理解這個主題絕對是必不可少的。
然而,我注意到,由於對底層概念和功能的關注,大多數的設計和佈局並不特別有趣而且設計是糟糕的–這不是純React課程的重點,所以這不是一個問題–但它們通常不是你會給付費客戶的東西,所以當你開始自己的工作時,這確實留下了一點差距。這正是我製作這門課程的原因!
我們將根據設計檔案從頭開始建立兩個完整的專案–包括我自己的實際的營運網站
我將帶領你經歷我建立第一個營運型應用程式時的學習過程–從以空白螢幕開始專案到部署一個完全響應的網站。我真正想強調的是在 Material-UI 中結構化佈局的思考方式。我們首先會看一下我們將要建立的設計的螢幕截圖,並從視覺上分解出實現每個外觀所需的網格設定,以及相應的程式碼片段!然後我們實際跳進程式碼編輯器,將其付諸實施。
在我們的專案中使用每一個 Material-UI 元件之前,我們也會仔細閱讀它的文件,這樣你就會熟悉所有不同的功能,而不僅僅是我們使用的功能 每個元件都非常靈活,我在這個課程中的目標之一是讓你對整個當前的生態系統有足夠的熟悉,以便準備好理解任何未來的更新。
建構營運型應用程式的一個關鍵部分是確保你的風格和功能不只是在你的系統上工作,而是對任何環境的靈活響應。這就是為什麼我鑽研響應式設計的做法,這樣你不僅會明白要記住的概念,而且會明白如何用 Material-UI 實際實現它們,並在最大、最小和每一個螢幕上獲得完美的樣式。希望這能成為你的第二天性,我們都能在網路上享受到更最佳化的使用者體驗。
我們還將涵蓋額外的主題,如React中的SEO,將我們的專案切換到Next.js以及這樣做的好處,連線Google Analytics以開始做出資料驅動的決策,整合After Effects中的動畫,以及更多!我們將在此討論。
課程內容包括。
- 用 create-react-app、React Router 和 Material-UI 建立一個新專案
- 指導解釋幾乎所有 Material-UI 元件的文件,然後在我們的專案中實施它們
- 不同的影象最佳化策略
- 透過掌握 Material-UI 的集中式造型系統,為你的應用程式建立一個主題
- 學習如何使用響應式設計,以確保你的應用程式在任何螢幕尺寸和方向上看起來都很完美
- 使用 Material-UI 網格系統將複雜的佈局完美對齊
- 從 Adobe After Effects 匯出動畫,並透過 react-lottie 將其有效地匯入到 React 應用程式中
- 利用谷歌 Firebase 雲端函式的無伺服器功能
- 透過 Node.js 傳送電子郵件
- 在 React 中進行網路請求,同時用 Material-UI 顯示反饋,如載入旋鈕
- 在 React 應用程式中進行搜尋引擎最佳化(SEO)。
- 將一個專案從 create-react-app 遷移到Next.js,以及為什麼?
- 跨瀏覽器測試和支援
- 部署 Next.js 專案並新增客製化域名–針對兩個不同的託管平台
- 納入谷歌分析,收集關於誰在與你的應用程式互動以及他們在做什麼的資料
- 建立客製化的組織功能,以控制表格中顯示的資料,包括搜尋、過濾、刪除和撤銷。
除了終身使用超過35小時的內容外,你還可以透過積極的Q/A輕鬆獲得支援。
你不會有任何損失 — 本課程提供30天退款保證,以防你不完全滿意
應對挑戰,模糊設計和開發之間的界限,並學習創造你所設想的專案。
目標受眾
- 希望彌補設計和開發之間差距的 React 開發者
- 覺得自己瞭解 React,但在建立一個完美的網站之前還有更多需要學習的React開發者
- 有很好的設計但在實踐中難以完美實現的 React 開發者
- 希望能夠建立任何交給他們的網站設計的 React 開發者
- 想掌握響應式設計的 React 開發者
- 希望更好地理解 UX/UI 設計原則的 React 開發者
- 尋找更簡單、更快速的方式來啟動和執行乾淨、一致設計的應用程式的React開發者
講師簡介
Zachary Reece 軟體創業家
嘿!我是Zachary Reece,一個來自堪薩斯州威奇托的創業公司創始人。我在9歲的時候就開始建立網站,從圖書館的書中自學HTML和網際網路的知識。從那時起,我把所有的時間都花在學習UI/UX/圖形設計、數學、哲學,當然還有計算機科學。
現在,我繼續在低水平上研究JavaScript,以最佳化我所建立的 Web 和行動應用程式,同時開始研究我的第一個基於機器學習的應用程式。
我在21歲時創辦了一家定製軟體公司–Arc Development,為中西部地區帶來了快速、實惠和美觀的軟體。我希望能在Udemy這裡把我在整個過程中學到的技能傳授給我的學生們
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
報名參加課程

- React :網頁前端開發框架
- React projects:使用 React 開發專案
- React components:React 元件
- React Native :使用 React 開發 app
✍ 不受社群推薦演算法影響,建議 Telegram/Discord/e-mail
你必須登入才能發表留言。