I Finally Understood React Components | Day 2/100
Code to Career
0:00 / 0:00
I Finally Understood React Components | Day 2/100
40 просмотров · 8 дней назад
Code to Career
22 подписчика
40 просмотров · 8 дней назад
Day 2 of my 100-day journey from ZERO to FULL-STACK DEVELOPER.
Today, I started giving StudyFlow a proper React structure by learning React Components.
In this video, I learned:
• What React Components are
• Why we use Components
• How Components help organize our UI
• How to create separate Components
• How to use Components inside App.jsx
• The basics of Component Reusability
I created my first two StudyFlow Components:
• Header
• Hero
But there's still one problem...
How can we use the same component with different data?
That's what we'll solve in the next part using Props and Reusable Components.
━━━━━━━━━━━━━━━━━━━━
📌 DAY 1 — STUDYFLOW FROM ZERO
On Day 1, I created the StudyFlow React project using Vite, removed the default Vite UI, built my first screen, added basic styling, tested the application, and created my first Git checkpoint.
━━━━━━━━━━━━━━━━━━━━
💻 DAY 1 CODE
App.jsx
import "./App.css";
function App() {
return (
div className="app"
h1 StudyFlow /h1
p Study smarter. Stay consistent. /p
/div
);
}
export default App;
App.css
.app {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-top: 120px;
font-family: Arial, sans-serif;
text-align: center;
}
.app h1 {
font-size: 48px;
margin-bottom: 10px;
}
.app p {
font-size: 18px;
margin: 0;
}
━━━━━━━━━━━━━━━━━━━━
💻 DAY 2 CODE
Header.jsx
function Header() {
return (
header
h2 StudyFlow /h2
/header
);
}
export default Header;
Hero.jsx
function Hero() {
return (
section
h1 Study smarter. /h1
p Stay consistent. /p
/section
);
}
export default Hero;
App.jsx
import "./App.css";
import Header from "./components/Header";
import Hero from "./components/Hero";
function App() {
return (
div className="app"
Header /
Hero /
/div
);
}
export default App;
━━━━━━━━━━━━━━━━━━━━
⚠️ NOTE:
The angle brackets have been removed from the code above because YouTube descriptions may not allow them.
━━━━━━━━━━━━━━━━━━━━
This is only Day 2.
I'm building StudyFlow step by step while learning React properly.
No shortcuts.
No fake progress.
Just learning, building, mistakes, debugging, and sharing the real journey.
DAY 2 / 100 ✓
NEXT → Props + Reusable Components
━━━━━━━━━━━━━━━━━━━━
🎬 START HERE — DAY 1
Watch Day 1 to see how StudyFlow was created from scratch.
👉 Day 1 Video:
[VIDEO 1 LINK]
━━━━━━━━━━━━━━━━━━━━
📚 100-DAY FULL-STACK DEVELOPER SYLLABUS
[SYLLABUS LINK]
━━━━━━━━━━━━━━━━━━━━
If you're enjoying the journey, like the video, comment your current coding goal, and subscribe to follow the 100-day journey.
Like kar do, comment kar do… aur subscribe button pe ek chhota sa code chala ke subscribe kar do! 😂🔥
#CodeToCareer #ReactJS #100DaysOfCode #WebDevelopment #StudyFlow
