Easily Integrate SCSS and Flexbox into your React App

on YouTube ↗27m

" summary

Demo converts a Create React App by installing npm install node-sass, renaming .css to .scss and updating imports so Webpack/Babel compiles SCSS. Shows concrete patterns: global SCSS variables and mixins (reset-list, parameterized display mixin) and how to import index.scss into component styles. Lays out a gallery and form by wrapping them in a submain div and applying display: flex plus align-items:flex-start; the result is responsive and works in the live app.

AI-written summary · about

" chapters (8)

1. 0:00Introduction and setup
2. 3:54Installing SCSS in React
3. 7:49Using SCSS variables
4. 11:29SCSS mixins explained
5. 16:05Flexbox basics and setup
6. 19:03Aligning elements with flexbox
7. 22:42SCSS nesting for cleaner code
8. 24:29Resources and summary

" related talks

• 29mThe Lonely and Dark Road to Styling in ReactSara Vieira · React Day Berlin 2018
• 28mHow to create a personal website with React + Scss + Bem: The basisDulce de la Rosa · Women Techmakers Barcelona 2018
• 22mSay Hello to Box, Flex and Stack: Layouts in the Component EraArtem Sapegin · React Boston 2019
• 32mNavigating the React Solar SystemBen Ilegbodu · Framework Summit 2018
• 53mBuilding Web Apps with React.jsPratik Patel · Jfokus 2018
• 49mNavigating the React Solar SystemBen Ilegbodu · Devoxx US 2017
• 34mState of the React EcosystemBen Ilegbodu · ReactNext 2018
• 15mReact Best Practices in 15 SlidesGilles Debunne · DevFest Toulouse 2017