用 Material-UI 和 ReactJS 實現高保真設計

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中的動畫，以及更多！我們將在此討論。

課程內容包括。