What you will learn
- Explain what a component is and why React uses them
- Write function components that return JSX
- Compose components inside other components to build a page
React is a JavaScript library for building user interfaces from components. A component is a reusable piece of the interface, such as a header, a product card or a button. Instead of copying the same HTML into many places, you write the component once and use it wherever you need it. When data changes, React updates the parts of the page that depend on it.
Modern React components are JavaScript functions that return JSX, a syntax that looks like HTML inside JavaScript. function Header() { return <header><h1>Sunrise Bakery</h1></header>; } is a complete component. Component names start with a capital letter. JSX has a few differences from HTML: use className instead of class, close every tag including <img />, and insert JavaScript values inside curly braces.
Components are used like HTML tags, so <Header /> renders the header. A page component might return <Header />, <ProductGrid /> and <Footer /> together, each defined in its own file and imported where needed. A component must return a single root element, and you can use an empty fragment, written <>...</>, when you do not want an extra wrapper element in the output.