Contents
使用 React ,React Router 和樣式化的元件( styled-components )建立一個影像管理應用程式,使用超過 100 個以上的範例精通 CSS Grid
從這 2.5 小時的課程,你會學到
- 使用超過100個 Grids 範例探索 CSS Grid 的屬性
- 使用 React,React Router和樣式化的元件( styled-components )建立一個完整的影像庫應用程式
- 響應式佈局: 使用 media queries 和 grid-template-areas 快速建立任何裝置的佈局
- 樣式化的元件: 在 React 元件內部編寫 CSS
- 照片庫: 學習如何收集,並調整時尚的照片庫具有專業的外觀和感覺
- 建立兩種佈局: 正方形( Square ) 和層疊形( Cascading )
- React Router: 學習如何重新樣式化連結,使用搜尋參數匹配路由
- 影像模型視窗( Image Modals ): 當一個影像模型視窗開啟時學習如何全域性鎖定捲動( lock scrolling )
要求
- 要建立 GridGallery 應用程式,你應該有執行 create-React-app 的經驗,並具備 React、 CSS 和 Web 開發的基本知識。 第一部分沒有討論 React,只是關於 CSS Grid
課程說明
更新的最新版本的 Reac,Create-react-app,React-Router和樣式化元件!
首先通過 Gridfolio 應用程式練習學習 CSS Grid,探索 CSS Grid 的每個父屬性和子屬性。 然後建立 GridGallery 應用程式,這是一個用 React、 React Router 和 style-components 建立的影像管理應用程式。
在 Gridfolio 應用程式練習,你可以訪問超過 100 個 Grids,每個 grids 對應 CSS Grid 的父屬性和子屬性。 我們通過範例進行了解釋,因此你將看到每個 Grid 屬性如何使用新的和不同的值進行更改,以及如何將多個 Grid 屬性組合在一起。
我們將討論 CSS Grid 更容易混淆的屬性,比如 Grid-auto-flow、 Grid-template-areas 和難以捉摸的 Grid 屬性。 每個講座都是前一講的基礎上進行擴充,給你提供可以在 GridGallery 應用程式練習中使用的知識,這是一個專業的 React 專案,值得任何 React 開發人員擁有。 您還將獲得 Gridfolio 專案的完整原始碼。
在 GridGallery 應用程式練習,你將構建一個真正的影像庫應用程式。 從create-react-app 樣板開始,您將通過 React Router 的範例學習,設計一個影像模型框,建立並測試一個適用於任何裝置的響應式 PhotoGrid。 你將學習如何找到自己的照片庫和字型,以個性化您的影像庫。 你將使用樣式化元件來簡化 React 元件的樣式,而不需要新的 CSS 檔案。 你將獲得對 GridGallery 應用程式專案的原始碼的完全訪問權,因此你可以隨時引用已完成的專案。
我們在這裡回答你的問題,我們希望你成功! 在 Q&A 部分,你將加入一個開發人員社群,開發同一個專案,這樣你就可以進行協作,並獲得關於你的問題的即時回饋。
謝謝,祝你好運!
– react.school 的開發者
目標受眾
- 有經驗的 React 開發者希望將 CSS Grid 整合到自己的工作流程中
講師簡介
react.school _ 增強的 JavaScript 專案
開始工作吧。 我們相信以專案為中心的 web 開發是為軟體開發職涯做準備的最好方式。 我們的課程給你一個 React 開發人員的日常職責的核心洞見。
React 就是未來。 在一項超過20000名開發人員參與的調查中,《 JavaScript 2018 現況》發現,65% 的開發人員”曾經使用過 React 並且願意再次使用它”,這一數字在2017年為58% 。
我們是首席軟體工程師,擁有幾十年在部署和維護 web 應用程式的經驗。 我們在專案中使用 React,提供高效能的資料視覺化應用程式,高階的單網頁應用程式,以及所有的使用者介面給客戶。
我們提供優質的軟體專案建立實際的職涯工作流程,具有專門的支援和完整的原始碼參考。
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
🙌 如何有效率地管理 ChatGPT 輸出與整理自己的 ChatGPT 提示( prompts )使用情境?LN+ for Web 已經針對 ChatGPT 的整合做最佳化
🙌 讓 Notion AI 成為你線上學習的得力助手,詳細操作請參考 – 使用 Notion AI 功能來為 udemy 的課程做摘要總結
- 點選這個✨優惠連結 課程特價 | Udemy 永久擁有課程 NT370 起( 請登入 Udemy|按過“優惠連結”後到”報名參加課程“連結網頁做更新 )
- Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- $代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程

也許你會有興趣
- 最新的 React 新手訓練營(Hooks,Context,NextJS,Router)
- React 前端開發學習地圖
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣!
你必須登入才能發表留言。