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

目標受眾

有經驗的 React 開發者希望將 CSS Grid 整合到自己的工作流程中

講師簡介

react.school _ 增強的 JavaScript 專案

開始工作吧。我們相信以專案為中心的 web 開發是為軟體開發職涯做準備的最好方式。我們的課程給你一個 React 開發人員的日常職責的核心洞見。

React 就是未來。在一項超過20000名開發人員參與的調查中，《 JavaScript 2018 現況》發現，65% 的開發人員”曾經使用過 React 並且願意再次使用它”，這一數字在2017年為58% 。

我們是首席軟體工程師，擁有幾十年在部署和維護 web 應用程式的經驗。我們在專案中使用 React，提供高效能的資料視覺化應用程式，高階的單網頁應用程式，以及所有的使用者介面給客戶。

我們提供優質的軟體專案建立實際的職涯工作流程，具有專門的支援和完整的原始碼參考。

英文字幕：有

想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

點選這個✨優惠連結✨ ( NT390 起特價中 ) | Udemy 永久擁有課程 ( 在電腦瀏覽器登入，點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得）
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現