Problema no Encoding | React: desenvolvendo com JavaScript

Boa tarde, Emanuele!

Realmente parece ser um problema de encoding, o que é estranho pois o create-react-app já fornece toda meta estrutura padrão de uma página HTML, você pode verificar isto em public/index.html, neste arquivo há o template html:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/react.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Por curiosidade perceba que neste arquivo há uma div com o id 'root', é através desta div que o React renderiza os componentes de forma dinâmica, por isto aplicações React são comumente chamadas de Single Page Applications, pois você pode criar diversas funcionalidades com somente uma única página html, e assim quando você troca de rotas sua página também não dá nenhum recarregamento, pois na verdade você não troca o arquivo html.

Verifique este arquivo para ver se realmente está configurado de forma correta, como o atributo lang da tag html, você pode alterar para pt-br, e principalmente se o atributo charset da tag meta está realmente definido como UTF-8. Você também pode definir o encoding no arquivo CSS global:

@charset "UTF-8";

E por fim, caso esteja utilizando uma fonte externa, a mesma deverá ser importada ou no arquivo HTML, ou via CSS (não sei se esse é o caso), nunca tive problemas com encoding, então até onde eu sei o que pode gerar estes problemas são as metatags e importações (principalmente a falta delas), pode ser até uma configuração maluca do navegador.

Mergulhe em programação