使用 React 仿製 Instagram - 精通 CSS Grid

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 的開發者