Analista de Controle Externo - Tecnologia da Informação
Roberto está desenvolvendo uma aplicação web usando React, e decidiu utilizar o Bootstrap para que a aplicação seja responsiva. Analise o trecho do código a seguir como parte da aplicação:Marque a opção que aponta problemas para a implementação correta deste projeto.
AO código não necessita da importação do React pois a exportação já vai incorporar no projeto o React.
BÉ necessário acrescentar a importação do CSS do Bootstrap.
CO uso de classes como "container", "text-center", e "btn btnprimary" precisa ser mudado pois não funciona no React.
DO Bootstrap não pode ser utilizado em projetos React devido a incompatibilidades entre as bibliotecas.
EA tag <div> utilizada não é suportada pelo HTML5.
Revelar gabarito e comentário▾
GabaritoB — É necessário acrescentar a importação do CSS do Bootstrap.
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
Bootstrap e React: integração e importação de CSS
Gabarito: letra B. O problema central do código é a ausência da importação do CSS do Bootstrap — sem ela, as classes utilitárias como container, text-center e btn btn-primary não têm estilo algum, pois o Bootstrap é uma biblioteca de estilos que precisa ser carregada no projeto. As demais alternativas apresentam afirmações falsas sobre o funcionamento do React e do Bootstrap.
O Bootstrap é um framework CSS que fornece classes prontas para layout responsivo e componentes estilizados. Para que essas classes funcionem em qualquer projeto — seja ele React, Angular, Vue ou HTML puro — é obrigatório importar o arquivo CSS do Bootstrap. No React, isso é feito normalmente com import 'bootstrap/dist/css/bootstrap.min.css'; no arquivo principal do projeto (geralmente App.js ou index.js). Sem essa importação, o navegador não conhece as regras de estilo e as classes são ignoradas, resultando em uma página sem formatação.
O React, por sua vez, é uma biblioteca JavaScript para construção de interfaces. Ele utiliza JSX, uma extensão de sintaxe que permite escrever HTML dentro do JavaScript. As classes CSS funcionam normalmente no JSX, com uma única diferença: como class é uma palavra reservada do JavaScript, no JSX usa-se className para definir classes CSS. No entanto, isso não significa que as classes do Bootstrap "não funcionam" — apenas que a sintaxe para atribuí-las é diferente. As classes container, text-center e btn btn-primary são perfeitamente válidas e funcionam no React, desde que o CSS do Bootstrap seja importado.
É importante destacar que o Bootstrap não é incompatível com o React. Pelo contrário, existem até versões específicas como o react-bootstrap que integram os componentes do Bootstrap como componentes React. Mas mesmo usando o Bootstrap tradicional (com as classes CSS), a integração funciona perfeitamente — basta importar o CSS. A tag <div> é um elemento HTML5 padrão e é amplamente suportada, inclusive no JSX do React.
A pegadinha desta questão está em confundir a necessidade de importar o CSS do Bootstrap com uma suposta incompatibilidade entre as bibliotecas. O candidato pode pensar que, por ser React, algo precisa ser diferente — mas a verdade é que o Bootstrap é apenas CSS, e CSS funciona em qualquer tecnologia web. O único requisito é que o arquivo de estilos seja carregado no projeto.
Guarde este critério: Bootstrap = CSS → precisa ser importado; React = JavaScript → usa JSX com className. É exatamente essa distinção que separa a alternativa correta das incorretas.
Bootstrap no React
1Bootstrap = CSS
Precisa importar o CSS
Sem importação → classes sem estilo
2React = JavaScript
JSX usa className (não class)
Classes CSS funcionam normalmente
3Integração
Compatível (react-bootstrap existe)
div é suportada no HTML5/JSX
LEVEL · soulevel.com.br
Alternativa A — ❌ Incorreta
Afirma que a importação do React não é necessária porque a exportação já incorpora o React ao projeto. Isso está errado. No React, é obrigatório importar o React (ou usar a nova transformação JSX) para que o JSX seja compilado corretamente. A exportação de um componente não substitui a necessidade de importar a biblioteca. Sem a importação, o código JSX não é reconhecido e o projeto não compila.
Alternativa B — ✅ Correta ⟵ GABARITO
Esta é a alternativa correta. Para que as classes do Bootstrap (container, text-center, btn btn-primary) tenham efeito visual, é necessário importar o CSS do Bootstrap no projeto. Sem essa importação, o navegador não aplica os estilos e a página fica sem formatação. A importação é feita com import 'bootstrap/dist/css/bootstrap.min.css'; no arquivo principal.
Alternativa C — ❌ Incorreta
Afirma que as classes container, text-center e btn btn-primary precisam ser mudadas porque não funcionam no React. Isso é falso. As classes CSS funcionam normalmente no React, desde que o CSS seja importado. A única diferença é que, no JSX, usa-se className em vez de class para atribuir classes — mas isso não invalida as classes do Bootstrap. O problema não está nas classes em si, mas na falta da importação do CSS.
Alternativa D — ❌ Incorreta
Afirma que o Bootstrap não pode ser utilizado em projetos React devido a incompatibilidades. Isso é completamente falso. O Bootstrap é amplamente utilizado em projetos React, seja na forma tradicional (importando o CSS) ou através de bibliotecas como react-bootstrap. Não há nenhuma incompatibilidade entre as bibliotecas.
Alternativa E — ❌ Incorreta
Afirma que a tag <div> não é suportada pelo HTML5. Isso é absurdo. A tag <div> é um elemento HTML5 padrão, amplamente utilizado e suportado por todos os navegadores. No React, a tag <div> é usada normalmente no JSX para estruturar o layout.
PEGA ESSA DICA!
Para questões sobre Bootstrap em React, lembre-se do fluxo: importar o CSS → usar as classes → funcionar. Se a questão menciona que as classes não funcionam, o problema quase sempre é a falta da importação do CSS, não uma incompatibilidade. E lembre-se: no JSX, use className em vez de class.
Marque a opção que aponta problemas para a implementação correta deste projeto.