Solucionado
Boa noite,
Consegui chegar até este ponto da aula, tudo salvo certinho; Porém meu Pc reiniciou. Gostaria de saber como faço para retomar o projeto? Tentei abrir normal e clicar go live e ele mostra uma lista com os diretórios :/
Desde já agradeço a atenção.
Olá Danilo, tudo bem?
Que chato que seu PC reiniciou! Mas não se preocupe, é possível retomar o projeto de onde você parou.
Pelo que entendi, você está utilizando o Live Server para visualizar o projeto em tempo real. Quando o PC reiniciou, o Live Server não conseguiu manter a conexão com o projeto e, por isso, quando você tentou abrir novamente, apareceu uma lista com os diretórios.
Para retomar o projeto, basta abrir o arquivo HTML principal do seu projeto (geralmente chamado de index.html) no seu navegador. Depois, abra o VS Code e clique com o botão direito do mouse no arquivo HTML e selecione a opção "Open with Live Server". Isso deve fazer com que o Live Server abra o projeto novamente e você possa continuar de onde parou.
Espero ter ajudado e bons estudos!
Boa tarde Renan, tudo bem e por aí?
Infelizmente não deu certo, a página ficou branca; e parece que houve uma alteração no código do index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>Talvez eu tenha que retomar do início; Obrigado pela atenção.
Oi Renan, tudo bem?
Quando estamos trabalhamos em um projeto React, é preciso utilizar algum comando que vai inicializar a nossa aplicação em um servidor local, no caso do create-react-app (usado para criar o template React ao longo do curso), a instrução é: npm start.
Para isso, você deve abrir um terminal e digitar o comando que mencionei acima.
Por debaixo dos panos, a aplicação React graças ao NPM irá cuidar de todas as etapas para que o nosso projeto fique disponível em uma porta local e por consequência, esteja visível em nosso navegador.
IMPORTANTE!!
Por que você não conseguiu abrir o arquivo ao executar o index.html ou ao utilizar a extensão Live Server? Vamos analisar o que está escrito no body do arquivo index.html que você enviou:
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>Traduzindo, ficaria:
<body>
<noscript>Você precisa habilitar o JavaScript para executar essa aplicação.</noscript>
<div id="root"></div>
<!--
Este arquivo HTML é um modelo.
Se você abri-lo diretamente no navegador, você verá uma página vazia.
Você pode adicionar webfonts, meta tags, ou análises a este arquivo.
A etapa de construção irá colocar os scripts agrupados na tag <body>.
Para iniciar o desenvolvimento, executar `npm start` ou `yarn start`.
Para criar um pacote de produção, utilizar `npm run build` ou `yarn build`.
-->
</body>Viu só? Foi exatamente o que aconteceu com você, o próprio arquivo do React previu o que poderia acontecer e nos indicou a maneira para corrigirimos.
Um abraço!