challenges
June 13, 2024
[
Dev W rkshop
]

React Components: Part 1

Workshops in this series

  1. Setup: files and shadows
  2. Props and TypeScript
  3. Delegated props
  4. Variants: Button component
  5. Centering: Card component
  6. Animations: loading spinner

Prerequisites

Workshop context

Series overview

  • This series (React Components) builds low-level components (Button, Card and Spinner) for an application.

This workshop

  • In this workshop you’ll lay the groundwork for three new React components by creating files and shadow CSS custom properties. To start, fork or clone the scaffolding repository . Take a look at the README for instructions to install and run the app.

After this workshop

  • The application itself will be created in the next two series, Next.js Data Fetching and AI Style Generator .
  • For context, at the end of the AI Style Generator series, the application will look like this. You can see the Button variants in the upper part, and a yellow Card in the lower part.
UI with options to enter a quote, submit the quote, clear the quote or generate a random quote. A styled quote is shown beneath the form.

Workshop goal

By the end of this workshop you will have:

  1. files for Button, Card and Spinner components
    • On MacOS and Linux, you can use the new-component npm script (defined in package.json) to create files for a new component.
    • Since new-component isn’t guaranteed to work on Windows, Windows users can create files manually, using the the new-component README for reference.
    • new-component creates files for CSS Modules. If you prefer to use a different styling system (say, Tailwind CSS or Pigment CSS ), feel free to set up your components for your preferred system instead.
  2. CSS custom properties for three shadow styles (low, medium and high), from Josh W. Comeau’s Shadow Palette Generator
    • These shadows will be used for styling Button and Card in future workshops.

Hints

Hint 1 You can run the new-component npm script with this command: npm run new-component ComponentName, (replacing ComponentName with the name of your new component). For more information on the script, see the README .

Hint 2 Update the background color in the Shadow Palette Generator to be the app’s background color: #eff1ef (you can find that defined in src/app/globals.css as the background-color for the body). Click on the background color swatch in the generator and add the new color in the color picker like this:

An HTML color picker with the hex color 'eff1ef' entered

(Your color picker may look a little different depending on what browser and operating system you’re using.) All the other parameters can use the default (or play around with them to find something you like better!). Then add the generated tokens to src/app/globals.css.

Resources

Go to solution and explanation