Aulas REACT BASICO e INTERMEDIARIO - Resolvendo Possíveis Problemas -

[erickystn]

---

Gente por favor, eu tento ajudar todo mundo… mas sempre deem uma olhada nas minhas respostas lá embaixo e vejam se o erro do colega nao foi o seu, porque percebo que estão tendo casos iguais.
É bom porque adianta o estudo de vocês, mas de qualquer forma eu estou aqui, então se achar que não rolou, posta com o github que olho e tento ajudar…

---

Bora lah
Para quem esta assistindo a aula de React Basico e percebeu que por conta da nova atualização não esta conseguindo acompanhar…

Jaz aqui algumas mudanças…
…
Primeiro… o ReactDom agora não eh mais importado e utilizado chamando o

ReactDom.render ( "componente" , "elemento html") // Modo antigo de fazer

…
Com a atualização:

1. você importa o “ReactDom” de “React/client”.
2. chama a função createRoot passando para ela o elemento HTML (no caso a div root)
3. A partir do resultado dessa função você chama o “.render”. Passando a pagina que será renderizada

---

Com relação ao React-Router-Dom.

Com a nova atualização o Switch foi substituído pelo Routes …

Ao indicar a rota, não usamos mais a propriedade “component” e sim element= < [componente aqui] />, se não trocar , não vai funcionar a sua rota.

---

Ao utilizar o nome ‘Routes’ (como foi solicitado na aula) como nome de componente/função, acabariamos sobrescrevendo o “Routes from Router-Dom” que foi importado lá no topo…

Então sugiro mudar o nome para RoutesApp e atualizar nos imports de outros arquivos. >>> function RoutesApp <<<

---

Também não eh mais necessário o uso de “exact” dentro das propriedades da raiz ( ’ / ’ ) … Essa questão já esta resolvida nessa ultima versão.

---

Para quem chegou na Aula de REACT Intermediário e viu que estah errado o primeiro vídeo…
CONSERTARAM A AULA 1 DO INTERMEDIARIO

Você pode pular a parte da instalação e reorganização das pastas…
(eu tive trabalho montando isso entao nem a pau eu vou apagar )

Primeiro instale o Styled Components….

npm install --save styled-components

Apos isso vamos reorganizar a estrutura de pastas.

1. Criaremos a pasta “Pages” na pasta " SRC ".
2. Dentro da pasta Pages criaremos a pasta “HOME” e “REPOSITORIES”.
3. Dentro da Home e da Repositories incluiremos dois arquivos, cada um em uma, chamado styled.js e teremos essa estrutura:

---

Dentro da styled.js da pasta Home incluiremos o código:

import styled from 'styled-components';

export const HomeContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
`;


export const Content = styled.div`
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
`;

export const Input = styled.input`
  border: 1px solid #ddd;
  height: 1.5rem;
  padding: 0 .5rem;
  border-radius: .25rem 0 0 .25rem;

  &:focus,
  &:active {
    outline: none;
    box-shadow: none;
  }
`;

export const Button = styled.button`
  height: 1.5rem;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  border-radius: 0 .25rem .25rem 0;

  &:focus,
  &:active {
    outline: none;
    box-shadow: none;
  }
`;

export const ErrorMsg = styled.span`
  display: block;
  font-size: 0.65rem;
  color: red;
  font-weight: 600;
  margin-top: 1rem;
`

---

E dentro da styled.js da pasta Repositories:

import styled from 'styled-components';
import { Link } from 'react-router-dom';

export const Container = styled.div`
  width: 100%;
  max-width: 991px;
  margin: 0 auto;
`

export const Title = styled.h1`
  text-align: center;
  font-size: 2rem;
  font-family: sans-serif;
  color: #333;
`

export const List = styled.ul`
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
`;

export const ListItem = styled.li`
  margin: .5rem 0;
  background: #000;
  color: #fff;
  padding: .5rem;
`;

export const LinkHome = styled(Link)`
  display: block;
  width: 4rem;
  text-align: center;
  margin: 2rem auto;
  background-color: #000;
  padding: .5rem 0;
  color: #fff;
  text-decoration: none;
