Prototyping with React and Design Systems - Hands-on 1 Day Workshop

Create fully customizable React components and communicate better with the engineers you work with.

Mariah Muscato
Growth Product Designer
This is some text inside of a div block.
This is some text inside of a div block.
About the event

As a designer, knowing React you can not only become better at communicating with engineers, but you can also learn how to create prototypes with real data, building more complex UI components that make it easier for you to communicate your design ideas.

React JS has been one of the most used JavaScript frameworks and growing rapidly in its path. Most of the web development companies are building interactive web applications with React JS because of its useful features and easy adaptability. This is why it has been one of the highly sought web skills in recent time.

What will you learn?

This workshop will teach you the basic principles, tactics, terminology, and best practices on how to create fully customizable React components for your own projects .

  • How to create functional, interactive prototypes using React.
  • How to transition a design in Sketch to an interactive React application.
  • The principles, tactics, toolkits, terminology, and best practices  on how to create fully customizable React components
  • Learn how to develop with live-coding tools to quickly validate designs with stakeholders.
  • How to use a design system to create complex component interactions and patterns with React.
  • How  to better communicate your design ideas to the engineers you work with
  • An overview of the core problems that React solves for designers and developers
  • Compare-contrast to common design terminology with Sketch symbols
  • Understand the complexity of implementing your designs using React
Learn by Doing. Project-Based Work During the Workshop.
  • We will use the concepts learned in the workshop to create a component based app to show off your new skills.
  • Learn how to find common areas of reuse when creating React components from a Sketch design.
  • Host your project by publishing to Netlify

You'll leave this workshop with a tangible project and actionable insights that you can apply when you go back to your office, plus tons of tactics that can supersize your skillset and professional growth.  

What technical proficiency do you need to attend the workshop?

The most import thing is to be comfortable with JavaScript and basic web development. A basic understanding of HTML, CSS, and JavaScript is preferable.

Learn JS  and Learn HTML are a helpful refresher and will cover the technical proficiency someone would need to know before attending the workshop. We will have some refreshers for it during the workshop, but if you make it through 50% of that tutorial then you will be fine!

Food and Drinks:

Breakfast snacks, lunch, coffee, tea, non-alcoholic drinks will be provided during the workshop.


About the Trainer

Austin Green is currently a Senior Software Engineer working with Zendesk’ s Garden Design System where he creates accessible and flexible front-end tooling. With over 5 years of production React experience he focuses on helping bridge the gap between engineering and design through better education and tooling. Originally from Kansas City, he loves anything outdoors and his 8 month-old Vizsla puppy, Cooper.


Refunds Policy

If you can no longer make it you may transfer your ticket to someone else, or you can use the credit to attend one of our events in the future. Please check out our website and send us a note at hello [at] rethinkhq[dot]com about the event you'd like to attend. We'll help you transfer your credit to that event instead.  

Thank you to our hosts: Zumper

Interested in Job Opportunities with Zumper? Check out their careers page. They are hiring for Head of Design, Senior Product Design and Brand Designer.