S06 L02 React Components (First App Component)

📘 REACT COMPONENTS — FIRST APP COMPONENT In this lesson, we move JSX markup out of main.jsx and into a reusable React component. You will create an App component file, export/import it correctly, and understand key naming conventions that React and JSX rely on. 🎯 IN THIS VIDEO Recap how the React Vite plugin transforms JSX into JavaScript Replace inline JSX in main.jsx with a component tag Understand lowercase HTML tags vs uppercase React component tags Create an App.jsx component file Return JSX from a component function Convert component declaration to arrow function syntax Use export default for the primary component export Import default exports without curly braces and render in root 🚀 HOW TO USE THIS COURSE Componentization is the foundation of scalable React architecture. This pattern is the first step toward composing larger UIs from many small reusable pieces. 👉 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 JSX, uppercase tag names signal custom React components, while lowercase tags are treated as native HTML elements.