Тёмный

PROJETO de React JS para INICIANTES - Faça uma To Do List do zero! 

Matheus Battisti - Hora de Codar
Подписаться 136 тыс.
Просмотров 66 тыс.
50% 1

O projeto de lista de tarefas (To Do List) desenvolvido com #ReactJS é uma ferramenta útil para auxiliar profissionais na organização de suas atividades diárias. Além de, claro, te auxiliar a colocar a teoria da programação em prática! 👏
👉Conheça o nosso curso completo de React JS: app.horadecodar.com.br/course...
O React é uma biblioteca JavaScript usada para criar interfaces de usuário interativas, tornando-se, em pouco tempo, uma das tecnologias mais populares para o desenvolvimento de aplicativos web.
O projeto é uma ótima maneira de aprender React ou aprimorar seus conhecimentos, apresentando diversas funcionalidades úteis, como a criação de tarefas, remoção de tarefas, alteração de status da tarefa (completa ou incompleta), filtro por status e ordenação alfabética, além da pesquisa de tarefas!
Essas funcionalidades oferecem uma experiência de usuário agradável e eficiente para a organização das metas diárias!
A interface amigável do projeto torna a criação e a gestão de tarefas mais simples e intuitiva (aumentando sua produtividade no trabalho e nos estudos, afinal, quem disse que você não pode usufruir dos próprios códigos?).
Com o filtro e ordenação, é possível visualizar as tarefas de acordo com sua preferência, permitindo uma organização mais estratégica e otimizada.
Enfim… veja esse tutorial para aprender a criar um projeto de lista de tarefas para tornar o gerenciamento mais fácil e organizado. Esse é um dos vários exemplos de como a tecnologia pode ser usada para simplificar e melhorar a vida profissional! 🙂
#JavaScript #desenvolvimento
🔴 Instagram: / horadecodar
🔷 Telegram: t.me/horadecodar
🟣 Discord Hora de Codar: / discord

Наука

Опубликовано:

 

