1-Day Advanced React UIs, Styling & Design Systems Workshop Barcelona

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

  • Date: TBD
  • Timings: 9am - 6:00pm
  • Venue: To be confirmed
  • Location: To be confirmed
Buy tickets

1-Day Advanced React UIs & Styling Curriculum #

Course outline

Advanced UI Patterns

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

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

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.

If you've said 'yes' to these, this 1-day React workshop could be for you!

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?

Related articles

See all blogs

The number one reason that will make you want to test your code

Why do we write code the way we do it I teach advanced coding to professional developers from all...

Read more

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

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

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

Read more

Upcoming - All Events#

Sorry! There are no dates confirmed.

Corporate team training

Find out more

Contact us

The best way to contact us is by emailing us at hello@reactgraphql.academy.

You can call us during working hours on: +44 20 8123 8184

Otherwise, you can contact us socially on Twitter, Instagram and Facebook or visit our About Us page and directly contact one of our coaches.

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?

Follow us...

Copyright © 2017 - 2019, React GraphQL Academy is a LeanJS product

Looking for a Job?
Search for Developer Careers on Jooble

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