How to create a personal website with React + Scss + Bem: The basis

on YouTube ↗28m

" summary

Builds a simple personal site from boilerplate to live deploy in about 30 minutes using React + Scss + Bem, showing exact steps: create component files (Title, Paragraph, Image), use props to pass different text, set up a variables.scss and import chain, run npm start to preview, install and run the SASS tool to compile to CSS, push to a GitHub repo and publish with GitHub Pages — result is a working hosted HTML/CSS site.

AI-written summary · about

" chapters (16)

1. 0:00Introduction and motivation
2. 1:46Technologies overview
3. 3:32React components explained
4. 5:16Why React over frameworks
5. 5:39Introduction to Sass
6. 6:46GitHub and version control
7. 8:15Setting up the project
8. 11:53Creating reusable components
9. 15:53Adding dynamic content
10. 16:13Installing and configuring Sass
11. 17:20Structuring Sass files
12. 20:49Using variables for styling
13. 21:11Polishing the layout
14. 22:44Deploying to GitHub Pages
15. 25:22Final result and call to action
16. 26:14Q&A session

" related talks

• 27mEasily Integrate SCSS and Flexbox into your React AppCasie Siekman · Developer Summit 2020
• 15mGetting Started with ReactDelba de Oliveira · Next.js Conf 2021
• 14mHow to use React, webpack and other buzzwords if there is no needVarya Stepanova · React Finland 2018
• 16mEnhancing your Static Sites with React Server ComponentsAkash Hamirwasia · React Alicante 2024
• 29mPreprocessors, Components, and CSS in JS or: How I Learned to Stop Worrying and Love the WebsiteJackie Balzer · CSSconf EU 2018
• 29mThe Lonely and Dark Road to Styling in ReactSara Vieira · React Day Berlin 2018
• 36mBuilding Static Sites with ReactIan Sinnott · Spotlight React 2016
• 40mBEM: complete guide for your component frontend developmentVladimir Grinenko · Frontend United 2016