fbpx

使用 React 仿製 Instagram – 精通 CSS Grid

課程簡介

使用 React ,React Router 和樣式化的元件( styled-components )建立一個影像管理應用程式,使用超過 100 個以上的範例精通 CSS Grid

課程介紹:English 简中

從這 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

優惠資訊

如何購買這門課程比較划算?可以參考課程購買優惠說明


報名參加課程

Sponsored by Udemy

也許你會有興趣

 學習資訊不漏接-歡迎使用 App 訂閱發文通知 

Spread the love

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: