Skip to content

Latest commit

 

History

History
156 lines (123 loc) · 5.52 KB

Week-10.md

File metadata and controls

156 lines (123 loc) · 5.52 KB
Raw
title dateModified dateCreated tags parent week topics content
Week-10
2024-09-12
2024-08-20
react
[[Intro to React V3]]
10
including graphical elements
styling
lesson plan

Week-10

Introduction

Topics Covered

  • Styling
  • Including Graphic Elements

Lesson Objectives

By the end of this lesson, we will:

Objective 1: Styling

  • examine several approaches to adding styles to a React application
  • author styling using css modules
  • author styling using styled-components

Objective 2: Including Graphic Elements

  • discuss techniques used to include imagery
  • design UI elements incorporating vector graphics
  • describe how to insert dynamic imagery fetched from an external source

Discussion Topics

Styling

[! note] Sass aka SCSS, is a popular extension CSS but is complex enough that learning it fully will distract from the main lessons. We will not be including it in this course.

  • centralized styling in a style sheet works but is not a best practice
    • no scoping - selectors apply across whole applications
      • aka global scope
      • requires discipline to maintain
      • class naming conventions must account for all portions of app
        • names specific enough identify specific elements but remain short + usable
      • creating new selectors becomes harder as a codebase increases in side
        • harder to read selectors - difficult to figure out where it is meant to apply
        • selectors get larger and more brittle (easier to break during future code changes)
        • troubleshooting undesired style changes becomes common
  • CSS Modules
    • CSS file associated with a specific component
      • name is usually ComponentName.module.css
    • imported into file (may need to update linting rule)
    • all class (and animation) names are scoped locally
      • prevents styles from applying outside component
      • a few gotchas with sub-components
      • class + element compound selectors good approach to avoid giving all elements class names
    • non-class-name selectors still apply globally
      • class naming preferred in selectors
      • minimize the use of this to top level styles of the app
  • Styled-components
    • 3rd party library that styles components
    • based off tagged template literals
      • write styling inside component file
      • produces + attaches style sheet to component
    • prevents class-name problems by scoping (similar to css-modules)
    • does a lot of post-processing and optimization under the hood
      • injects styles only when they are needed
      • applies vendor prefixes
    • makes dynamic styling easily
    • works on html elements and custom components

Including Graphic Elements

  • imagery that is core to the application
    • part of the codebase in
      • public/ - referenced by src attribute - "public/cat-sleeping.jpg"
        • Not imported into any component files
        • Vite build does not modify file or name
        • Location is configurable - we won't be doing anything with that though
      • assets/ - referenced through imports in component files
        • Vite creates a url where the asset will be held in the rendered project
        • Vite hashes the filename in deployed code to handle cache invalidation
    • pictures that don't change - hero images, background images
    • small GUI elements - arrows, icons for buttons, logos
  • imagery that changes or is dynamically loaded
    • profile or product pictures
    • article photos or illustrations
    • fetched from external source
    • accessed by using src attribute on <img />
  • easiest to control size by wrapping
    • 100% width on image so it takes up available space
    • apply sizing on wrapping element
  • <img /> events - onLoad, onError
    • animate in or show backup image
  • SVG

Weekly Assignment Instructions

Expected App Capabilities

Stretch Goal: Improve Working with Styled-Components

  • make use of babel-plugin-styled-components in the development process

After completing this week's assignment, the app should be able to:

  • capability 1
  • capability 2
  • capability n

Instructions Part 1

  1. step 1
  2. step 2
  3. step n

Instructions Part 2

  1. step 1
  2. step 2
  3. step n

Instructions Part n

  1. step 1
  2. step 2
  3. step n

References and Further Reading

Styling

Features - CSS Modules (Vite docs) CSS-Modules docs (GitHub) styled-components docs vscode-styled-components - VS Code Extension

Including Graphic Elements

Features - Static Assets (Vite docs) Using SVG (CSS-Tricks) SVG Properties In CSS Guide (CSS-Tricks) How to Convert SVGs into React Components (Fabio Raminhuk) Sizing items in CSS (MDN) Images, media, and form elements - Sizing images (MDN) vite-plugin-svgr - npm