Aprendendo React do Zero, Conectando Back e Front End, e Consumindo API

[@canaldevclub]

Vou te ajudar com Programação: go.rodolfomori.com.br/aprendacomigo

[@gabriel5591]

Com relação ao curso são quantas horas ao total?

[@DamaresGaia]

Esse conteúdo está muito, muito bom. Você explica cada coisa que faz. Fica muito fácil entender o que estou fazendo e não apenas copiei código. Seu canal foi um achado!

[@andersonsouza6885]

Eu vendo essa aula às 01:40 da manhã, esse ano eu entro na área de desenvolvimento 🙏

[@canaldevclub]

Booa, bora pra cima

[@thiagodias15]

E eu aqui às 03:05

[@delicodii5211]

Bora, bora!

[@itstime1367]

Eu 1:55 kkkkkk

[@JesusMalta]

Disciplina meu irmão! São 22:41, mas eu sei que preciso dormir para render mais e aprender mais, então vou dormir para fazer isso! Tenha responsabilidade consigo mesmo (interna), e você terá responsabilidade para concluir seus objetivos pessoais (externos)! Deus nos abençoe🙏

[@ronnrsiilva1001]

Foi a maneira mais simples e direta onde vim entender o map(). Obrigado, mestre!❤👏

[@philipedesouzasantos1201]

Cara, estou tendo que aprender REACT no meu trabalho e seu vídeo veio a calhar. Vou salvar para assistir ele todo depois.

[@livrosnoouvido]

Mano, na boa, fiquei muito tempo na net procurando conteúdo assim. Não desmereço os outros criadores de conteúdo, pq cada um aprende de um jeito, mas esse vídeo foi o perfeito pra eu entender e aprender o React. Simplesmente amei essa aula.

[@canaldevclub]

Fico feliz em saber mano, tmjj

[@curiosidadesdogabriel]

Primeiro vídeo que eu assisto sobre React que realmente foi passo a passo. Parabéns, Rodolfo! Mais um vídeo de excelência pro seu canal.

[@canaldevclub]

Valeu irmão

[@Ricocanuto]

Aula dinâmica , muito instrutiva, que me ajudou a revisar o código que recém estudei.

[@PRK1657]

po... sensacial, você descomplicou o que parecia ser dificil em uma hora... VOCÊ É FODA!!

[@VeZeVZ]

Cara, sendo bem sincero! Eu estou assistindo pela primeira vez uma aula sobre integraçao de front com back, achei que seria impossivel de aprender, mas esse cara ensina de uma forma tão boa que eu consegui não só replicar o código, mas entender oq repliquei, algo que em muitas aulas nao acontece, replica codigo e nao entende o conceito! Parabens demais

[@canaldevclub]

Muito obrigado!

[@13mvincius]

A melhor explicação sobre states que já vi, de um modo simples e prático, parabéns professor!!!

[@canaldevclub]

Fico feliz em saber, tmjj

[@rodrigoserdotte]

Cara, perfeito parabens!! Show sua aula e didatica consegui ter a visão de todo o processo!

[@canaldevclub]

TMJ

[@AntonioCarlos-fj1fu]

Meu caro, vendo você cuidar com tanto conhecimento e experiência, mas sempre na humildade dizendo tipo "não se assuste é assim mesmo no começo depois treina exercite depois vai ver que não é bicho de sete cabeças, e eu já passei por isso no começo agora já domino", então isto nos ajuda a ver que é possível aprender e dominar o desenvolvimento estudando e treinando. Obrigado.

[@canaldevclub]

TMJ fico feliz em ajudar!

[@alanfaraj4983]

Sensacional adorei vou assistir novamente para pegar bem os conceitos para utilizar em outras Api completa.

[@canaldevclub]

Valeuu

[@ozeiascassiano8592]

Sem duvida pra mim é a melhor maneira de aprender.

[@PatrickJames-ys6ki]

38:25 tem o Ctrl + shift + p depois aperta enter e escreve a tag

[@jorgeluizcamposmelo3844]

Cara, por causa desse canal descobri que amo desenvolvimento web! Parabéns!!!!!! Por mais conteúdos como esses para gerar inspiração!

[@canaldevclub]

Ahhhh ganhei meu dia com esse comentário...TMJ

[@lellisjunior]

Manja muito. Vi a aula de API antes de ver essa e pela primeira vez, não fiquei com medo de Backend.

[@canaldevclub]

Booa

[@joserobertosantos83]

