Componentes no React §

---

Um componente é uma peça isolada e reutilizável de uma interface de usuário. Ele encapsula o código, o estado e a lógica, facilitando a organização modular e o desenvolvimento escalável.

Exitem dois tipos principais de componentes são os Componente Stateful e Componente Stateless. Cada um podem ser mais vantajosos de serem usados em determinados casos, por exemplo:

• Stateless para componentes simples: Para componentes simples que dependem apenas de props e não exigem um estado interno, os componentes stateless são mais adequados. São mais fáceis de entender e testar.
• Stateful para componentes com lógica complexa: Componentes stateful são mais apropriados quando há lógica de estado complexa, manipulação de eventos e atualizações frequentes na interface.

Há duas formas de criar um componente no React:

• Componente Funcional
• Componente de Classe

É importante notar que um componente deve conter apenas um elemento raiz. Caso seja necessário ter vários elementos raiz, é preciso envolvê-los em um React Fragment para garantir a correta renderização. Por exemplo:

Errado

function App() {
	return (
		<div></div>
		<div></div>
	)
}

Certo

function App() {
	return (
		<div></div>
	)
}

React Fragment

function App() {
	return (
		<>
			<div></div>
			<div></div>
		</>
	)
}

Ao utilizar o <>...</>, ou a forma mais explícita <React.Fragment>...</React.Fragment>, garantimos que os elementos estão encapsulados corretamente sem a necessidade de um contêiner adicional, assim evitando problemas de renderização e possíveis quebras de estilo no CSS.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)