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

16
Dec1 day

Advanced React UIs & Styling With Design Systems
London, UK
Prices & more details

25
Feb1 day

Advanced React UIs & Styling With Design Systems
London, UK
Prices & more details

17
Mar1 day

Advanced React UIs & Styling With Design Systems
Berlin, Germany
Prices & more details

28
Apr1 day

Advanced React UIs & Styling With Design Systems
London, UK
Prices & more details

19
May1 day

Advanced React UIs & Styling With Design Systems
Hong Kong
Prices & more details

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!

Next workshop: 16 Dec, London

Upcoming - All Events#

10
Dec1 week

React Redux Bootcamp
London, UK
Prices & more details

10
Dec3 days

React Fundamentals
London, UK
Prices & more details

16
Dec3 days

Advanced React Training
London, UK
Prices & more details

16
Dec1 day

Advanced React UIs & Styling With Design Systems
London, UK
Prices & more details

17
Dec1 day

Advanced React Patterns, FP & Performance
London, UK
Prices & more details

18
Dec1 day

Testing in React
London, UK
Prices & more details

20
Dec1 day

Advanced React Patterns, FP & Performance
Lisbon, Portugal
Prices & more details

14
Jan1 month

React Part-Time Course
London, UK
Prices & more details

18
Feb1 week

React Redux Bootcamp
London, UK
Prices & more details

18
Feb3 days

React Fundamentals
London, UK
Prices & more details

24
Feb3 days

Advanced React Training
London, UK
Prices & more details

24
Feb1 day

Advanced React Patterns, FP & Performance
London, UK
Prices & more details

25
Feb1 day

Advanced React UIs & Styling With Design Systems
London, UK
Prices & more details

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