Melhor aula e explicação sobre React que já vi! Parabéns professor Rodolfo.

[@canaldevclub]

Obrigado! Tmjj

[@FatosExpress]

caraco salvou meu projeto da facul, vlw

[@canaldevclub]

HAHAHAH BOA

[@danielbatista502]

Muito obrigado por tamanhos conteúdos. Vou aprender bastante aqui. 👍🏿👍🏿

[@PatrickJames-ys6ki]

Muito bom, a cada dia o canal trazendo projetos novos.

[@peter8796]

coisa linda, era tudo que eu precisava, obrigado mestre!!

[@JLeandro84]

Parabéns pelo conteúdo! Sua forma de explicar é muito didática e facilita bastante o aprendizado. Excelente 👏👏👏👊

[@canaldevclub]

Muito obrigado mano, tmjj

[@nelsonsoares2281]

Mano sensacional Rodolfo parabéns, sua didática é muito boa. Me ajudou demais as duas aulas, você fez ai com Javascript e repliquei aqui com Typescript inclusive fiz binding de um componente para outro foi muito bom, e no back end você usou express eu usei aqui o fastify rs Meu entendiemento cresceu e muito, obrigado mano!!!

[@canaldevclub]

Fico feliz em saber man, tmjj

[@AndreSilva-vu9db]

Aula espetacular, sensacional! Estudei por muitos tutoriais, múltiplos canais estrangeiros (por uma questão de conteúdo em massa), mas nada como este conjunto de vídeos(parte 1 e parte 2) deste projeto. Muitos parabéns e obrigado por partilhar o conhecimento! Cumprimentos e abraços de Portugal! Para o futuro, gostava de outro projeto semelhante a este porém mais complexo. Um Blog com painel de admin (por exemplo) e base de dados com relações, mesmo nível de explicação, creio que não encontrei nada semelhante no teu canal, mas eu gostaria de assistir se possível, fica a sugestão/ideia! Obrigado

[@canaldevclub]

Muito Obrigado irmão!

[@canaldevclub]

Fizemos o twitter, da uma olhada aqui no canal

[@LucelmoMartins]

Cara, que canal sensacional. ótimas aulas, boas explicações, da pra aprender tudo só com seus vídeos, espero um dia ver um aulão de Electron JS. parabéns mano.

[@canaldevclub]

Opaaa, vamos fazer!

[@mayaracaroline2888]

Valeu pelo conteúdo, me ajudou muito! ótima didática 🙌

[@canaldevclub]

Que bom que ajudou! Tmjj

[@calfdy]

Muito bom conteudo! poderia fazer um agora explicando mais sobre redux, sua metodologia é otima

[@andrericardo6992]

Fantástico, Fantástico, Fantástico 👏👏👏👏👏 Poderia continuar com a tela de edição de usuários, sem querer abusar é claro mas já abusando ...

[@juscelinomodestodosreis2803]

Parceiro Tmj bom diaaa menino obrigado estou doente gripe forte vou salvar aqui e ver depois fmz irmão Tmj felicidades sempre

[@canaldevclub]

Tmjj

[@tiagocarvalho5571]

Sensacional, Rodolfo. Valeu.

[@EdilanoMelo]

Fala mestre @Rodolfo, estou aqui pleno feriado estudando, não existe almoço grátis. pra cima meu irmão.

[@canaldevclub]

Boooa, isso ai

[@dwluciomartins]

Parabens pelos seu conteudos! Sao muito bons, obrigado

[@canaldevclub]

Eu quem agradeço, tmjj

[@luizhqdo]

Sensacional, parabéns pela didatica e dinamismo!

[@canaldevclub]

Muito obrigado, tmjj

[@LeviSoares-m1i]

Melhor canal do KZbin de programação

[@canaldevclub]

Obrigado!!

[@andrevictor1125]

Conteúdo excelente! Gostaria de ver mais vídeos do tipo, e se possível, com mais telas, como um cadastrado de login, e quando o usuário acessar, disponibilizar uma outra aba para ele

[@canaldevclub]

Anotado!

[@bob_le]

Mano, que aula top !!! Cê é brabo, o kara me fez entender o react de maneira bem fácil! Agora faz uma de Angular 😁 Vlw Mano, tu é o kara!

[@canaldevclub]

Tmjj

[@Historia-da-biblia-sagrada]

aula top ,ajudou muito ,obrigado deu tudo certo

[@canaldevclub]

