Uma coisa que eu percebi nesses 7/8 meses de estudo, e aconselho quem está iniciando real, é a focar muito em projetos, pq as vezes parece q estudamos muuito e fica mt dificil aprender TANTA coisa, mas quando tu faz projetos e para e analisa codigos pra aprender, tu aprende MUUUITO mais, a prática parece mágica comparada aos estudos teóricos pra aprender.
Boa!! Também percebi isso. Se conseguirem, tentem revesar algo como 1 dia de teoria outra dia de pratica. Acredito que assim consegue o melhor dos dois mundos (teoria + pratica)
Verdade Emilly. Eu estava estudando React por 2 meses quando consegui meu emprego de dev front, mas tinha muita dificuldade com Hooks ! Quando me deram minha primeira task com hooks para entregar em 3 dias😅 Me matei e acabei aprendendo na raiva 😂 ou seja na prática com um projeto mesmo ! Nesse caso era um projeto da empreaa e foi bem desesperador mas deu super certo !
Uma grande dica para facilitar a vida do CSS! Utilizando a tag lista como exemplo: Quando quiserem aplicar CSS as , filhas da Ao invés de criar uma classe especifica para as e ter que adicionar uma por uma No CSS pode ser feito o seguinte: .ul li {} Assim será aplicado automaticamente as filhas daquela UL, fazendo com que não seja necessário aplicar ClassName as
dia 15, mes março/2023 o conteúdo funciona, Só atualizem o react e o router para v6! (Alerta: a nova versão do route, modificou a sinxtase!) código exemplo da sintaxe v6 -> , Utilizamos o atributo element para especificar o componente que será carregado quando acessar a url do path!
Muito bom esse curso, eu tive muita dificuldade em aprender com outros cursos e via como um bicho de 70 cabeças. Com seu curso bem explicativo já me fez fixar bem as ideias de cada codigo. Muito obrigado pelo conhecimento passado e Deus abençoe sua caminhada!
Canal muito bom para aprender React! Pra terem uma noção, estou aprendendo mais aqui do que em uma plataforma de cursos pagos, a didática do professor Matheus é muito boa. Para quem está tendo problemas com esse tipo de erro: "All component children of must be a or ", lá no App.js, eu vou dar uma sugestão de como funcionou para mim. Eu pesquisei em alguns lugares e cheguei à seguinte conclusão: import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom' (isso fica no topo do arquivo App.js) (Quando for colocar o Router nesse mesmo arquivo, coloquei desta forma): function App() { return (
Por que desse jeito? Perceba que o Router está envolvendo a Navbar, Routes e Footer, certo? Por questões de sintaxe, é obrigatório que o Routes tenha como child somente o Route. É por isso que se tentar envolver o Route por Container, vai dar um erro no navegador. A forma como o Matheus passou funcionava quando o vídeo foi gravado, mas por conta das atualizações no router-react-dom, é necessário fazer essa adaptação. No exemplo acima, estamos envolvendo um a um os Route para não dar erro.
Tenho um problema com o css, será que alguém poderia me ajudar? Eu adicionei o flex no elemento , porém, como dentro dele tem um elemento , o css não está identificando a logo e a como os filhos do flexbox. Por conta disso, o comando justify-content:space-between não está funcionando, fazendo com que o elemento esteja na esquerda, junto com a logo.
Opa professor fiquei com uma dúvida, no NavBar vc adiciona a class navba no nav e ela tem o display flex, mas dentro do nav só tem a caixa container, ou seja, o display flex vai afetar so o container não os filhos dele, e não consegui chegar no mesmo resultado fazendo assim, oque fiz foi deixar o nav sem display flex e deixar que o style do componente container aplicasse o display flex e o space between
@@MatheusBattisti O component parece meio desnecessário para mim. É só usar uma div com a classe desejada em vez de usar o component, pois o component é apenas isso(uma div com a classe desejada. Gostaria muito de entender o porque. Esse tipo de entendimento é o mias dificil para min.
Uma dúvida: já que o Footer.module.css é um arquivo CSS, por que criar classes para serem usadas nas tags e não modificar a própria tag? Exemplo: vc criou a classe .footer, mas a gente poderia ter colocado só footer e modificar, certo? Por que criar a classe e não aplicar na tag diretamente já que praticamente elas não se repetem num componente?
usar classes para definir o estilo de uma página segue as boas práticas de programação orientada a objetos, onde a separação de responsabilidades e a reutilização de código são princípios importantes
O Switch não funcionava então passei a usar o routes, mas mano, o curso é bom e tudo mais, mas eu to cansado de ter que lidar com um erro a cada 3 segundos... acabo de estagnar no seguinte erro: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Alguém pode me ajudar?
Eu posso usar apenas o Arquivo "admin.min.css" em alguns components ou não é recomentado usar bootstrap e sim criar o css manualmente no React JS? Vlw pela aula,.. :)
galera no meu código estava com problemas para implementar a solução que o professor passou,ela não estava sendo aplicada, usando o class = {styles.navbar}, no navegador o console por sí já acusava erro,pedindo para o class ser trocado por className,porém mesmo após a troca ainda não tinha funcionado, a solução encontrada trata-se de implementar o comando do seguinte jeito className = "navbar"(ou como você chamou o estilo de css). Segue código abaixo: import {Link} from 'react-router-dom' import Container from './Container' import styles from './NavBar.modules.css' import logo from '../../img/costs_logo.png' function NavBar(){ return(
no meu tbm não esta sendo aplicado especificamente o space-betwen da classe .navbar, e de fato não faz sentido ser aplicada pois dentro de nav só existe uma única tag a de container, mas dentro de container sim existe mais tags para o flex ser apicado
Eu estou fazendo agora e me aparece o seguinte erro: Compiled with problems:X ERROR src\Components\Layout\Container.module.css.jsx Line 1: Parsing error: Unexpected token (1:0) O código do container.module.css está exatamente igual, o que pode ser?
Opa entao o meu css em NavBar nao funciona, mas descobri que se voce trocar class={styles.navbar} ou qualquer outro class para class='navbar', nao sei o que acontece se alguem souber por favor me explique e como posso deixar o codigo igual do video
O component parece meio desnecessário para mim. É só usar uma div com a classe desejada em vez de usar o component, pois o component é apenas isso(uma div com a classe desejada. Gostaria muito de entender o porque. Esse tipo de entendimento é o mias dificil para min.
Imagina que você tem um mesmo botão em diversas partes e páginas do seu código. Criar sempre o mesmo botão vai encher o código e criando apenas uma vez com o componente você pode usá-lo várias vezes onde quiser sem tanto código desnecessário
Uma coisa que eu percebi nesses 7/8 meses de estudo, e aconselho quem está iniciando real, é a focar muito em projetos, pq as vezes parece q estudamos muuito e fica mt dificil aprender TANTA coisa, mas quando tu faz projetos e para e analisa codigos pra aprender, tu aprende MUUUITO mais, a prática parece mágica comparada aos estudos teóricos pra aprender.
Boa!! Também percebi isso. Se conseguirem, tentem revesar algo como 1 dia de teoria outra dia de pratica. Acredito que assim consegue o melhor dos dois mundos (teoria + pratica)
Verdade Emilly. Eu estava estudando React por 2 meses quando consegui meu emprego de dev front, mas tinha muita dificuldade com Hooks ! Quando me deram minha primeira task com hooks para entregar em 3 dias😅 Me matei e acabei aprendendo na raiva 😂 ou seja na prática com um projeto mesmo ! Nesse caso era um projeto da empreaa e foi bem desesperador mas deu super certo !
Uma grande dica para facilitar a vida do CSS!
Utilizando a tag lista como exemplo:
Quando quiserem aplicar CSS as , filhas da
Ao invés de criar uma classe especifica para as e ter que adicionar uma por uma
No CSS pode ser feito o seguinte: .ul li {}
Assim será aplicado automaticamente as filhas daquela UL, fazendo com que não seja necessário aplicar ClassName as
Vale pra quem usa SCSS?
dia 15, mes março/2023 o conteúdo funciona, Só atualizem o react e o router para v6! (Alerta: a nova versão do route, modificou a sinxtase!) código exemplo da sintaxe v6 -> , Utilizamos o atributo element para especificar o componente que será carregado quando acessar a url do path!
Muito bom esse curso, eu tive muita dificuldade em aprender com outros cursos e via como um bicho de 70 cabeças. Com seu curso bem explicativo já me fez fixar bem as ideias de cada codigo. Muito obrigado pelo conhecimento passado e Deus abençoe sua caminhada!
O professor é fera, Manda super bem e torna as aulas agradável. Meus parabéns Matheus Battisti !!!
valeuu Aldecir, bons estudos! =)
O projeto está está ficando lindo, Matheus. Parabéns. Você faz com tanta fluidez que parece ser fácil.
Por a mão na massa é a melhor forma de aprender!
Sou apaixonado por front, sempre quis aprender react
bora então Maykel!
Canal muito bom para aprender React! Pra terem uma noção, estou aprendendo mais aqui do que em uma plataforma de cursos pagos, a didática do professor Matheus é muito boa. Para quem está tendo problemas com esse tipo de erro: "All component children of must be a or ", lá no App.js, eu vou dar uma sugestão de como funcionou para mim. Eu pesquisei em alguns lugares e cheguei à seguinte conclusão:
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom' (isso fica no topo do arquivo App.js)
(Quando for colocar o Router nesse mesmo arquivo, coloquei desta forma):
function App() {
return (
Por que desse jeito? Perceba que o Router está envolvendo a Navbar, Routes e Footer, certo? Por questões de sintaxe, é obrigatório que o Routes tenha como child somente o Route. É por isso que se tentar envolver o Route por Container, vai dar um erro no navegador. A forma como o Matheus passou funcionava quando o vídeo foi gravado, mas por conta das atualizações no router-react-dom, é necessário fazer essa adaptação. No exemplo acima, estamos envolvendo um a um os Route para não dar erro.
você deve envolver o Routes com Container, ao invés de todos os "Route", dessa forma:
function App() {
return (
Footer
);
}
O melhor!!! ❤️
valeuu Jônatas!
Fala Matheus.
Cara muito bom sua dinamica.
opa Luiz, exatamente, foi um erro =(
Conteúdo fantástico, professor! Muito obrigado mesmo, sucesso!
Obrigado por compartilhar seus conhecimentos .
de nada!
Sensacional! Parabéns 👏👏👏
obrigado por acompanhar Eric!
Sensacional! Parabéns, muito bom 👏👏👏
valeu Jefferson!
Excelente ! Muito Bem Explicado ! ! Parabéns pelos vídeos ! ! !
Tenho um problema com o css, será que alguém poderia me ajudar? Eu adicionei o flex no elemento , porém, como dentro dele tem um elemento , o css não está identificando a logo e a como os filhos do flexbox. Por conta disso, o comando justify-content:space-between não está funcionando, fazendo com que o elemento esteja na esquerda, junto com a logo.
me confundi nisso ai tambem. mas é por que a img ta dentro da ul.
conseguiu resolver?
@@matheusvictor6114 no meu caso, eu coloquei o nav dentro do Container, e funcionou
Logo logo eu faço esse curso, minha cabeça tá pra explodir de tanta coisa que eu tenho que aprender ksksksk:(
hahahha faz parte!
usei min-height com o valor 75vh
Opa professor fiquei com uma dúvida, no NavBar vc adiciona a class navba no nav e ela tem o display flex, mas dentro do nav só tem a caixa container, ou seja, o display flex vai afetar so o container não os filhos dele, e não consegui chegar no mesmo resultado fazendo assim, oque fiz foi deixar o nav sem display flex e deixar que o style do componente container aplicasse o display flex e o space between
Veja que ele deixa a logo fora do , resolveu para mim
Muito obrigado pelo conteudo irmão ! Vlw d++
no site do hora de codar se clicar no link pra download faz apenas a página subir!
Top
valeuu Zeriel!
Eu tenho uma dúvida referente o componente container, ele seria meio q pra estruturar o site pelo q eu entendi seria isso ? Meio que centralizar
oi Enzo, exatamente, é um componente estrutural que vai nos ajudar a posicionar melhor os elementos em diversas partes do projeto...
@@MatheusBattisti O component parece meio desnecessário para mim. É só usar uma div com a classe desejada em vez de usar o component, pois o component é apenas isso(uma div com a classe desejada. Gostaria muito de entender o porque. Esse tipo de entendimento é o mias dificil para min.
@@CarlosBioknesisdeImpacto eu tenho o mesmo pensamento que o seu, as vzs ele da uma volta pra fazer uma coisa tao simples
Oi tio, boa tarde. Eu só não entendi o pq de ter colocado "Class" na ul e no nav quando tinha dito que o react implica kkk não deveria ser className?
Uma dúvida: já que o Footer.module.css é um arquivo CSS, por que criar classes para serem usadas nas tags e não modificar a própria tag? Exemplo: vc criou a classe .footer, mas a gente poderia ter colocado só footer e modificar, certo? Por que criar a classe e não aplicar na tag diretamente já que praticamente elas não se repetem num componente?
usar classes para definir o estilo de uma página segue as boas práticas de programação orientada a objetos, onde a separação de responsabilidades e a reutilização de código são princípios importantes
Matheus, qual a ferramenta/plugin que tu usou parar deixar o código arrumado? E aparecer as opções de auto complete?
da uma olhada na extensão Beautify e Tabnine
@@El_kr0nic Valeeuus!! 😄
Gostaria de saber se realmente é necessário criar varios arquivos css ao inves de um ou dois, digo, criar um para cada coisa do site?
O Switch não funcionava então passei a usar o routes, mas mano, o curso é bom e tudo mais, mas eu to cansado de ter que lidar com um erro a cada 3 segundos... acabo de estagnar no seguinte erro:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Alguém pode me ajudar?
Galera se alguem poder me ajudar, meu Css do Navbar simplesmente não funciona e o Container também não.
'Link' is defined but never used. Meu esta dando esse erro nao consigo resolver
Visto
Minha tela do google quando vou abrir o site esta só carregando o site e nao aparece nada.
Eu posso usar apenas o Arquivo "admin.min.css" em alguns components ou não é recomentado usar bootstrap e sim criar o css manualmente no React JS? Vlw pela aula,.. :)
Professor nao consegui trocar o switch para Routes esta dando erro
galera no meu código estava com problemas para implementar a solução que o professor passou,ela não estava sendo aplicada, usando o class = {styles.navbar}, no navegador o console por sí já acusava erro,pedindo para o class ser trocado por className,porém mesmo após a troca ainda não tinha funcionado, a solução encontrada trata-se de implementar o comando do seguinte jeito className = "navbar"(ou como você chamou o estilo de css).
Segue código abaixo:
import {Link} from 'react-router-dom'
import Container from './Container'
import styles from './NavBar.modules.css'
import logo from '../../img/costs_logo.png'
function NavBar(){
return(
Home
Contact
Company
NewProject
)
}
export default NavBar
O ideal é className={styles.navbar} e não className='navbar'. O mesmo vale para o restante. Espero ter ajudado.
no meu tbm não esta sendo aplicado especificamente o space-betwen da classe .navbar, e de fato não faz sentido ser aplicada pois dentro de nav só existe uma única tag a de container, mas dentro de container sim existe mais tags para o flex ser apicado
Eu estou fazendo agora e me aparece o seguinte erro: Compiled with problems:X
ERROR
src\Components\Layout\Container.module.css.jsx
Line 1: Parsing error: Unexpected token (1:0)
O código do container.module.css está exatamente igual, o que pode ser?
Remove o .jsx no nome do arquivo.
É, o erro está no nome do seu arquivo. O certo é: Container.module.css
Não consigo fazer o Footer descer de jeito nenhum, não entendo o problema que está levando a isso
cara muda o min-height no conteiner para 100vh ou 75vh
@@alex_consultordigital o meu continua em cima sem descer
Alguem poderia disponibilizar o projeto no github ja atualizado, ajudaria demais.
Opa entao o meu css em NavBar nao funciona, mas descobri que se voce trocar class={styles.navbar} ou qualquer outro class para class='navbar', nao sei o que acontece se alguem souber por favor me explique e como posso deixar o codigo igual do video
Pessoal e tambem se deve colocar Nomedoarquivo.module.css para funcionar o cod css
O component parece meio desnecessário para mim. É só usar uma div com a classe desejada em vez de usar o component, pois o component é apenas isso(uma div com a classe desejada. Gostaria muito de entender o porque. Esse tipo de entendimento é o mias dificil para min.
Imagina que você tem um mesmo botão em diversas partes e páginas do seu código. Criar sempre o mesmo botão vai encher o código e criando apenas uma vez com o componente você pode usá-lo várias vezes onde quiser sem tanto código desnecessário
Estou tentando fazer esse projeto, uso o mesmo código e está dando tudo errado.
instalou todos os modulos nescessarios?
nao achei a logo da moedinha pode me ajudar
ta no git dele, o link ta na descrição.
minhas paginas nao alternam, alguem me ajuda ???
conseguiu?
@@juliorufino7112 nao
th-cam.com/video/IC71Y214Xcc/w-d-xo.html ve se resolve o problema