HTML com React
HTML com React é a combinação do poder estrutural do HTML com a flexibilidade e interatividade do React. Enquanto o HTML fornece o “esqueleto” da sua aplicação web, React funciona como o “sistema elétrico e a decoração do cômodo”, permitindo que elementos sejam dinâmicos, reutilizáveis e facilmente atualizáveis.
Essa abordagem é essencial em projetos modernos como sites de portfólio, blogs, e-commerces, portais de notícias e plataformas sociais. Por exemplo, um site de e-commerce precisa atualizar a lista de produtos rapidamente sem recarregar a página inteira, e um portal de notícias deve apresentar novos artigos de forma fluida. O React permite que criemos componentes interativos, enquanto o HTML mantém uma base organizada e semanticamente correta.
Neste conteúdo, você aprenderá a estruturar HTML dentro do React usando JSX, criar componentes reutilizáveis, renderizar elementos dinamicamente e aplicar boas práticas avançadas. Pense neste processo como escrever uma carta (HTML) e depois usar um sistema postal inteligente (React) que envia a carta rapidamente e atualiza seu conteúdo em tempo real. No fim, você terá ferramentas para criar sites modernos, responsivos e escaláveis.
Exemplo Básico
html<!-- Basic HTML with React Example -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Exemplo Básico React</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Create a simple React element
const element = <h1>Olá, este é meu primeiro título em React!</h1>;
ReactDOM.createRoot(document.getElementById("root")).render(element);
</script>
</body>
</html>
---O código acima mostra como HTML e React trabalham juntos em sua forma mais simples. Primeiro, definimos a estrutura básica do documento HTML com <!DOCTYPE html>,
e . Dentro do , carregamos as bibliotecas React e ReactDOM, que são responsáveis por criar e renderizar componentes. A biblioteca Babel é necessária para interpretar JSX, que é a sintaxe que nos permite escrever HTML dentro do JavaScript.No corpo da página, criamos uma , que funciona como o contêiner principal para todos os componentes React. Esse é o ponto onde o React controla o DOM.
Em seguida, dentro de