In this workshop, you’ll learn the ins and outs of writing CSS in JS! We’ll take a React-based app with classic stylesheets, and step-by-step, migrate to CSS in JS using Emotion. We’ll cover both the benefits and the trade-offs of managing styles in JavaScript. Not only will you learn all the ways to leverage Emotion, you will become a Style Master!

This workshop was prepared for DinosaurJS 2019, but feel free to follow along on your own! You're also welcome to fork this repo and share it freely with others ♥.

1. A safe and welcoming space

As part of DinosaurJS, this workshop adheres to the JSConf Code of Conduct.

The Quick Version

JSConf is dedicated to providing a harassment-free conference experience for everyone, regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), or technology choices. We do not tolerate harassment of conference participants in any form. Sexual language and imagery is not appropriate for any conference venue, including talks, workshops, parties, Twitter and other online media. Conference participants violating these rules may be sanctioned or expelled from the conference without a refund at the discretion of the conference organisers.

2. Fun

3. Mastery of Emotion

• JavaScript
• a little bit about component-oriented design in the frontend
• basic CSS - nothing expert-level

• Emotion!
• why CSS in JS is ready for mainstream development
• how to convert traditional stylesheets to CSS in JS
• general concepts for CSS in JS that apply to any alternative, like Styled Components.
• more CSS than you already know (probably)

• greater comfort with component composition in general
• React best practices
• nothing but function components powered by Hooks
• some awesome pro tips
• a love of no semi-colons

We love questions, so please be brave and speak up! We'll do our best to create question asking opportunities. If you have trouble with wording your question, flag one of the instructors or teaching assistants and we'll help!

This workshop has several chapters, and each chapter follows a predictable pattern.

1. Introduce a new concept
2. Identify relevant documentation and starting points
3. Build stuff - on your own, at first
4. A guided walkthrough
5. Talk about it

Each chapter has a useful branch to checkout that has relevant comments and newly created files ready to go. Example: 01-styled-components

Each chapter also has a useful branch to checkout that has the finished solution. Example: 01-styled-components-solution

You can view all of these branches in the Pull Request list

In the project directory, install dependencies first:

npm install

Then you can run the app:

npm start

This starts an amazing Todo app in dev mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

We're using Visual Studio Code for this workshop. This is completely optional, so use whatever you prefer.

For syntax highlighting and IntelliSense we recommend the vscode-styled-components extension.

Prettier is configured, but completely optional.

We don't assume everyone here knows CSS in and out (selectors, properties, etc), or even the latest JavaScript or React syntax (like hooks). We won't walk through every detail as we introduce concepts, but please do your best to focus on the concepts we introduce. When we start each chapter's exercise (your time to code), please raise your hand right away and we'd love to iron out these details!!

Stuff like hooks is almost entirely in the background and we won't be touching these aspects directly!

On that note, here are a few links that may come up!

• React Function Components
• React State Hooks

We also encourage pairing up, or at least offering/asking your neighbor for help and collaborating as much as possible.

1. Styled components
2. Props
3. Advanced props

...