DEV Community

Ali Hamza
Ali Hamza

Posted on

Day 109 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 109 of my software engineering marathon! After spending weeks building complex game loops and rendering performance modules in pure Vanilla JavaScript, today I took a massive leap forward into the modern full-stack web ecosystem by launching my React.js journey! ⚛️🚀

To ensure lightning-fast bundling speeds and clean modular structures, I initialized my workspace using Vite and dove deep into the bedrock of modern UI engineering: ES6 Module Import/Export Syntax and Functional JSX Compositions!


🧠 Breaking Down the Day 109 Component Model

As showcased live inside my code repository wrapper in "Screenshot (247).png", my initial architecture maps out declarative module patterns cleanly:

1. Component Splitting & Reusability (import)

  • Instead of piling structural blocks into a single massive index file, React shifts the workload into dedicated files.
  • Implemented clean encapsulation by coding an isolated child button element and linking it right into the main view on Line 1:

javascript
  import MeraButton from "./MeraButton";
Enter fullscreen mode Exit fullscreen mode

Top comments (0)