Creating Functional Components in React

Discover the fundamental building blocks of React and learn how to create clean, reusable, and powerful UI elements.

Welcome! Let's build our very first React component. At its heart, it's just a simple JavaScript function.

// A component starts as a function...

The Blueprint: What is a Functional Component?

At its core, a functional component in React is just a plain JavaScript function. It accepts a single argument—an object of data called "props"—and returns React elements that describe what should appear on the screen. The modern way to define one is with arrow function syntax: const MyComponent = () => {...};

Returning UI with JSX

Instead of returning text or numbers, React components return JSX (JavaScript XML). JSX looks like HTML, but it's a powerful syntax extension for JavaScript. Your function must use a return statement and provide a single root JSX element, like a <div>, to wrap all other elements.

Making Components Reusable with Props

Props (short for properties) are how you pass data from a parent component to a child, making them reusable and dynamic. They are passed as attributes in JSX and received as the first argument in your function. For example, <User name="Alex" /> passes a `name` prop to the `User` component.

The Result: Building with Blocks

The true power of React comes from composition. You can build complex user interfaces by nesting components inside one another, just like you would with HTML tags. A `UserProfile` component, for instance, could be composed of smaller `Avatar` and `UserInfo` components.

Practice Zone

Interactive Test 1: Assemble the Component

Arrange the parts to create a valid functional component.

Arrastra en el orden correspondiente.

Arrastra las opciones:

return <h1>Hi!</h1>;

export default MyComponent;

const MyComponent = () => {

Completa el código:

Define the function______

Return the UI______

Export the component______

Unlock with Premium

Interactive Test 2: Complete the Code

Rellena los huecos en cada casilla.

 UserCard = () => {
  return (
    <div>
      <h1>{props.name}</h1>
    </div>
  );
};

 default UserCard;

Unlock with Premium

Practice Example: Code Editor

Create a functional component named `Greeting` that accepts a `name` prop and displays the text "Hello, [name]!".

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Unlock with Premium

Knowledge Check

What is the primary way to pass data INTO a React functional component?

Unlock with Premium

Functional Components in Practice

Functional components are the building blocks of any modern React application. Let's explore how they are used in common, real-world scenarios.

1. Component Composition

Complex UIs are never built as a single, monolithic component. Instead, we create small, focused components and compose them together. This makes our code easier to read, test, and maintain.

function App() {
  return (
    <div>
      <Navbar />
      <MainContent />
      <Footer />
    </div>
  );
}

2. Cleaner Code with Props Destructuring

Instead of repeatedly typing `props.`, you can use JavaScript destructuring to unpack the properties you need directly in the function's signature. This makes your component's dependencies clear at a glance.

// Before: 
function User(props) {
  return <h1>{props.name}</h1>;
}

// After (cleaner!):
function User({ name }) {
  return <h1>{name}</h1>;
}

3. Rendering Lists from Data

A very common task is rendering a dynamic list of items. You can pass an array as a prop and use the .map() method inside your JSX to transform each item in the array into a component.

function ProductList({ products }) {
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

Laptop
Mouse
Keyboard

Practical Takeaway: Think of functional components as reusable recipes. Props are the ingredients you give them, and the returned JSX is the finished dish. Mastering this pattern is key to building anything in React.

Functional Components Glossary

Functional Component: A JavaScript function that accepts an optional props object and returns a React element (typically JSX) to describe the user interface.
JSX (JavaScript XML): A syntax extension for JavaScript that allows you to write HTML-like code within your components. It provides a readable way to define the structure of your UI.
Props (Properties): A read-only object used to pass data from a parent component down to a child component. They are the primary way to make components dynamic and reusable.
Component Composition: The core principle of building complex applications by combining smaller, isolated, and reusable components. For example, a <Page> component might be composed of <Header>, <Sidebar>, and <Article> components.
`return` statement: The JavaScript keyword used inside a functional component to specify the JSX that it should render to the DOM.