1-Day Styling in React and Design Systems Workshop: Remote

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

  • Date: 27 Nov, Friday
  • Timings: 09:00-18:00 GMT+01:00
  • Location:
    Remote
  • Conference room: Zoom.us

1-Day Styling & Design Systems Curriculum

Curriculum

Styling in React

  • CSS-in-JS with Styled-components
  • UI component libraries comparison: SemanticUI, MaterialUI, Rebass, and React-Bootstrap
  • Storybook
  • Context
    • Themes
    • Modals
Hide detail

Design Systems

  • Design system tokens: spacing, fonts, and colors
  • Styled System
    • Build a box
    • Design System based on props
      • Array props
      • Variants
    • Responsive design
      • Using props instead of writting media queries by hand
      • Array scales
Hide detail

Learning Objectives

Coaches

Further details

"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?
  • Are you a developer or designer interested in building scalable and reusable UIs for big React projects?
  • You are not satisfied with the Designer/Developer handover in real-world React projects?

Do you have any questions? Contact us :)

Prices

Loading ...

You may also be interested in

Related articles

See all blogs

Top 10 reasons why you should learn React right now

Despite competition from Vue.js and Angular, React is proving developers’ go-to choice for building exciting web applications. Whether you…

Read more

Unit testing explained with JavaScript

What is a unit test? I find useful to start explaining unit tests using the following example. Once I was hired to work on a big project for…

Read more

Heading to React Amsterdam? We’ll see you there!

As the alumni from our training will probably tell you, we live and breathe all things React here at React GraphQL Academy. True as that is…

Read more

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