PROJETO de React JS para INICIANTES - Faça uma To Do List do zero!
Вставка
- Опубліковано 30 лип 2024
- 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 - Наука та технологія
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,
}
Obrigado!!
meu ídolo, obrigado
Obrigada!
meu heroi nao usa capa ele usa ctrl c ctrl v
seu lindo!!
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!
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.
👏
Muito bom! Consegui ampliar e praticar meu conhecimento de react! Obrigada.
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!
Valeu de mais professor! Excelente aula, não comento muito aqui no UA-cam porém você merece. Aula show demais!! obrigado
Em breve vou comprar o seu curso
Obrigado mestre, precisava de um norte para me ajudar e seu canal tem feito isso.
Parabéns pela iniciativa de ensinar as pessoas, Matheus. Sucesso!
Muito bom, bem didático! Parabéns!
muito bom esse projeto. parabens e obrigado por compartilhar esse conteudo.
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.
Gratidão! Estava fazendo um exercício do meu curso e esse vídeo de ajudou a entender muita coisa!
Aprendi muita coisa com esse projeto, Muito obrigado Matheus!
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!
muito bom, parabéns pela didatica.
Valeu pela força. Um abraço.
Boa mano, agora vou fazer a versão 2.0 fazendo um banco e salvando nele
Já fez irmao?
Gostei muito de fazer esse projeto.
Adorei o projeto! Obrigada
Top demais aprendi 👏👏👏
Gostei consegui fazer certinho!
Muito bom, obrigado!!!
Que aula incrível!
muito show, desejo muito aprender React, aula sensacional, muito boa. gosto muito do Battisti ensinando
Ótimas explicações, me ajudaram muito!
Parabéns maninho, video muito bom
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!
Conteúdo muito bom, aprendi muito..
O melhor!!!
poderia fazer mais projetos usando o React junto com o Nextjs também
opa, valeu a sugestão!
Verdade, incluindo API ... Esse projeto aí tá top!
Breve me escreverei no seu curso quero me aprofundar na area de front-end🎉
Top de mais, sempre trazendo conteúdo de alta qualidade, muito obrigado por compartilhar o conhecimento com a comunidade.
valeu tb Victor!
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.
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 🤘🏼👏🏻
valeuu Oliveira, tamo junto!
Esse projeto me ajudou a entender na prática várias funções do JavaScript. Obrigado.
showw! =)
Aula muito boa
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
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
Que inclusive vou tentar fazer por mim mesmo essa caixa pra colocar descrição tbm
Uma pergunta: Qual é a extensão que vc está usando no VSCode para o auto-complete do código HTML dentro do arquivo JSX?
Matheus, no seu curso da udemy você tem esse projeto com Banco de dados mysql?
Concordo plenamente!
Eu, desta vez, também!
Eu discordo plenamente
poderia dizer como eu colocaria uma mensagem ao salvar uma anotação? em verde por exemplo
Um dia ainda vou programar facil igual o Matheus...
Opa trás mais projetos de html css e javascript 🙏🙏🙏🙏🙏
Matheus, seria bacana se fizer projetos com Angular também! Sinto muita falta em projetos com angular no youtube brasileiro, a grande maioria é react.
opa, obrigado pela sugestão! =)
seria ótimo uma lista de compras de produtos com cadastro de valores e imagens de produtos
Esse projeto está disponível no youtube? não achei
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?
Bom dia senhor Battisti, muito obrigado pela aula, aprendi muito! Muito bom conteúdo
como vc coloca " ; " no algoritmo automaticamente?
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???
Poderia ensinar como fazer para a lista continuar salva após reiniciar o navegador?
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
Meu código funciona mas aparece vários erros no código em vermelho, como resolvo?
Como eu inicio? começo a fazer a parte do terminal mas ele bloqueia e não funciona
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
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
opa Bruno, estamos apenas com cursos na Udemy agora =)
Alguém tem o código completo para partilhar?
O que precisamos baixar pra conseguir fazer esse projeto?
Não passei da parte do npm create vite@latest ! :(
To com um desafio desse ai em react com next incluindo API.... Mas to com dificuldade!
alguem tem o repositorio do professor?
muito bom. Seria bastante interessante colocar um banco de dados para ficar salvo.
Matheus, vc poderia falar sobre NoSqL? Dar dicas, exercícios, etc.
opa! tem um curso de MongoDB, dá uma olhada lá =)
@@MatheusBattisti blz, vlw!!
e o banco de dados. pra fechar o projeto
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;
Alguém tem a imagem de fundo?
tem algum jeito das tarefas que adicionarmos, ficarem salvas, mesmo após recarregar a aplicação?
pensei nisso tambem, pois todos exemplos que o mestre matheus cria, ainda nao vi algo com banco de dados neh
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????
{
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,
}
Bom dia Matheus!
Não estou conseguindo falar com vc no whatsapp para tiras as minhas dúvidas.
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
Oi já mandei e-mail estou ainda no aguardo sua resposta.
o meu nao adiciona os todo e está igual do professor
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.
@@kledsonrenan4453 nao funcionou do mesmo jeito
meu tambem nao foi
Não consigo fazer a parte do npm create vite@latest
consegui kkkkk
@@gbl146 Como? Eu não estou conseguindo !
muito bom o curso, mas pelo amor de deus homem, fala devagar
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.
Reaproveitamento de componentes
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
👉Conheça o nosso curso completo de React JS: app.horadecodar.com.br/course/curso-react-js-completo
aff
tem como criar uma landing page com react + vite usando styled-components + style in obj + css ???
Qual o repositório desse projeto no GitHub ?
acredito que seja este daqui:
github.com/matheusbattisti/todo_react_vite_deploy