Curso de FrontendTutorialPublicado em 22 de fevereiro de 20263 min de leitura

O que é um framework e como o React funciona

React, frameworks e componentes para iniciantes

Entenda o que é um framework, qual a diferença para biblioteca e como o React funciona com componentes, state, props e renderização.

#Curso de Frontend
#React
#Framework
#TypeScript
#Componentes
#Frontend

O que é um framework?

Um framework é uma estrutura pronta que ajuda você a construir uma aplicação seguindo um caminho mais organizado. Ele pode trazer uma forma de organizar arquivos, criar páginas, lidar com rotas, configurar estilos, trabalhar com dados e padronizar o desenvolvimento.

No frontend, a diferença principal é esta: biblioteca você chama quando precisa; framework define uma estrutura maior e geralmente controla mais o fluxo do projeto.

React é oficialmente uma biblioteca JavaScript para criar interfaces de usuário. Mesmo assim, muita gente fala framework React no dia a dia, porque React costuma ser usado com Vite, React Router, Tailwind CSS e bibliotecas de estado.

O que é React?

React é uma tecnologia usada para criar interfaces divididas em partes menores chamadas componentes. Um componente pode ser um botão, cabeçalho, card, formulário, campo de busca, menu, lista de resultados ou rodapé.

Em uma página feita apenas com HTML, CSS e JavaScript, você escreve a estrutura diretamente. Com React, você cria componentes e combina esses componentes para formar a tela.

function Botao() {
  return <button>Clique aqui</button>;
}

JSX, TSX e TypeScript

React usa uma sintaxe chamada JSX. Quando usamos TypeScript, o arquivo geralmente termina com .tsx. Parece HTML, mas está dentro de uma função JavaScript ou TypeScript.

TypeScript ajuda a evitar erros comuns, principalmente em projetos maiores, permitindo declarar quais dados um componente espera receber.

type CardProps = {
  titulo: string;
  descricao: string;
};

function Card({ titulo, descricao }: CardProps) {
  return (
    <article>
      <h2>{titulo}</h2>
      <p>{descricao}</p>
    </article>
  );
}

State e props

State é uma informação que pode mudar dentro de um componente. Props são informações que um componente recebe de fora para ser reutilizado com conteúdos diferentes.

Quando o state muda, o React atualiza a interface. Isso deixa o código mais organizado quando a tela começa a crescer.

import { useState } from "react";

function Busca() {
  const [termo, setTermo] = useState("");

  return (
    <input
      value={termo}
      onChange={(evento) => setTermo(evento.target.value)}
      placeholder="Digite sua busca"
    />
  );
}

Como tudo se conecta?

Uma aplicação React normalmente funciona assim: você cria componentes pequenos, esses componentes recebem dados por props, alguns componentes têm estado, quando o estado muda a tela atualiza, rotas definem qual página aparece e bibliotecas ajudam com estilos, navegação e organização.

Imagine uma página de busca: App organiza a aplicação, Header mostra o topo, SearchInput mostra o campo de busca, ResultsList mostra a lista e ResultCard mostra cada resultado.

Voltar ao blog