[Tutorial] Limpando a aplicação React padrão (React Básico - Aula 4)

Fala galera, tava assistindo aqui a aula 4 do React básico e chega uma parte que o professor diz que vai limpar a aplicação e não explica como fazer. Vim aqui trazer um tuto de como vocês podem limpar a aplicação e o que vocês podem apagar dos arquivos padrões que vem.

1. Apagar arquivos:
Você pode apagar todos os arquivos que estão em vermelho.
image
Nossa pasta ficará assim:
image

2. Apagar comentários do arquivo ./public/index.html:
Podemos entrar no nosso arquivo index.html e apagar todos os comentários.


Ficará assim:

3. Limpando o component ./src/App.js:
Vamos apagar as importações da logo e do css no nosso App component. E alterar o retorno pra exibir apenas um h1 “Hello, Gama Academy!”.
Antes:

Depois:

:bulb: Obs.: Na versão atual do react não precisamos mais fazer o import do react em cada component. Então se possuir uma linha "Import React from ‘react’ " você pode apagar ela também.

4. Limpando o component ./src/Index.js:
No index.js vamos apagar a importação do css e o reportWebVitals.
Antes:

Depois:


Obs.: Nesse arquivo precisamos manter a importação do React, porque estamos utilizando o StrictMode dele.

Por fim, vamos rodar “npm start” no console para ver a aplicação. A aplicação vai abrir no navegador, se você fez tudo certo sua janela ficará assim:
image

Espero ter ajudado vocês, principalmente quem está vendo o react do zero. :grin:
Se esse post ajudou você deixa um like ai! Qualquer dúvida fico a disposição pra ajudar! :heavy_heart_exclamation:

17 Likes

Nossa valeuu. Tava com dúvida nisso aí :sweat_smile:

2 Likes

Fiz essas alterações e deu erro.

durante a aula ela passas as instruções para criar o título fiz igual, já revisei, mas está dando erro.

import React from ‘react’;

function App(props) {

return (

<div>

  <h1>{props.title}</h1>

<input name="usuario" id="usuario" className='usuarioInput' placeholder='Usuário'/>

</div>

);

}

export default App;

2 Likes

vc ta passando o parametro quando você faz a call do app?

2 Likes

Sim, fiz dessa forma que mandei aí em cima, mas mesmo assim está dando erro.

Se o erro foi na props você tem que verificar se passou a props “title” quando chama o App no elemento pai.

No exemplo da aula você teria que ir no arquivo index.js e quando você chama o app passa a propriedade title nele com o texto. Ficaria mais ou menos assim:

1 Like

Obrigado, deu certo aqui !!

2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.