1-Day Styling in React and Design Systems Workshop Hong Kong
Learn in this workshop in Hong Kong how React can look great and encourage design consistency using Design Systems
- On this page:
- Course details
- Is it right for me?
- Pricing
- Date: 19 May
- Timings: 09:00 - 18:00
- Venue: To be confirmed
- Location: Hong Kong
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
Advanced UI Patterns
- Themes and Variants
- Compound Components
- React Composition Model Best Practices:
- Minimal API Surface Area
- Optimize for change
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
Attendee testimonial
Teaching staff
Further details
- Food not included
- Accomodation not included
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!
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?
You may also be interested in
May1 week
React Redux Bootcamp
Hong Kong
Prices & more details
May1 day
Redux
Hong Kong
Prices & more details
May3 days
Advanced React Training
Hong Kong
Prices & more details
Related articles
See all blogsA TypeScript tale - Interfaces, Classes & Generics
So far, in the previous episodes, we have covered the various basic types but will come to a point...
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...
A TypeScript tale - The almighty types
“A type is a syntactic method for enforcing levels of abstraction in programs. The study of type...
Upcoming - All Events#
Dec1 week
React Redux Bootcamp
London, UK
Prices & more details
Dec3 days
React Fundamentals
London, UK
Prices & more details
Dec1 day
Redux
London, UK
Prices & more details
Dec3 days
Advanced React Training
London, UK
Prices & more details
Dec1 day
Advanced React UIs & Styling With Design Systems
London, UK
Prices & more details
Dec1 day
Advanced React Patterns, FP & Performance
London, UK
Prices & more details
Dec1 day
Testing in React
London, UK
Prices & more details
Dec1 day
Advanced React Patterns, FP & Performance
Lisbon, Portugal
Prices & more details
Jan1 month
React Part-Time Course
London, UK
Prices & more details
Feb1 week
React Redux Bootcamp
London, UK
Prices & more details
Feb3 days
React Fundamentals
London, UK
Prices & more details
Feb1 day
Redux
London, UK
Prices & more details
Feb3 days
Advanced React Training
London, UK
Prices & more details
Feb1 day
Advanced React Patterns, FP & Performance
London, UK
Prices & more details
Feb1 day
Advanced React UIs & Styling With Design Systems
London, UK
Prices & more details