Rafael Alves ITM

Componentes de função no React

Leitura de 2 min

🎯 Componentes de Função no React

Em poucas palavras

React components are regular JavaScript functions, but their names must start with a capital letter or they won’t work!

📝 Notas e Desenvolvimento

React function components are a fundamental building block for creating user interfaces. Here’s how they are structured:

  • Function names should start with a capital letter (know as PascalCase or CamelCase).
  • The function returns JSX, which describes the UI elements to render.
// This function, for example, simply create a button with the text "I'm a Button"
function MyButton() {
  return (
    <button>I'm a Button</button>
  );
}

Pitfall

React components are regular JavaScript functions, but their names must start with a capital letter or they won’t work!

To make a function component available for use in other files, you need to export it. Here are the common ways to do that:

1. Default Export:

This is typically used when you want to export a single primary component from a file.

function MyButton() {
  return (
    <button>I'm a Button</button>
  );
}
 
export default MyButton;

Or, you can combine the function definition and export:

export default function MyButton() {
  return (
    <button>I'm a Button</button>
  );
}

2. Named Export:

This is useful when you want to export multiple components, functions, or variables from a single file.

export function MyButton() {
  return (
    <button>I'm a Button</button>
  );
}

Then, in another file, you would import it like this:

import { MyButton } from './MyButton';

:: Reference :: Your First Component – React

🔗 Conexões e Contexto

📚 Referências e Fontes

Citações Diretas

Visão de gráfico

Backlinks