React Functional Components
If you look at any complex webpage, you'll see repeated UI patterns: buttons, navigation bars, profile cards. React allows us to encapsulate these patterns into standalone, reusable pieces called Components.
What is a Functional Component?
Historically, React relied heavily on "Class Components" inherited from Object-Oriented Programming. Modern React is entirely different. A modern component is simply a JavaScript function that returns JSX.
To let React know that your function is a component and not just a regular utility function, it must follow one absolute rule: It must start with a Capital letter (e.g., Header, not header). React uses this casing to differentiate between native HTML tags (like div) and your custom components.
The Power of JSX
JSX stands for JavaScript XML. It allows us to write HTML directly inside our JavaScript code. However, it is fundamentally JavaScript under the hood. Because it's JS, we have to change a few HTML attributes to avoid naming collisions. The most common is changing class to className, as class is a reserved keyword in JavaScript.
We can also inject dynamic JavaScript expressions directly into the UI by wrapping them in curly braces . This is how we map arrays to lists, or show conditional text based on variables.
Communication via Props
Components wouldn't be very useful if they always rendered the exact same static text. Props (short for properties) are how we pass data from a parent component down to a child component.
When you use a component like <Avatar name="Alice" />, React bundles all those attributes into a single object and passes it as the first argument to your function. Inside the Avatar function, you access the data via props.name.
View Full Transcript+
In this module, we transition from vanilla DOM manipulation to React. We cover the shift from imperative programming (telling the browser HOW to do things) to declarative programming (telling React WHAT we want). Functional components are the core of this declarative approach. We establish the rules of JSX: Capitalization, single parent element returns (Fragments), and the injection of JS scope via curly braces. Finally, we establish the unidirectional data flow of React using Props.