Fico feliz em saber, tmjj

[@Eng.Fabiano]

AULA SENSACIONAL! PARABÉNS!!!

[@canaldevclub]

Valeu mano!

[@clevertonrodriguesnid]

Ótima aula, no "51:08", eu esqueci de subir o Banco Prisma... (npx prisma studio )...

[@tiltdoisgamer]

Vídeo muito top, aprendi muito com sua didática, parabéns!

[@canaldevclub]

Valeuu, tmjj

[@adriel8462]

Ótimo vídeo mano, excelente didática, teria como falar sobre questões de seguranças e praticas legais tanto na api quanto no próprio app?

[@canaldevclub]

Boa sugestão! Valeu

[@dyegooliveira307]

Aula top!! Traz um projeto com Spring Boot no Backend e React no Frontend!!

[@ValmirVirginiodaSilva-LISAIT]

Professor Rodolfo, meu caro, parabéns pela didática, ensina muito bem,,,só faltou a parte de atualizar o cadastro do usuário,,, mas ficou TOP de +

[@canaldevclub]

Valeuu, tmj

[@tubechanneltubechannel4176]

Aula show de bola

[@canaldevclub]

🚀

[@beneditosantos9253]

Cara foram sensacionais as duas aulas. Gostaria que você colocasse mais um botão de Alterar, e como limpar os inputs depois de confirmar. Muito obrigado.

[@canaldevclub]

Anotado!

[@AlexBatistaMonteiro]

Show!! Faltou só o update caso queira alterar dados de um usuário

[@Fractal_reComm]

cara eu fiz exatamente o mesmo código no front e quebra muito mesmo, sabe o que pode ser ? por que no log não tem nenhum erro, indentifiquei que o erro esta diretamente na estilização no css com react + vite obg pelo conteudo API ta massa bem estruturada obg

[@saorynayara4791]

Arrasou! Ensina a fazer o deploy do banco, front etc, por favor

[@canaldevclub]

Opa, anotado! Semana que vem vai sair!

[@morpheuzchannel]

@@canaldevclub Já saiu? Seria show!

[@diegosantosmoto]

Excelente aula, ótima didática

[@LucasAlves-tc4sg]

cara vc é maravilhoso

[@canaldevclub]

Obrigado, tmj

[@gabrielrendelli]

Obrigado por esse conteudo TOP!

[@canaldevclub]

Valeu mano

[@IrinaldoSoares]

Eu tenho uma dúvida, instalei o simple react snippets e em Features>Runtimes Status diz que não está ativado ainda.

[@IngridFerreiradoAmparoLIra]

Aula top professor!

[@wendesonmirandaa8593]

Muito show os didatica foda

[@Alvaro__Jose10]

muito bom os seus videos.

[@canaldevclub]

Muito obrigado

[@humbertocortezia]

muito bom vídeo, salvei para assistir a tarde.

[@geraldopereira9536]

Muito bom. Me tira uma dúvida, um micro-saas de delivery cada loja terá seu próprio banco de dados, como eu faço? eu tenho que subir uma api para cada banco de dados ou manipulo o .env da api com base no endpoint que esta sendo acessado?

[@canaldevclub]

Cara, eu não faria um banco para cada loja. Eu faria com uma tabela relacional, relacionando tabelas com a tabela de lojas. Ou seja, cada loja tem um id, e cada venda carrega o id da loja.

[@FatosExpress]

poderia ensinar fazer o deploy disso na vercel né

[@canaldevclub]

Anotado!

[@karen2716]

Rodolfo, no meu caso, preciso fazer um login e conectar com o banco msql, como eu faria?

[@canaldevclub]

Vai sair vídeo no canal semana que vem sobre isso!

[@MarcosGuilhermeAlvesdaSilva]

opa amigo, digamos que eu tenha 50 inputs, tem que declarar cada um ou tem alguma dica/segredo pra pegar todos, tipo o formData do js

[@canaldevclub]

Usa essa ferramenta kzbin.info/www/bejne/qZbPemlvnJuimZY&ab_channel=DevClub%7CPrograma%C3%A7%C3%A3o

[@rodriguesgt7283]

se eu quiser fazer as condições para que o usuário não envie o formulário com dados vazios, eu devo criar essas condições no Front ou no Back???

[@kazbonfim5061]

Qual extensão vc usa pra inputar script HTML dentro do .JSX?

[@canaldevclub]

Como assim ?

[@rodolfocastros3t]

