Aside from our most recent presidential election, I don't know another topic that is sure to cause more heated debate than how you should style React components. This workshop sets out to cover the main methods for styling in React (and beyond).
Through live code exercises, we will explore the pros and cons of just some of the methods out there. You will learn to make styling decisions based on the scale of a project. By the end you should feel confident that there is hope! You can style React components without losing friends.
This link will take you to a starter React SPA in Codepen.
Fork this repo and refactor the CSS to use the BEM naming convention.
This link will take you to a starter React SPA in Codepen.
This repo has Sass installed for you.
Fork this repo and refactor the CSS to use Variables, nesting, and any other Sass conventions you want.
This is the completed Sass example, don't cheat!
This link will take you to a starter React SPA in Codepen. This is the same pen we used in
Part One. We will slowly start replacing the CSS with inline style objects.
Fork this repo and fill out the rest of the styles using inline javascript.
This is the completed Inline example, don't cheat!
This repo contains the code needed to complete the CSS Modules part of this workshop. I have gotten things started for you by completing the header and footer components.
Open up your terminal:
npm installnpm start
BrowserSync will open up a new tab automatically, that's it!