Styling in React andDesign Systems Workshop

See how React can look gorgeous and encourage design consistency at scale

1-Day Styling & Design Systems Curriculum #

Course outline

Styling in React

  • CSS approaches:
    • CSS at run time vs CSS at build time
    • Inline style vs CSS-in-JS
  • UI component libraries comparison: SemanticUI, MaterialUI, Rebass, and React-Bootstrap
  • Styled-components
  • Storybook
Hide detail

Advanced UI Patterns

  • Themes and Variants
  • Compound Components
  • React Composition Model Best Practices:
    • Minimal API Surface Area
    • Optimize for change
Hide detail

Design Systems

  • Design principles for developers:
    • Design system tokens: spacing, fonts, and colors
    • Atomic design: Atoms, Molecules, Organisms, Templates, and Pages
  • Styled System
    • Build a box
    • Design System based on props
      • Array props
      • Variant prop
    • Responsive design
      • Using props instead of writting media queries by hand
      • Array scales
Hide detail

Upcoming dates

Sorry! There are no dates confirmed.

See all upcoming courses

Free learning resources!

Sign up now

Training anywhere, anytime?

Corporate Team Training
"With React, everything is inter-connected which can be difficult to understand. But I see it clearly now [after the course]."

Rafa Fraga, Software Engineer - Freelance

Is this one day workshop right for me? Are you... #

  • A developer or designer with experience building React components and using CSS?
  • A developer or designer interested in building scalable and reusable UIs for big React projects?
  • Not satisfied with the Designer/Developer handover in real-world React projects?
  • A designer that builds React components and interacts with developers.

If you've said 'yes' to these, this workshop could be for you!

Not for React beginners!

Upcoming - All Events#

Sorry! There are no dates confirmed.

Using our site means you consent to our use of cookies. Find out more in our privacy policy.