Top demais viu!

[@canaldevclub]

Valeuu, tmj

[@GustavoAgostini-vj5zb]

@Rodolfo não consigo baixar o node_module, fica dando erro. O que eu faço? npm ERR! code ENOENT npm ERR! syscall open npm ERR! path npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found só aparece o package-lock.json

[@canaldevclub]

Da um comando no terminal. npm install

[@felipeferrarivn]

Rodolfo, qual é esse pacote de icons que voce usa pra estilar os arquivos e pastas do VSCODE? Ademais, obrigado pelas aulas. Todo sucesso do mundo a você.

[@miguelCienciadaComputacao]

Projeto muito massa! Estou fazendo um sistema de CRUD baseado neste das duas aulas, me ajudou demais, obrigado mano Rodolfo! Agora faço uma pergunta, como poderia acessar o projeto que fiz em outra máquina? por localhost mesmo, gostaria de acessar o site pelo celular, notebook

[@canaldevclub]

Boaaa Pega essa aula aqui: kzbin.info/www/bejne/kKi6cpaBbcpsb9k

[@luisandre3532]

Opa mano, libera o repositório da aula passada pf. Só para eu consumir a API sem precisar criar uma do zero. Valeu, tmj!

[@canaldevclub]

VOu colocar aqui na descrição dps

[@parzivalcasto6416]

Tenho uma dúvida, o React usa algum pré-processador para conseguirmos usar o '&' ? Eu sei usar Tailwind, Bootstrap e SASS, mas nunca tinha visto alguém usar isso dentro de CSS puro. E a aula está incrível, me aprofundei em JS com os seus vídeos, e finalmente estou conseguindo aprender React. Já tinha tentado aprender os fundamentos em outros lugares, mas nunca consegui entender nada. Somente contigo que consegui progredir. Parabéns pela didática, professor.

[@canaldevclub]

O CSS moderno já aceita isso..Até CSS puro já da pra usar essa nomenclatura!

[@canaldevclub]

Vaaaleu demais! Fico feliz em ajudar!

[@frankguitarr]

Rodolfo vai uma sugestão para fazer uma tabela tipo de Excel mas com Node ? Saca um abrçs rsrs

[@ConexoesInovadoras]

Olá minha dúvida é eu posso colocar as funções creat, delete e atualizar em outro arquivo separado ou é comum deixar tudo no index ?

[@canaldevclub]

Pode separar sim

[@Tecinovacao]

o local host não esta sendo aceito pelo navegador

[@canaldevclub]

O que está dando ?

[@marciodavid81]

Faz um vídeo criando um menu mobile com react

[@Piadojetta]

prof por um acaso tem algum video igual a esse so que em next.js estou travado no back end do meu projeto e é em next.js

[@canaldevclub]

No nosso canal de programação avançada vai sair kzbin.info/door/d5TrIZ0WxlVmya7Y2PsWXw

[@Piadojetta]

@@canaldevclub obrigada prof🙏🏼

[@antonioneves5053]

alguém sabe me dizer como limpar os campos do formulario após invocar o botão confirmar sem ser feito o refresh da página?

[@canaldevclub]

só voce colocar o valor '' " vazio dentro do formulário

[@guilhermeantoniojesus9190]

Ótima aula Rodolfo. Porem me tire uma dúvida, como eu poderia fazer para editar cada usuário? Pq na aula vc ensinou a criar, postar e deletar, e eu gostaria de poder editar deixando o projeto completinho.

[@canaldevclub]

Vou criar uma aula ensinando!

[@marianepaschoini3569]

cara, você é foda

[@canaldevclub]

Obrigado, tmjj

[@rizandrocarvalho6482]

pessoal cso o npm install nao funcionar roda o npm i vite no terminal🔥

[@davidj.eduardo6709]

Eu te amo 😭

[@kmzzin7621]

Opa, pode colocar o repositório do backend aqui por favor?

[@ricxfn]

Qual foi a linguagem usada no backend?

[@marcoslima7477]

JS

[@canaldevclub]

JavaScript

[@Titovictoor]

Esse projeto não tem dsponível no github ? Por algum erro meu não estou conseguindo finalizar eaí queria comparar os códigos pois fazer isso no vídeo é um pouco difícil pelo fato de ir mudando e atualizando as linhas

[@canaldevclub]

Chama meu suporte, eles te ajudam go.rodolfomori.com.br/suporte

[@rodrigoft91]