25 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 107   
@GustavoHenrique-uz5qy
@GustavoHenrique-uz5qy Год назад
segue o Objeto do minuto: 8:45 { id:1, text: "criar funcionalidade x no sistema", category: "Trabalho", isCompleted: false, }, { id:2, text: "Ir pra academia", category: "Pessoal", isCompleted: false, }, { id:3, text: "Estudar React", category: "Estudos", isCompleted: false, }
@Zaratustra_88
@Zaratustra_88 Год назад
Obrigado!!
@user-yb6rs7bm6n
@user-yb6rs7bm6n 8 месяцев назад
meu ídolo, obrigado
@elizamafortes209
@elizamafortes209 5 месяцев назад
Obrigada!
@murillo7311
@murillo7311 5 месяцев назад
meu heroi nao usa capa ele usa ctrl c ctrl v
@MatheusHenrique-mq9ii
@MatheusHenrique-mq9ii Месяц назад
seu lindo!!
@kledsonrenan4453
@kledsonrenan4453 4 месяца назад
Um dos professores que não conhecia mas que tem uma forma de ensinar bem interessante e de forma fácil. Se quer aprender, começa por aqui! Não aqui nesse vídeo mas no canal pegando os conteúdos dele. Depois pode partir para algo mais complexo com o professor que quiser. Mas o Sr. Battisti é muito bom!
@EdvanColares
@EdvanColares Год назад
Matheus, parabéns pelo material. Bem objetivo e ao mesmo tempo com funcionalidades muito interessantes. Estava procurando por um material similar e por sorte encontrei aqui, parabéns. 👏
@oopsaninha-
@oopsaninha- 11 месяцев назад
Muito bom! Consegui ampliar e praticar meu conhecimento de react! Obrigada.
@r6cky-tecnologia165
@r6cky-tecnologia165 11 месяцев назад
Valeu demais Matheus, eu estava precisando muito dessa lógica de tasks completas e do filtro delas. Se puder grave vídeos como este usando o typescript, vai ajudar muito. Abraço!
@thiagowinvirg9746
@thiagowinvirg9746 Месяц назад
Boa mano, agora vou fazer a versão 2.0 fazendo um banco e salvando nele
@iache.2846
@iache.2846 28 дней назад
Já fez irmao?
@yagoaguiar2164
@yagoaguiar2164 Год назад
Valeu de mais professor! Excelente aula, não comento muito aqui no RU-vid porém você merece. Aula show demais!! obrigado Em breve vou comprar o seu curso
@higorflores6958
@higorflores6958 4 месяца назад
Obrigado mestre, precisava de um norte para me ajudar e seu canal tem feito isso.
@mksvncs
@mksvncs 9 месяцев назад
Aprendi muita coisa com esse projeto, Muito obrigado Matheus!
@pucapuka6969
@pucapuka6969 11 месяцев назад
Muito bom, bem didático! Parabéns!
@ronielereis100
@ronielereis100 Год назад
muito bom esse projeto. parabens e obrigado por compartilhar esse conteudo.
@Don_Verissimo
@Don_Verissimo Год назад
Caraca to desde 8 da manha, já sao duas da tarde, finalmente consegui terminar, tem muita coisa que eu não assimilei, mas deu pra entender como funciona esse tal de react!
@juniormelo26
@juniormelo26 Год назад
Parabéns Matheus, perfeita essa aula, abordagem de várias funcionalidades em um só projeto. Como sugestão seria acrescentar um banco como mongoDB e transformar em uma PWA. Muito 🔝 sua didática.
@matheuspombeiro1675
@matheuspombeiro1675 4 месяца назад
Parabéns pela iniciativa de ensinar as pessoas, Matheus. Sucesso!
@daiaanebarbosaf
@daiaanebarbosaf 4 месяца назад
Gratidão! Estava fazendo um exercício do meu curso e esse vídeo de ajudou a entender muita coisa!
@spliterr
@spliterr 11 месяцев назад
muito bom, parabéns pela didatica.
@almirsilva838
@almirsilva838 10 месяцев назад
Ótimas explicações, me ajudaram muito!
@jonatanmsd
@jonatanmsd Год назад
Top demais aprendi 👏👏👏
@marcosribeirodasilva4958
@marcosribeirodasilva4958 8 месяцев назад
Gostei consegui fazer certinho!
@hericaarantes
@hericaarantes 8 месяцев назад
Adorei o projeto! Obrigada
@user-kv9oo1dl8k
@user-kv9oo1dl8k 4 месяца назад
O melhor!!!
@jenny-hg3jy
@jenny-hg3jy 9 месяцев назад
Gostei muito de fazer esse projeto.
@helldercons
@helldercons 2 месяца назад
Muito bom, obrigado!!!
@tonyls0367
@tonyls0367 3 месяца назад
muito show, desejo muito aprender React, aula sensacional, muito boa. gosto muito do Battisti ensinando
@benevolentowl
@benevolentowl 9 месяцев назад
Valeu pela força. Um abraço.
@olderarts
@olderarts Год назад
Irmão, muito obrigado pelo trabalho! Você está me ajudando demais. Se algum dia lhe for conveniente, poderia fazer um video interligandod o react com o mongo db... Mais uma vez, muito obrigado!
@LucasLiano
@LucasLiano Год назад
Conteúdo muito bom, aprendi muito..
@matheusdecleve5593
@matheusdecleve5593 8 месяцев назад
Parabéns maninho, video muito bom
@johnprado17
@johnprado17 2 месяца назад
Que aula incrível!
@victorparizio5699
@victorparizio5699 Год назад
Top de mais, sempre trazendo conteúdo de alta qualidade, muito obrigado por compartilhar o conhecimento com a comunidade.
@MatheusBattisti
@MatheusBattisti Год назад
valeu tb Victor!
@carlosranielly5140
@carlosranielly5140 Год назад
poderia fazer mais projetos usando o React junto com o Nextjs também
@MatheusBattisti
@MatheusBattisti Год назад
opa, valeu a sugestão!
@larisantus_
@larisantus_ 10 месяцев назад
Verdade, incluindo API ... Esse projeto aí tá top!
@diogobispo8732
@diogobispo8732 8 месяцев назад
Breve me escreverei no seu curso quero me aprofundar na area de front-end🎉
@Fu7.reliquias
@Fu7.reliquias Год назад
Comprei seu curso de react na udemy, estou começando apenas, mais bastante ansioso pra aprender react kkk te considero o melhor dev dos que acompanho. Por isso comprei o curso espero evoluir com ele 🚀👨🏻‍💻 obrigado pelos cursos gratuitos também é fundamental pra quem ta iniciando. Tmj Matheus 🤘🏼👏🏻
@MatheusBattisti
@MatheusBattisti Год назад
valeuu Oliveira, tamo junto!
@MatheusBattisti
@MatheusBattisti 2 месяца назад
👉Conheça o nosso curso completo de React JS: app.horadecodar.com.br/course/curso-react-js-completo
@lucaspilati1821
@lucaspilati1821 8 месяцев назад
Aula muito boa
@valdenilsonsilva6912
@valdenilsonsilva6912 9 месяцев назад
Boa noite mestre faço seus cursos na udemy, mestre precisava muito de um curso com sua metodologia e didática de java web, se possível, faz um curso de java eu compro só mandar o link., fiz vários cursos de node mas só aprende de fato com seu método, parabéns pelo trabalho de excelência que tem feito.
@keytoncunhabatista4009
@keytoncunhabatista4009 Год назад
Esse projeto me ajudou a entender na prática várias funções do JavaScript. Obrigado.
@MatheusBattisti
@MatheusBattisti Год назад
showw! =)
@Wallace19
@Wallace19 Год назад
Uma ideia boa é colocar uma caixa d descrição, assim pode colocar mais informações sobre a tarefa, colocar link ou qualquer coisa q ajude tbm
@Wallace19
@Wallace19 Год назад
Que inclusive vou tentar fazer por mim mesmo essa caixa pra colocar descrição tbm
@CaioHenrique-fv6bo
@CaioHenrique-fv6bo Год назад
Uma dúvida que me acabou surgindo e acho que daria um upgrade no projeto seria adicionar as tarefas no localstorage para assim poder usar o projeto como uma agenda virtual
@talysonsoares2712
@talysonsoares2712 Год назад
Concordo plenamente!
@MatheusBattisti
@MatheusBattisti Год назад
Eu, desta vez, também!
@oandin3519
@oandin3519 Год назад
Eu discordo plenamente
@raiodigital9879
@raiodigital9879 Год назад
seria ótimo uma lista de compras de produtos com cadastro de valores e imagens de produtos
@nayara_s
@nayara_s Год назад
Opa trás mais projetos de html css e javascript 🙏🙏🙏🙏🙏
@jhonny4999
@jhonny4999 Год назад
Matheus, seria bacana se fizer projetos com Angular também! Sinto muita falta em projetos com angular no youtube brasileiro, a grande maioria é react.
@MatheusBattisti
@MatheusBattisti Год назад
opa, obrigado pela sugestão! =)
@muzinho10
@muzinho10 8 месяцев назад
Muito top a aula! Eu vi que você tem vários cursos na Udemy, eu queria saber se você tem o curso completo de programação na udemy?
@robertodeoliveira4095
@robertodeoliveira4095 10 месяцев назад
Um dia ainda vou programar facil igual o Matheus...
@alexandresantos7182
@alexandresantos7182 Год назад
Matheus, no seu curso da udemy você tem esse projeto com Banco de dados mysql?
@MrEveraldo1970
@MrEveraldo1970 4 месяца назад
Bom dia senhor Battisti, muito obrigado pela aula, aprendi muito! Muito bom conteúdo
@SrGopp
@SrGopp Месяц назад
no meu, precisei definir as validações das props em Todo.jsx (código) } ... Todo.propTypes = { todo: PropTypes.shape({ id: PropTypes.number.isRequired, text: PropTypes.string.isRequired, category: PropTypes.string.isRequired, isCompleted: PropTypes.bool.isRequired }).isRequired }; export default Todo;
@Bettow
@Bettow Год назад
poderia dizer como eu colocaria uma mensagem ao salvar uma anotação? em verde por exemplo
@douglaswhisper
@douglaswhisper Год назад
Esse projeto está disponível no youtube? não achei
@enricobarros8481
@enricobarros8481 10 месяцев назад
Poderia ensinar como fazer para a lista continuar salva após reiniciar o navegador?
@vinipted162
@vinipted162 2 месяца назад
Uma pergunta: Qual é a extensão que vc está usando no VSCode para o auto-complete do código HTML dentro do arquivo JSX?
@luisstraatmann8746
@luisstraatmann8746 Год назад
por ter um pc linux eu ñ certos meios q o windows tem e vc foi 1° cara ao me dar uma luz, DANDO AQUELE COMANDO COPIAR COLAR sou de familia GAUCHA e meus amigos são do RJ ou RS, o seliv me resp. por aqui, diolinux tanto faz, o ganabara e codigo fonte ou no twitter ou aqui
@historias_inf
@historias_inf 4 месяца назад
Amigo , o que fazer para que os componentes não fiquem desproporcionais quando a tela e reduzida como a de um celular , os textos ficam saindo do background
@nycolasgoldenboy6172
@nycolasgoldenboy6172 11 месяцев назад
{ id:1, text: "criar funcionalidade x no sistema", category: "Trabalho", isCompleted: false, }, { id:2, text: "Ir pra academia", category: "Pessoal", isCompleted: false, }, { id:3, text: "Estudar React", category: "Estudos", isCompleted: false, }
@nugath
@nugath 2 месяца назад
como vc coloca " ; " no algoritmo automaticamente?
@FlaviaMoniqueBispoVieira
@FlaviaMoniqueBispoVieira 6 месяцев назад
O que precisamos baixar pra conseguir fazer esse projeto?
@lordfoxgamesnft471
@lordfoxgamesnft471 11 месяцев назад
Estou com um problema nas rotas, sempre que eu atualizo a página(F5), eu sou redirecionado pra home, independente de página onde eu esteja. Coloquei essa pergunta na Udemy no curso que de react. Alugém sabe ajudar???
@elyaquimnattan2400
@elyaquimnattan2400 9 месяцев назад
Meu código funciona mas aparece vários erros no código em vermelho, como resolvo?
@gabrielcassaro3965
@gabrielcassaro3965 9 месяцев назад
Como eu inicio? começo a fazer a parte do terminal mas ele bloqueia e não funciona
@equipepythonnatela7771
@equipepythonnatela7771 Год назад
muito bom. Seria bastante interessante colocar um banco de dados para ficar salvo. Matheus, vc poderia falar sobre NoSqL? Dar dicas, exercícios, etc.
@MatheusBattisti
@MatheusBattisti Год назад
opa! tem um curso de MongoDB, dá uma olhada lá =)
@equipepythonnatela7771
@equipepythonnatela7771 Год назад
@@MatheusBattisti blz, vlw!!
@anaamaral6855
@anaamaral6855 7 месяцев назад
Alguém tem o código completo para partilhar?
@brunorennan18
@brunorennan18 Год назад
Matheus, o curso de React do hora de cortar é igual ao que tem na Udemy ?? Eu já adquiri o da de lá , gostaria de saber se é diferente
@MatheusBattisti
@MatheusBattisti Год назад
opa Bruno, estamos apenas com cursos na Udemy agora =)
@jairomatos1856
@jairomatos1856 5 месяцев назад
e o banco de dados. pra fechar o projeto
@larisantus_
@larisantus_ 10 месяцев назад
To com um desafio desse ai em react com next incluindo API.... Mas to com dificuldade!
@chessmito7586
@chessmito7586 День назад
Alguém tem a imagem de fundo?
@corpsebraide422
@corpsebraide422 4 месяца назад
alguem tem o repositorio do professor?
@henriqueoliveira3501
@henriqueoliveira3501 7 месяцев назад
tem algum jeito das tarefas que adicionarmos, ficarem salvas, mesmo após recarregar a aplicação?
@melodiaemcontos
@melodiaemcontos 6 месяцев назад
pensei nisso tambem, pois todos exemplos que o mestre matheus cria, ainda nao vi algo com banco de dados neh
@soueujackson9723
@soueujackson9723 8 месяцев назад
eu sinceramente sigo sem ainda entender o React! é falta de pratica e estudos claro! masi pq react se o html e css da pra fazer isso? é mais rapido c react? mais pratico????
@gbl146
@gbl146 Месяц назад
Não consigo fazer a parte do npm create vite@latest
@gbl146
@gbl146 Месяц назад
consegui kkkkk
@corpsebraide422
@corpsebraide422 4 месяца назад
o meu nao adiciona os todo e está igual do professor
@kledsonrenan4453
@kledsonrenan4453 4 месяца назад
Provavelmente o erro esta aqui amigo .map((todo) => ( ): Não precisa informar a keyword RETURN quando se usa parenteses .map((todo) => { }: Usando chaves é necessario informar a keyword RETURN ( seu código a ser exibido aqui ). Muitos erram com isso, e passa despercebido muitas vezes mesmo, costume de sempre utilizar chaves, mas é normal. Só não é um erro que percebe logo como um ponto e virgula no JAVA ou C#. Fica a dica para todos e espero ter ajudado a todos.
@corpsebraide422
@corpsebraide422 4 месяца назад
@@kledsonrenan4453 nao funcionou do mesmo jeito
@decolarnetwork
@decolarnetwork 4 месяца назад
meu tambem nao foi
@joaowictorsilva283
@joaowictorsilva283 Год назад
Bom dia Matheus! Não estou conseguindo falar com vc no whatsapp para tiras as minhas dúvidas.
@MatheusBattisti
@MatheusBattisti Год назад
oi Rosana, me manda as tuas dúvidas no email suporte@horadecodar.com.br, que eu vou te ajudar por lá tive problemas com o whats
@joaowictorsilva283
@joaowictorsilva283 Год назад
Oi já mandei e-mail estou ainda no aguardo sua resposta.
@camilel.dealano3043
@camilel.dealano3043 11 месяцев назад
muito bom o curso, mas pelo amor de deus homem, fala devagar
@shadowwolf6797
@shadowwolf6797 Год назад
Qual o objetivo de criar toda uma linha de código, para depois criar uma pasta components incluir o código lá e chamar ela? Não era mais fácil fazer isso desde o começo do projeto? Não entendi o objetivo, sinceramente.
@f1x0n33
@f1x0n33 Год назад
Reaproveitamento de componentes
@oopsaninha-
@oopsaninha- 11 месяцев назад
Ele tentou mostrar como pode ser feito de 2 jeitos. Em um projeto grande o reaproveitamento de componentes é bem melhor. Trás muito mais facilidade em trabalhar com o código
@giovanibabinski441
@giovanibabinski441 Год назад
aff
@sxsxsx.sxsxsx.sxsxsx
@sxsxsx.sxsxsx.sxsxsx Год назад
tem como criar uma landing page com react + vite usando styled-components + style in obj + css ???
@gesiel31
@gesiel31 Год назад
Qual o repositório desse projeto no GitHub ?
@brunocorrea_br
@brunocorrea_br Год назад
acredito que seja este daqui: github.com/matheusbattisti/todo_react_vite_deploy
Далее
The React Interview Questions You need to Know
21:29
Просмотров 22 тыс.
The Truth about Rust/WebAssembly Performance
29:47
Просмотров 173 тыс.
Todo App using Next.js 14 Server Actions
22:47
Просмотров 7 тыс.
Everything You Need to Know About React 19
21:42
Просмотров 14 тыс.
The Linux Experience
31:00
Просмотров 305 тыс.
Faster than Rust and C++: the PERFECT hash table
33:52
Просмотров 519 тыс.
PROJETO DE REACT COM TYPESCRIPT E API DO GITHUB
56:58
How principled coders outperform the competition
11:11
How to Start from ZERO in Node.js in Just ONE Lesson
1:31:36