`;

Quando colocamos um arquivo index.js dentro de uma pasta, ao fazer a importação não eh necessário colocar import x from './pasta/index.js… Por padrão ao indicar somente a pasta o javascript vai em busca de um arquivo index.js automaticamente. Então vocês verão os imports só com o nome da pasta.

---

O arquivo Home.js da aula de React Básico devera ser renomeado para index.js e colocado dentro da pasta Home… com a seguinte estrutura:

A importação do styled.js

import * as S from './styled';

A function devera mudar seu nome para App
E o return terá essa nova sintaxe:

<S.HomeContainer>
    <S.Content>
      <S.Input className="usuarioInput" placeholder="Usuário" value={usuario} onChange={e => setUsuario(e.target.value)} />
      <S.Button type="button" onClick={handlePesquisa}>Pesquisar</S.Button>
    </S.Content>
</S.HomeContainer>

---

Arquivo repositories.js da Aula de React Basico vai para Pasta Repositories com o nome de index.js

E com o seguinte código:

import React from "react";
import * as S from './styled';

export default function Repositories(){

    return(
        <S.Container>
            <S.Title> Repositorios</S.Title>
            <S.List>
                <S.ListItem> Repositorio: Nome do Repositorio</S.ListItem>
            </S.List>
        </S.Container>
    )
}

Segue as telas para revisão:

Home > index.js

Home > styled.js

Repositories > index.js

Repositories > styled.js

SRC > App.js

SRC> index.js

SRC > routesApp.js

---

O useHistory esta depreciado, precisando ser mudado para useNavigate …

E não se usa o método push como era no history… Chamamos somente o navigate e passamos o componente por parâmetro:

import {  useNavigate } from 'react-router-dom';

function qualquer(){  

const navigate = useNavigate()
   navigate(" /urlaqui" )
}

---

Na aula 4 do Intermediario… o professor estiliza a propriedade LINK e passa propriedade href como parâmetro.
Isso gera um erro na hora renderizar. O ideal seria o uso do to

---

Na aula 5… ao fazer a renderização condicional ( em miúdos, decidir o que vai ser renderizado na pagina)…
Voces podem receber um aviso de possivel problema ao usar o navigate (ou ate mesmo o history caso estejam em uma versao antiga)…

Isso eh causado porque a função de redirecionamento eh externa ao useEffect.

Você consegue resolver isso dizendo ao useEffect que você esta utilizando uma dependência externa a ele (o navigate) e passa-lo como parâmetro dentro de um array, após a chamada da função que devera ser executado pelo useEffect.

A imagem com Aviso de possivel problema com o uso de dependências não passadas como parâmetro:

Passando o navigate como parametro para o useEffect

Acho que vocês conseguem acompanhar o modulo assim.

SPOILER______________________

Como eu acabei de terminar o modulo…

Estou postando as telas do meu codigo…

O que estah marcado em vermelho foi uma mudanca minha para melhoria do código e pode não ser igual ao do professor. Sugiro fazerem igual ao do professor e modificar caso ja esteja tudo funcionando. Não colocarei o print dos styles pois eh so copia-cola e o codigo estah ali em cima:

Vamos por ordem:

SRC
--------> pages
------------------->Home

---

index.js

SRC
--------> pages
------------------->Repositories

index.js

SRC
--------> App.js

SRC
--------> index.js

SRC
--------> routesApp.js

Bons Estudos a todos!

[annebortoli]

Com esse passo-a-passo pode ter certeza que as pessoas que não conseguiram acompanhar agora conseguem! Ficou top! É sempre importante observar as versões que estão sendo instaladas. Na maioria das vezes os vídeos os professores estão utilizando versões mais antigas. A dica é sempre buscar os erros em sites confiáveis como o stackoverflow e ler documentação.

[gavespoli]

Obrigado pelo seu tempo e disposição em tentar ajudar a resolver estes problemas. Confesso que fico chateado com o descaso que rolou da HC sobre esses e outros errinhos (por exemplo não orientar quem tem outro sistema operacional), deviam se atentar e entregar algo atualizado, ou pelo menos se pronunciar, nem todo mundo sabe como resolver certas coisas, e também não deveria ser o certo a pessoa ficar indo na comunidade resolver questões básicas que poderiam ser entregues pelo “curso”. Dá um desânimo continuar. Mas independente a prova segue lá marcada, e que se lasque quem não conseguiu acompanhar

Enfim, obrigado de novo e perdão pelo desabafo!

[erickystn]

Sim… essas aulas sao antigas… acho que dava tempo de acertar isso… Mas eu gosto de ensinar e ajudar e faco pelo outros o que gostaria de que fizessem por mim sabe?
Porque eu tenho dificuldade de entender as coisas so copiando, preciso de algo como eu fiz, bem explicado e com detalhes do que muda e do porque muda.

[brseghese]

Oi @erickystn,

Ficou muito bem explicado!!!

Muito obrigado, vai ajudar demais!!!

[BrunaKroth]

Boa noite, vi
que na sua alteração do arquivo index.js (home) você trocou o ‘repository’ por ‘item’ (linha 17 e 18) (1º print)

Qual a razão?

Pois no index.js (repositories) também consta essa parte (2º print), agora não sei se devo alterar também nesse, acabei continuando as aulas do intermediário, fui fazendo as alterações que você passou aqui, porém acabei me perdendo um pouco nessa parte.

Agora quando clico em pesquisar e ele vai pro repositories, aparecem diversos erros no console, não sei se é normal (3º print).

[BrunaKroth]

Oi,
Fiz algumas alterações e acabou ficando certo… pelo menos agora aparece o repositório no localhost:

[erickystn]

Oi Bruna… eu coloquei item pois existiam muitos repository, repositoryName, repositories… muitas variáveis com nome parecido, o que poderia me confundir… eu coloquei item, para sinalizar para mim mesmo, que o elemento que seria passado pelo map através do parametro item era um item daquele array… como ja existiam muitas variáveis com nomes muito parecidos em algum momento eu poderia errar ou poderia confundir e não saber qual variável que eu estaria manipulando naquele momento.

mas o nome que você der ao parametro que ira receber cada item dentro do map não influencia o resto do código… o parametro poderia se chamar bolinhodechocolate… contanto que você indicasse lá dentro, que o valor a ser passado para o array respositoriesName era o valor contido naquele parametro, algo como isso aqui:
respositoriesName.push( bolinhodechocolate.name )

Se voce quiser testar vai ver que vai funcionar do mesmo jeito.

[erickystn]

Ah que bom que voce conseguiu resolver, no que voce precisou mexer para dar certo?

[DudaFajardo]

Muito obrigada @erickystn!! Ajudou muito!!

[Relder]

Segue meu código todo funcional.
Obs: Com excecao da estilizacao na lista:

import React, {useState} from “react”;
import axios from “axios”;
import {useNavigate} from “react-router-dom”;
import * as S from “./styled”;

function Home () {
const [erro, setErro] = useState (false);
const [usuario, setUsuario] = useState (’’);
let navigate = useNavigate();
const handleNavigate = () => {
navigate("/repositories");
}

function handlePesquisa (){
axios.get(https://api.github.com/users/${usuario}/repos)
.then(response => {
const repositories = response.data;
const repositoriesName = [];
repositories.map((repository) => {
repositoriesName.push(repository.name);
})
localStorage.setItem(“repositoriesName”, JSON.stringify(repositoriesName));
handleNavigate();
})
.catch (erro =>{
setErro(true);
})
}
return (
<S.Container>
<S.Div>
<S.Input placeholder=“usuario” id=“usuario” value={usuario} onChange={e => setUsuario(e.target.value)}/>
<S.Button type=“button” onClick={handlePesquisa}>Pesquisar</S.Button>
</S.Div>
<S.Erro>{erro ? “Ocorreu um erro. Tente novamente”:""}</S.Erro>
</S.Container>
);
}

export default Home;

import styled from “styled-components”

export const Title = styled.h1`