Poxa não encontrei a aula de criar o Back End, alguém consegue deixar o link da aula aqui? Valeu, Esse cara ensinando é foda demais.

[@canaldevclub]

kzbin.info/www/bejne/hqrVfodmfKZmqac&ab_channel=DevClub%7CPrograma%C3%A7%C3%A3o

[@DANILOIBIA]

tem o repositorio dessa aula nao, meu backend nao funciona mais depois que finalizei nao sei que pode ser (node:4008) ExperimentalWarning: Watch mode is an experimental feature and might change at any time (Use `node --trace-warnings ...` to show where the warning was created) node:internal/modules/cjs/loader:1147 throw err; ^ Error: Cannot find module 'C:\Users\User\Documents\projetos\backend\api-nodejs\server.js' at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15) at Module._load (node:internal/modules/cjs/loader:985:27) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12) at node:internal/main/run_main_module:28:49 { code: 'MODULE_NOT_FOUND', requireStack: [] } Node.js v20.11.1 Failed running 'server.js'

[@canaldevclub]

github.com/rodolfomori/api-node-mongo

[@wesleyrodrigues7635]

Gostaria de saber se consigo consumir essa api usando react native e expo ? no react (web) consegui fazer todo o crud mais quando tento fazer no react native com expo nao consigo acessar a api, da esse erro :" react native Possible unhadled promisse rejection (id:0) [AxiosError:Network Error]"

[@canaldevclub]

era pra ser igual. Vou fazer um vídeo de react native!

[@andreforttuna]

Fala meu querido, a aula foi muito topzeira. Queria saber se poderia me tirar uma dúvida: Estou aprendendo a programar para fazer uma plataforma de análise de dados com dashboards e afins. Qual tecnologia vc me recomenda estudar. Comecei com html, css e js.

[@canaldevclub]

Isso ai, e dps ir pro react...

[@Olamundoio]

Se não for pedir demais poderia mostrar como subir para o git hub Pages ?

[@canaldevclub]

Opa, vou ensinar sim!

[@guilhermerezende9517]

Muito bom !!!!

[@lucasfregonezi]

fala rodolfo conteudo muito top vlwww me tira uma duvida. porque que toda vez que faço um teste por exemplo de criar um usuario ele cria normalmente mas logo depois ele da um erro la no server.js e eu tenho que parar e reiniciar ele ai volta ao normal . sempre consigo fazer apenas uma requisição e ai ele para. mesmo quando eu testo criando pelo vs code no thunder client eu to dando o comando node --watch server.js para iniciar o servidor

[@canaldevclub]

Qual erro ?

[@gabrielleoliveira9458]

🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻 ameiiii teria como fazer o login tbm?

[@canaldevclub]

Opa, vou criar uma aula pra isso!

[@Gelozo]

Sou novato em react. Qual seria a real diferença criar o projeto com typescript ou javascript?

[@canaldevclub]

Tipagem, ou seja. Com javascript você cria uma variável e não diz o tipo dela. Se ela é um numero, um texto ou o array. Com TypeScript você cria a variável e diz o tipo dela. Se ela é um numero, um array, um objeto e etc.

[@devhunterbr4721]

Ótima didática! Parabéns pelo vídeo

[@canaldevclub]

Obrigado! Tmjj

[@portugalsemfiltro]

O & dentro da class ou id posso pegar o que tá lá dentro sem necessariamente abrir outra coluna no css? Exemplo você tinha a class CARD e meteu um & e já foi buscar o parágrafo sem fechar e abrir novamente. Se for isso top, adorei.

[@dimiouvespa]

Sim, utilizar o id e o & no css. Porém pesquise sobre scss, você vai ficar mais impressionado :D

[@BorisZaidan]

É isso top, mesmo 😂

[@marioroberto4538]

rodolfo meu cadastro-usuarios não está rodando quando executo o npm run dev poderia me ajudar?

[@canaldevclub]

Você instalou as dependencias ?

[@decaastro96]

Rodolfo ainda não estou familiarizado com react, acha melhor eu tentar replicar com js puro e futuramente tentar novamente com react ou já fazer com react logo de cara?

[@canaldevclub]

Tenta com react umas 2 vezes, pra vc já ir pegando o jeito!

[@diegosouthbound]

cade o repositório do projeto?????????

[@devhunterbr4721]

Você não usa Styled components?

[@canaldevclub]

Uso sim.

[@delgadosly]

Thanks!!!

[@ElizaniasEly]

*Show!*