Functional Components in React

So far, we’ve been playing inside App.jsx. But the real power of React isn’t writing one giant file with all the HTML, but dividing the interface into small, independent, and reusable pieces.

Imagine you’re building a car. You don’t manufacture the whole car starting from a block of metal. You manufacture the engine, the wheels, and the seats separately, and then assemble them.

In React (and in almost any modern framework), you do the same thing: you divide things into Components. In this article, we are going to learn about them in React using the functional components syntax.

What is a functional component?

Nowadays, a component in React is simply a JavaScript function that returns JSX.

// This is a valid component
function MyComponent() {
  return <h1>I am a component</h1>;
}

With the arrival of Hooks (which we’ll see soon), functions became capable of doing everything. This made the previous class-based syntax obsolete, as functions are more concise and easier to read.

Names always in PascalCase

Component names must always start with a Capital letter.

• ✅ good: Button, NavBar, UserProfile
• ❌ bad: button, navBar, userProfile

React is very strict about this because it uses this rule to distinguish your components from native HTML tags.

Creating our first component

Let’s be organized from the start. Inside your src folder, create a new folder called components.

Inside, let’s create a file called Greeting.jsx.

Let’s write our component:

// src/components/Greeting.jsx

function Greeting() {
  const name = "Luis";

  return (
    <div>
      <h2>Hello, {name}!</h2>
      <p>Welcome to your first component.</p>
    </div>
  );
}

export default Greeting;

Importing and using the Component

Now that we have the manufactured piece (Greeting.jsx), let’s use it in our main file (App.jsx).

Let’s go back to src/App.jsx and do the following:

// src/App.jsx
import './App.css'
// 1. Import the component
import Greeting from './components/Greeting';

function App() {
  return (
    <div className="App">
      <h1>My Application</h1>
      
      {/* 2. Use it as if it were an HTML tag */}
      <Greeting />
      
      {/* 3. We can reuse it as many times as we want! */}
      <Greeting />
      <Greeting />
    </div>
  )
}

export default App

We have just done Composition. We have created a complex interface (App) from simpler pieces (Greeting).

If tomorrow we want to change the greeting text, we only edit Greeting.jsx and it will automatically update in all three places.

Types of export: Default vs Named

In the previous example we used export default. It’s the most common for components: One file = One main component.

However, sometimes we will want to have a file with several small components (for example, a collection of icons or simple buttons). For that we use Named Exports.

// File: Buttons.jsx
export function BlueButton() { return <button className="blue">Blue</button> }
export function RedButton() { return <button className="red">Red</button> }

// Import (the name must match and use curly braces)
import { BlueButton, RedButton } from './Buttons';

Good structural practices

As the project grows, the components folder can become chaotic. A very common pattern in the industry is the Barrel File or indexing, but for this initial course we will use simple logical grouping.

If a component is very complex, create a folder with its name: