Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/component-driven/component-driven-development
Component-driven Design Systems Workshop
https://github.com/component-driven/component-driven-development
Last synced: 18 days ago
JSON representation
Component-driven Design Systems Workshop
- Host: GitHub
- URL: https://github.com/component-driven/component-driven-development
- Owner: component-driven
- License: other
- Created: 2018-03-19T19:47:18.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-05T10:44:23.000Z (over 3 years ago)
- Last Synced: 2024-05-02T00:58:27.862Z (6 months ago)
- Language: JavaScript
- Homepage: https://cdds.component-driven.dev
- Size: 19.5 MB
- Stars: 60
- Watchers: 4
- Forks: 14
- Open Issues: 5
-
Metadata Files:
- Readme: Readme.md
- License: License.md
Awesome Lists containing this project
README
# Component-Driven Design systems for React developers workshop
[](https://travis-ci.org/component-driven/component-driven-development)
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](https://cdds.component-driven.dev/), [view the style guide](https://cdds.component-driven.dev/styleguide/), or [view the slides](https://cdds.component-driven.dev/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](https://reactjs.org/tutorial/tutorial.html) and [The Beginner’s Guide to React course](https://egghead.io/courses/the-beginner-s-guide-to-react) by Kent C. Dodds.
To learn styled-components we recommend [Introduction to styled-components](https://egghead.io/lessons/react-introduction-to-styled-components) video lesson.
To learn command line basics we recommend [Really Friendly Command Line Intro](https://hellowebbooks.com/learn-command-line/) by Tracy Osborn.
## System requirements
- [Git](https://git-scm.com/) 2.0, or newer
- [Node.js](https://nodejs.org/) 10.0, or newer
- [npm](https://www.npmjs.com/) 6.0, or newer
We recommend [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/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](https://reactjs.org/)
- [React Styleguidist](https://react-styleguidist.js.org/)
- [styled-components](https://www.styled-components.com/)
- [styled-system](https://styled-system.com/)
## Further resources
- [Awesome component-driven development](https://github.com/component-driven/awesome-list)
- [Advanced React Component Patterns](https://egghead.io/courses/advanced-react-component-patterns)
## Authors and license
[Artem Sapegin](http://sapegin.me), [Andrey Okonetchnikov](http://okonet.ru/) and [contributors](https://github.com/component-driven/component-driven-development/graphs/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](https://ionicons.com/), [Font Awesome](https://fontawesome.com/), [Ilya Kolbin](https://thenounproject.com/kolbin.ia/), [Denis Sazhin](https://thenounproject.com/iconka/).
Photos: [Unsplash](https://unsplash.com/), [Artem Sapegin](http://morning.photos/).