Part 4: React Components: Functional Components & Architecture
Components are the fundamental building blocks of any React application. A component is an independent, reusable, and self-contained piece of UI.
1. Functional Components
In modern React, components are defined as JavaScript functions that accept props and return JSX markup.
export const WelcomeBadge = () => {
return <span className="badge">Welcome back!</span>;
};
export default function UserProfile() {
return (
<section className="profile-container">
<h1>Developer Profile</h1>
<WelcomeBadge />
<p>Building high-performance web applications.</p>
</section>
);
}
Component Rules:
- Capitalized Names: Component names must always start with an uppercase letter (e.g.,
<UserProfile />). React treats lowercase elements as built-in HTML tags (<div>,<p>). - Pure Functions: A React component should act like a pure function with respect to its props—given the same props, it returns the same JSX.
2. Functional vs. Class Components
| Feature | Modern Functional Components | Legacy Class Components |
|---|---|---|
| Syntax | Standard JavaScript function | ES6 Class extending React.Component |
| State | useState, useReducer hooks |
this.state and this.setState |
| Lifecycle | useEffect hook |
componentDidMount, componentDidUpdate, etc. |
this Binding |
No this keyword needed |
Requires manual binding |
| Bundle Size | Smaller, easier to optimize | Larger code footprint |
Key Takeaways
- Components are independent, reusable JavaScript functions returning JSX.
- Always start component names with a Capital letter.
- Functional components powered by Hooks are the modern standard across the React ecosystem.
In Part 5, we will master Props: passing data, immutability, default values, and props.children!