Design systems for React developers and Resilient component libraries in React workshops

This repository contains exercises for Design systems for React developers and Resilient component libraries in React workshops.

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

Try the app or view the style guide.

Prerequisites

Basic JavaScript, CSS and HTML experience is required. Following will be very useful:

• React experience;
• command line basics.

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

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

Design systems for React developers

Run:

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

Or:

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

Resilient component libraries in React

Run:

• npm run start-rcl to work on exercises and run the completed app

Or:

• npm run exercises-rcl to work on exercises
• npm run app to run the completed app

Tech stack

• React
• React Styleguidist
• styled-components
• styled-system
• Rebass Grid (former Grid Styled)
• Stack Styled

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 [email protected].

Credits

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

Photos: Unsplash, Artem Sapegin.