S06 L04 React Button Component

📘 REACT BUTTON COMPONENT In this lesson, we replace manual DOM button creation with a dedicated React button component. You will scaffold a reusable component file, render it inside the app, apply Tailwind styling, and attach click behavior with an event handler. 🎯 IN THIS VIDEO Compare old DOM createElement approach vs React component approach Add a dedicated components folder structure Create CenterButton.jsx with component naming conventions Use extension scaffolding to generate React component boilerplate Export the component and import it into App.jsx Render the custom button component in JSX Apply Tailwind utility classes to match prior design Add onClick handling with inline JavaScript/arrow function syntax 🚀 HOW TO USE THIS COURSE This lesson marks the shift from DOM scripting to component-driven UI construction. Reusable components plus event handlers are the foundation for adding state and interactivity in the next lessons. 👉 Course Website: www.richardbraycourses.co.uk 👉 Course Repositories: www.github.com/RichardBrayCourses 👉 Full course playlist: https://youtube.com/playlist?list=PLNlOxdq7xu14b5ewH4IJC9tMinkgZBuVR&si=Pg8pEDR5UUbQstz6 📂 SECTION REPOSITORY Section 6 repository: https://github.com/RichardBrayCourses/frontend06-react 💡 NOTE In React, event handlers like onClick receive JavaScript expressions (inside braces), not plain string attributes.