1-Day Styling in React and Design Systems Workshop London

Learn in this workshop in London how React can look great and encourage design consistency using Design Systems

Learn in this workshop in London how React can look great and encourage design consistency using Design Systems
  • Date: 16 Dec
  • Timings: 09:00 - 18:00
  • Venue: Buildit @ Wipro Digital - 2 Finsbury Avenue London EC2M 2PA UK - map

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

Attendee testimonial

Teaching staff

Further details

  • Food not included
  • Accomodation not included
"We're moving to React so I've looked at the codebase to identify where we could be using advanced patterns..."

Lara Ramey, Software Developer - Meredith Corporation

Is this 1-day React 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.

Not for beginner devs!

Blog: Are YOU the Perfect React Student?

Prices

Loading ...

Please be aware that the ticket only covers the cost of the training, it does not include travel expenses.

Free learning resources

We share our resources directly from our React and GraphQL curriculums and we'd love for you to enjoy and learn from them!

Signup and learn about cutting-edge React and GraphQL plus the latest news on our courses...

We won't spam you as per our Privacy Policy.

Looking to unsubscribe?

Financial Support

Looking for a way to spread the cost of training? We've partnered with Coursebud to offer an easy way to obtain a suitable loan for this training.

Just click the link, and apply directly on the Coursebud site... that's it!

You may also be interested in

10
Dec1 week

React Redux Bootcamp
London, UK
Prices & more details

16
Dec3 days

Advanced React Training
London, UK
Prices & more details

Related articles

See all blogs

Join us at React Day Berlin Conference and Workshops

After a successful appearance at React Amsterdam earlier this year, React GraphQL is thrilled to be...

Read more

A TypeScript tale - The almighty types

“A type is a syntactic method for enforcing levels of abstraction in programs. The study of type...

Read more

Ask Alex: Do I need a CS degree to become a good developer?

If someone else can learn to do it, you can too. That’s always the case, it’s always been the case,...

Read more

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.