My First React Project (Part 3): Reusable Components, Framer Motion Animation, and Key Lessons Learned
This is the third and final part of my first React project for the Frontend Mentor's Digital Bank Landing Page Challenge . I'm excited to say that I finally finished it. Live Demo: https://bank-landing-page-react-gmtz.vercel.app/ Github Repo: https://github.com/ayra-baet/bank-landing-page-react Learning Component Reusability Beyond Small Elements At first, I thought this final part would mostly involve finishing the Articles and Footer. But while building, I realized something more important: React's reusability isn't limited to small UI elements like buttons or cards; entire sections can be reusable too. Earlier in this project, I reused a single Button component across the header, hero, and footer. This time, I noticed that the Features and Articles sections shared almost the same structure: both had an h2 heading both used a grid layout both wrapped child components The only real difference was that the Features section included a description paragraph. That immediately felt like a perfect use case for a reusable component with conditional rendering. So I created a reusable Section component: function Section ({ backgroundColor , title , description , children }) { return ( < section className = { backgroundColor } aria-labelledby = { ` ${ title } -heading` } > < div className = "container section__container" > < div className = "section__header" > < h2 id = { ` ${ title } -heading` } > { title } </ h2 > { description && < p > { description } </ p > } </ div > < div className = "section__grid" > { children } </ div > </ div > </ section > ); } Then I reused it inside my LandingPage component: function LandingPage () { return ( <> { /* other LandingPage JSX */ } < section id = "features" > < Section backgroundColor = "section--gray-100" title = "Why choose Digitalbank?" description = "We leverage Open Banking to turn your bank account into your financial hub. Control your finances like never before." > < Features /> </ Section > </ section > < section id = "articl