drodrigues17/aulas-react

Created with CodeSandbox

Tecnologias que tenho alguma experiência

aulas-react's Issues

Correção Exercício 1.8.3

Correção

Considere a URL abaixo e defina o protocolo, o domínio, o path e a query. Você deve criar uma função que irá receber como parametro cada uma desses valores e no final montar a URL final. Alguns parametros podem ser arrays, qual deles seriam?

URL: [https://www.auxiliadorapredial.com.br/alugar/residencial/rs+porto-alegre+cidade-baixa?quartos=2&sem-fiador-ou-garantias=true](https://www.auxiliadorapredial.com.br/alugar/residencial/rs+porto-alegre+cidade-baixa?quartos=2&sem-fiador-ou-garantias=true)

Nota: 10! Parabéns 🥳

Correção Exercício 1.8.1

Correção

Você deve criar dois botões, um para que sejam listados todos os personagens que são da família Redfield e um botão para que sejam listados todos os personagens da família Baker.

Nota: 10 parabéns 🥳

Comentários

Na linha 28 você faz uso da tag li.

aulas-react/src/exercicios/exercicio1.8.1.jsx

Line 28 in 136699f

<li>{listaPersonagem}</li>

Porém, na implementação do seu onClick o map já está retornando um component JSX do tipo li. Isso faz com que o resultado final da sua aplicação seja um li dentro de um li. Seria mais adequado que seja apenas um nível.

Além disso, você possui lógica duplicada entre os handlers. Seria uma boa fazer uma função que removesse essa duplicidade. Na sua aplicação essa duplicidade é tão pequena que não seria necessário removê-la, porém em uma aplicação mais complexa isso seria necessário.

const gerarLista = (_personagens, _nome) => {
  return _personagens
    .filter((personagem) => personagem.includes(_nome))
    .map((personagem) => <li>{personagem}</li>)
}

Correção Exercício 1.7.1

Correção

i) Crie um Component que irá renderizar apenas um filme. ii) O nome do component pode ser FilmeCard. iii) Nesse Component deve ser renderizado o emoji se o filme é ganhador de oscar.

Tudo ok

Nota: 10 parabéns 🥳

Comentários

Sua função mapearFilmes poderia ser simplificada através do uso de um ternário ¹ e do destructor ², tornando ele muito mais curto. Veja como ficaria:

function mapearFilmes(filmes) {
    return filmes
      .map(({ nome, oscar }) => oscar ? nome + "🏆" : nome)
      .map((filme) => <p>{filme}</p>);
  }

Orientações

Faça a edição dos seus arquivos escritos em .txt para .js para todos os seus exercícios que estão nesse formato. Fica difícil de corrigir os exercícios quando eles não tem formatação visual adequada e seus projetos não irão rodar também. É necessário que seus projetos rodem para que eu consiga corrigí-los. No proximo exercício isso será cobrado.

Footnotes

1. Operador Ternário ↩

2. Destructor ↩

Correção Exercício 3.13.1

Correção

Faça o layout do wireframe abaixo usando flexbox.

Nota: 10! Parabéns 🥳

Comentários

Para a sua classe .botao seria mais adequado o uso do space-between no justify-content. Para o .texto o margin poderia ser simplificado: 10px.

Correção Exercício 3.13.3

Correção

Combinando flexbox e media queries, faça o layout de exibição dos cads do youtube. Para uma resolução baixa deve ser exibido dois cards. Para uma resolução alta deve ser exibido quatro cards.

Nota: 10! Parabéns 🥳

Comentários

Seria mais fácil a criação de um component em React para armazenar o que é equivalente ao video. Veja abaixo. Dessa forma seria possível renderizar vários desses sem duplicidade de código.

const Video = () => {
  return (
    <div className="video">
      <div className="thumbnail">Thumbnail</div>
      <div className="informacao">
        <div className="circulo"></div>
        <div className="inforcaoes-video">
          <p>titulo video</p>
          <p>nome do canal</p>
          <p>numero de vizualizações</p>
        </div>
      </div>
    </div>
  )
}

Correção Exercício 1.8.2

Correção

Faça uma componente que será responsável por adicionar tarefas e excluir tarefas.

Nota: 10 Parabéns 🥳

Comentários

A sua função excluir está fazendo uso do async ao mesmo tempo que está fazendo uso do then.

aulas-react/src/exercicios/exercicio1.8.2.adaptado.tsx

Lines 36 to 42 in faf8995

	const excluir = async (id) => {
	const url = `https://68jb68bukl.execute-api.sa-east-1.amazonaws.com/tasks/${id}`;
	const resultado = await axios.delete(url);
	buscarTodas().then((retornoTarefas) => {
	setTarefas(retornoTarefas);
	});
	};

Por mais que essa abordagem não influencia no resultado final, é aconselhado que o uso do then seja substituido pelo uso do await. O mesmo pode ser aplicado para sua função adcionar. Veja o exemplo abaixo:

const excluir = async (id) => {
    const url = `https://68jb68bukl.execute-api.sa-east-1.amazonaws.com/tasks/${id}`;
    const resultado = await axios.delete(url);
    const retornoTarefas = await buscarTodas();
    setTarefas(retornoTarefas);
};