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: 19 Jun, Friday
  • Timings: 09:00-18:00 GMT+01:00
  • Location:
    Remote
  • Conference room: Zoom.us
Buy tickets

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

Find out more

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?
  • 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 ...

Tell us about yourself

What are your main interests in a React training?

You may also be interested in

5
Jun3 weeks

Advanced React Part-time
Remote
Prices & more details

5
Jun1 day

Advanced React Patterns, FP & Performance
Remote
Prices & more details

8
Jun3 hours

GraphQL Trial
Remote
Prices & more details

Related articles

See all blogs

Secure React apps using JWT and React Router

You should protect your React app at two different layers: At the API layer, the data that the user can read or change. At the React layer…

Read more

The Five 2020 T-Shaped Developer Trends You Need to Know

With the rate of technological change today, no developer can afford to rest on their laurels and...

Read more

What's the difference between React & React Native?

The two share a lot in common, but you’re going to want to take a minute before you dive in and create your first React Native app. There…

Read more

Upcoming Training#

5
Jun3 weeks

Advanced React Part-time
Remote
Prices & more details

8
Jun3 hours

GraphQL Trial
Remote
Prices & more details

10
Jun3 hours

React Trial
Remote
Prices & more details

16
Jun2 hours

Architectures and tools for business optimization - with fishbowl conversation
London, UK
Prices & more details

8
Jul3 days

React Redux Fundamentals
Remote
Prices & more details

8
Jul1 week

React Bootcamp
Remote
Prices & more details

13
Jul3 days

Advanced React
Remote
Prices & more details

5
Aug3 days

GraphQL API
Remote
Prices & more details

26
Aug1 week

React Bootcamp
London, UK
Prices & more details

26
Aug3 days

React Redux Fundamentals
London, UK
Prices & more details

31
Aug3 days

Advanced React
London, UK
Prices & more details

23
Sep1 week

React Bootcamp
Barcelona, Spain
Prices & more details

23
Sep3 days

React Redux Fundamentals
Barcelona, Spain
Prices & more details

28
Sep3 days

Advanced React
Barcelona, Spain
Prices & more details

14
Oct3 days

React Redux Fundamentals
London, UK
Prices & more details

Corporate team training

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