display: flex;

justify-content: center;

align-items: center;

`;

export const Button = styled.button`

margin-left: -2px;

cursor: pointer;

width: 100px;

background-color: #000000;

color: #ffffff;

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

text-decoration-style: solid;

text-decoration-thickness: 10px;

font-size: 17px;

&:hover {

background-color: #ffffff;

color: black;

border: solid;

}

`

export const Div = styled.div`

display: flex;

margin-top: 25%;

justify-content: center;

`

export const Container = styled.div`

display: flex;

justify-content: center;

flex-direction: column

`

export const Input = styled.input`

width: 300px;

font-size: 150%;

border-top-left-radius: 10px;

border-bottom-left-radius: 10px;

border: solid

`

export const Erro = styled.span`

color: red;

padding-top: 30px;

text-align: center;

`

export const Lista = styled.ul`

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

list-style-type: none;

padding-left: 0px;

font-size: large;

`

export const Linha = styled.li`

padding-bottom: 15px;

`

import React, {useEffect, useState} from “react”;
import * as S from “./styled”;
import { Link, useNavigate } from “react-router-dom”;

export default function Repositories () {
const [repositories, setRepositories] = useState([]);
let navigate = useNavigate();
const handleNavigate = () => {
navigate("/");
}
useEffect(() => {
let repositoriesName = localStorage.getItem(“repositoriesName”);
if (repositoriesName !== null) {
repositoriesName = JSON.parse(repositoriesName);
setRepositories(repositoriesName);
localStorage.clear();
} else {
handleNavigate();
}
}, []);
return (
<S.Container>
<S.Title>Repositórios</S.Title>
<S.Lista>
{repositories.map(repository => {
return (
<S.Linha>{repository}</S.Linha>
)
})}
</S.Lista>
Voltar
</S.Container>
)
}

import React from “react”;
import Repositories from “./Repositories”;
import {Routes, Route, BrowserRouter} from “react-router-dom”
import Home from “./Home”

export default function Rotas () {
return (


<Route path="/" element = {}/>
<Route path="/repositories" element = {} />


)
}

[julianafsiqueira]

Obrigada pelo passo a passo. Ainda estou um pouco atrasada e estou chegando nessa parte, mas quando chegar já sei onde procurar!

[andressa.mor]

gente… alguma sugestão para ajudar nos estudos de REACT??? pra quem está começando realmente está tudo muito confuso
obrigada

[abreu_yas]

Arrasou! Brigadão! Vou salvar aqui!

[leonardoalbuquerque]

Obrigado pela paciência e dedicação, salvei aqui para meus estudos…

[cristiane.dsc]

herói! salvou demaaaais!

[erickystn]

Oi… Conseguiu resolver?

[erickystn]

Qual a parte que esta te confundindo mais?

[abreu_yas]

Mto bom, @Relder vou usar pra comparar com o meu quando eu terminar. Valeuzão!

[derekcsantos]

Cara, na verdade não, pensei que tinha consertado (pois vi que tinha alterado uma das importações, mas agora está tendo um erro na função de index.js em Home:

ERRO:

Já tentei de tudo e não consegui resolver