{"id":2727,"date":"2026-06-06T03:36:09","date_gmt":"2026-06-06T03:36:09","guid":{"rendered":"https:\/\/tucumandevelopers.com\/index.php\/2026\/06\/06\/my-first-react-project-part-3-reusable-components-framer-motion-animation-and-key-lessons-learned\/"},"modified":"2026-06-06T03:36:09","modified_gmt":"2026-06-06T03:36:09","slug":"my-first-react-project-part-3-reusable-components-framer-motion-animation-and-key-lessons-learned","status":"publish","type":"post","link":"https:\/\/tucumandevelopers.com\/index.php\/2026\/06\/06\/my-first-react-project-part-3-reusable-components-framer-motion-animation-and-key-lessons-learned\/","title":{"rendered":"My First React Project (Part 3): Reusable Components, Framer Motion Animation, and Key Lessons Learned"},"content":{"rendered":"
\n
<\/div>\n

Then I reused it inside my LandingPage component: <\/p>\n

\n
function<\/span> LandingPage<\/span>()<\/span> {<\/span> return<\/span>(<\/span> <><\/span> {<\/span>\/* other LandingPage JSX *\/<\/span>}<\/span> <<\/span>section<\/span> id<\/span>=<\/span>\"features\"<\/span>><\/span> <<\/span>Section<\/span> backgroundColor<\/span>=<\/span>\"section--gray-100\"<\/span> title<\/span>=<\/span>\"Why choose Digitalbank?\"<\/span> description<\/span>=<\/span>\"We leverage Open Banking to turn your bank account into your financial hub. Control your finances like never before.\"<\/span> ><\/span> <<\/span>Features<\/span> \/><\/span> <\/<\/span>Section<\/span>><\/span> <\/<\/span>section<\/span>><\/span> <<\/span>section<\/span> id<\/span>=<\/span>\"articles\"<\/span>><\/span> <<\/span>Section<\/span> backgroundColor<\/span>=<\/span>\"section--gray-50\"<\/span> title<\/span>=<\/span>\"Latest Articles\"<\/span> ><\/span> <<\/span>Articles<\/span> \/><\/span> <\/<\/span>Section<\/span>><\/span> <\/<\/span>section<\/span>><\/span> {<\/span>\/* other LandingPage JSX *\/<\/span>}<\/span> <\/><\/span> );<\/span> }<\/span> <\/code><\/pre>\n
\n<\/p><\/div>\n<\/p><\/div>\n
This made the code feel much cleaner and more scalable. If I ever add another section with the same structure, I can simply reuse the component instead of rewriting markup from scratch.<\/p>\n
That was one of the biggest “React mindset” moments during the project.<\/p>\n
  <\/a> Adding Animations with CSS + React Hooks <\/h2>\n
For the Hero Section, I wanted a fade-in + slide-up animation when the mockup image loads.<\/p>\n
In plain HTML\/CSS, I’d rely on CSS animations triggered by page load. But in React, I used the useState hook with the onLoad event: <\/p>\n
\n
function<\/span> HeroSection<\/span>()<\/span> {<\/span> const<\/span> [<\/span>imageLoaded<\/span>,<\/span> setImageLoaded<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>false<\/span>);<\/span> return<\/span>(<\/span> <<\/span>section<\/span> className<\/span>=<\/span>{<\/span>`hero <\/span>${<\/span>imageLoaded<\/span> ?<\/span> \"<\/span>loaded<\/span>\"<\/span> :<\/span> \"\"<\/span>}<\/span>`<\/span>}<\/span> aria-labelledby<\/span>=<\/span>\"hero-title\"<\/span> ><\/span> {<\/span>\/* other hero JSX *\/<\/span>}<\/span> <<\/span>img<\/span> src<\/span>=<\/span>{<\/span>mockup<\/span>}<\/span> alt<\/span>=<\/span>\"Mockup of a banking app on mobile phones\"<\/span> className<\/span>=<\/span>\"hero__mockup\"<\/span> onLoad<\/span>=<\/span>{<\/span>()<\/span> =><\/span> setImageLoaded<\/span>(<\/span>true<\/span>)<\/span>}<\/span> \/><\/span> {<\/span>\/* other hero JSX *\/<\/span>}<\/span> <\/<\/span>section<\/span>><\/span> );<\/span> }<\/span> <\/code><\/pre>\n
\n<\/p><\/div>\n<\/p><\/div>\n
Here’s how it works:<\/p>\n