Component-Driven Design systems for React developers workshop

This repository contains exercises for the Design systems for React developers workshop.

Before attending the workshop, please make sure you can run the code in this repository.

Try the app, view the style guide, or view the slides.

Prerequisites

Basic JavaScript, CSS, HTML and React experience is required. Styled-components experience and command line basics will be very useful.

To learn React we recommend the official tutorial and The Beginner’s Guide to React course by Kent C. Dodds.

To learn styled-components we recommend Introduction to styled-components video lesson.

To learn command line basics we recommend Really Friendly Command Line Intro by Tracy Osborn.

System requirements

• Git 2.0, or newer
• Node.js 10.0, or newer
• npm 6.0, or newer

We recommend nvm or n to install Node.js.

Setup

First, clone the repository, and install the dependencies:

git clone https://github.com/component-driven/component-driven-development.git
cd component-driven-development
npm install

Running the code and exercises

Run:

• npm start to work on the exercises, and run the completed app and style guide

Or:

• npm run exercises to work on exercises
• npm run styleguide to run the completed style guide
• npm run app to run the completed app

Tech stack

• React
• React Styleguidist
• styled-components
• styled-system

Further resources

• Awesome component-driven development
• Advanced React Component Patterns

Authors and license

Artem Sapegin, Andrey Okonetchnikov and contributors.

This material is available for private, non-commercial use under the Creative Commons Attribution-NonCommercial 4.0 license. If you would like to use this material to conduct your own workshop, please contact us at hi@component-driven.dev.

Credits

Icons: Ionicons, Font Awesome, Ilya Kolbin, Denis Sazhin.

Photos: Unsplash, Artem Sapegin.