Тёмный

React Todo List App Tutorial - Beginner React JS Project Using Hooks 

Brian Design
Подписаться 115 тыс.
Просмотров 400 тыс.
50% 1

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

 

4 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 354   
@koffet658
@koffet658 3 года назад
After i tried following the video, i just realized this is not for beginner. But it's good. Me: beginner react
@darioperez5945
@darioperez5945 3 года назад
Yeah, same here. I copied and tryed to understand the code in the process but it's quite difficult for a newbie.
@asifck439
@asifck439 3 года назад
Yes he wrote all methods and state from the beginning itself then only he handle the input field but still we can understand if we have lil konowledge about react
@letsdoeverythinginoneweek9398
@letsdoeverythinginoneweek9398 3 года назад
@@asifck439 actually there are lots of things going on which are connected with each other but he wrote the things first which comes in last
@marshallmurray8050
@marshallmurray8050 3 года назад
When I was looking for React tutorials, everyone was throwing shade at To Do apps. You made a great tutorial and I learned a lot! Thanks.
@briandesign
@briandesign 3 года назад
Awesome, thank you!
@codedcarbon3493
@codedcarbon3493 3 года назад
css for near the end of the tutorial: box-sizing: border-box; margin: 0; padding: 0; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } body { background: linear-gradient( 90deg, rgba(48, 16, 255, 1) 0%, rgba(100, 115, 255, 1) 100% ); } .todo-app { display: flex; flex-direction: column; justify-content: start; width: 520px; min-height: 600px; background: #161a2b; text-align: center; margin: 128px auto; border-radius: 10px; padding-bottom: 32px; } h1 { margin: 32px 0; color: #fff; font-size: 24px; } .complete { text-decoration: line-through; opacity: 0.4; } .todo-form { margin-bottom: 32px; } .todo-input { padding: 14px 32px 14px 16px; border-radius: 4px 0 0 4px; border: 2px solid #5d0cff; outline: none; width: 320px; background: transparent; color: #fff; } .todo-input::placeholder { color: #e2e2e2; } .todo-button { padding: 16px; border: none; border-radius: 0 4px 4px 0; cursor: pointer; outline: none; background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100% ); color: #fff; text-transform: capitalize; } .todo-input.edit { border: 2px solid #149fff; } .todo-button.edit { background: linear-gradient( 90deg, rgba(20, 159, 255, 1) 0%, rgba(17, 122, 255, 1) 100% ); padding: 16px 22px; } .todo-container { display: flex; flex-direction: row; position: relative; } .todo-row { display: flex; justify-content: space-between; align-items: center; margin: 4px auto; color: #fff; background: linear-gradient( 90deg, rgba(255, 118, 20, 1) 0%, rgba(255, 84, 17, 1) 100% ); padding: 16px; border-radius: 5px; width: 90%; } .todo-row:nth-child(4n + 1) { background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100% ); } .todo-row:nth-child(4n + 2) { background: linear-gradient( 90deg, rgba(255, 12, 241, 1) 0%, rgba(250, 0, 135, 1) 100% ); } .todo-row:nth-child(4n + 3) { background: linear-gradient( 90deg, rgba(20, 159, 255, 1) 0%, rgba(17, 122, 255, 1) 100% ); } .icons { display: flex; align-items: center; font-size: 24px; cursor: pointer; } .delete-icon { margin-right: 5px; color: #fff; } .edit-icon { color: #fff; }
@mydaily21
@mydaily21 2 года назад
at 20.00 mnt, im stuck beacuse error. and after checked in console have notice : react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root. any one have solutiion?
@PurityNetwork
@PurityNetwork 3 года назад
Luckily I wasn't completely new to React because in all honesty this wasn't a very well planned out tutorial for beginners. From a learning perspective, it was hard to follow as you declared functions several times before they were written. It probably does make complete sense to someone well versed in React because you can do them in whatever order (as you know how to tie them up ultimately) but as a novice, it's hard to follow and understand. However that criticism aside, I really enjoyed making this application and have subbed for more.
@kauserjaffari9790
@kauserjaffari9790 3 года назад
Thanks for saving my 50 minutes :)
@MM-lo9tk
@MM-lo9tk 3 года назад
Nah he just doesn't know what he's doing. It's easier to make a RU-vid channel and pretend you know how to code than it is to just learn to code and get a job... I see it ALL the time.
@auto-nomadic1326
@auto-nomadic1326 3 года назад
@@MM-lo9tk Lol chill out bro, he is on a "coding journey", learning by teaching. Haters gonna hate.
@masamune1
@masamune1 3 года назад
agreed, he really didnt make it beginner friendly. For sure should not decalre things before he even writes them. was confused for so much of it. I think he needs to redo the video, and do one step at a time.
@andikasujanadi
@andikasujanadi 3 года назад
im on you
@TahirHussain-ep9us
@TahirHussain-ep9us 3 года назад
your are just typing the code, please try to explain what does those function do. so that it will be easy to understand.
@emenikedaniel
@emenikedaniel 2 года назад
When you said, this line of code you dont need to understand in it at 17.40 in your video. Man, i laughed really hard cos javascript is jst complex. We just have to learn everyday.
@klhmia
@klhmia 3 года назад
I noticed a few comments in here that are critical but respectful and hit on a crucial point for your channels content in general - the things you create are amazing, elegant, and beautiful, but the way you explain them is not very effective. The order in which you do things is perhaps convenient based on the template you've created, but from a learning perspective it's hard to see what's going on let alone draw those necessary correlations. I'm familiar with React, so I can see what's going on, but that only makes it clearer how strange the approach to some of these things is. That being said, I only take the time to write this comment because I love the concept of your channel, your developments are beautiful, and you're a cool dude so I'd love to see you get more views and subs. I'd also love to be able to use your videos to learn more!
@johnherrera5913
@johnherrera5913 3 года назад
Master! This video answered all the questions I was having with React! Thank you!
@producedjc1703
@producedjc1703 3 года назад
Fire. Not for the true beginners, but it was a good struggle and learning experience for a lvl 3 like me.
@MegaTommy105
@MegaTommy105 Год назад
it was light work for a guy like me (mentally unstable)
@misterjoe2669
@misterjoe2669 3 года назад
This was a great app. Local storage add on would be nice with this app.
@mahmoudiamir
@mahmoudiamir 2 года назад
Brian thanks alot for put some effort and time to make a tutorial for people, I really appreciate, one that I need to mention is that since you have already mastered react, it's so easy for you to understand why you are doing something as simple as writing some thing to fix the button which refresh the page instead of send some information, but for me as a beginner, it's so hard to decode what you wrote there, as I need to understand how would that send information to database or something. So please keep your cool work up, and add some more details
@mydaily21
@mydaily21 2 года назад
at 20.00 mnt, im stuck beacuse error. and after checked in console have notice : react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root. any one have solutiion?
@Aziz-kw6ct
@Aziz-kw6ct 7 месяцев назад
Great tutorial! You taught me code and a great attitude. Excellent instructions, thanks!
@gloryths
@gloryths 3 года назад
Not for absolute beginners but its a good video in order to get an idea of what's going on.
@joethomas1995
@joethomas1995 4 года назад
This app shows the importance of having a centralized state , the prop drilling is serious here
@elliottarnold9542
@elliottarnold9542 4 года назад
Exactly, and it's not really helpful that functions are declared before he actually writes the functionality for the function.
@laturchasanket6901
@laturchasanket6901 4 года назад
@@elliottarnold9542 yeah, its creating a lot of confusion
@elliottarnold9542
@elliottarnold9542 4 года назад
@@laturchasanket6901 It happens on his videos. He just needs to commit to one thing at a time; he assumes we already have the end in mind as he does since he is the creator. When someone is coding along, the process needs to be linear.
@laturchasanket6901
@laturchasanket6901 4 года назад
@@elliottarnold9542 Exactly! Nice catch.
@S_Chandra503
@S_Chandra503 3 года назад
Again good tutorial. One request is that while using any inbuild function, feature from react for example useEffect method then please explain its significance and why we should use it if time permits. This can clear React fundamentals as well.
@abhinavchoudhary8715
@abhinavchoudhary8715 2 года назад
I agree
@abhinavchoudhary8715
@abhinavchoudhary8715 2 года назад
Brian Design - Thank you so much for this tutorial. It is really helpful.
@ВаняГурьянов-щ5ы
@ВаняГурьянов-щ5ы 2 года назад
Thank you very much, my friend! I think this world is getting better thanks to you!! )
@poeticider
@poeticider 2 года назад
Thanks man. I wanted to get a project done in react before moving on to learning back-end stuff. This got me there, will have some fun playing about with the CSS tomorrow!
@mydaily21
@mydaily21 2 года назад
at 20.00 mnt, im stuck beacuse error. and after checked in console have notice : react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root. any one have solutiion?
@codedcarbon3493
@codedcarbon3493 3 года назад
Thank you so much for this brilliant tutorial, I had not a clue about react before today. I still have a long way to go but feel confident I can get there from this tutorial. Clear, concise, transparent and fun. Genuine thanks.
@moosaraza7584
@moosaraza7584 2 года назад
The reason why console.log(...todos) not printing the latest added element is because setTodos is setting the value to todos. React doesn't immediately do that and it also takes a callback. So, javascript generally doesn't wait the setTodos to finish its work and console the items it have on todos. React plans out the re-rendering of the component when the state is updated. It doesn't do that immediately.
@mehdiostadd
@mehdiostadd 2 года назад
thanks for this great tuturial. i needed a toturial like this to have a good training project and really enjoyed of coding this app . i'll follow the entire of your channel bro ;)
@addacdd
@addacdd 3 года назад
CSS File to save you all time. { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } body { background: linear-gradient( 90deg, rgba(48, 16, 255, 1) 0%, rgba(100, 115, 255, 1) 100% ); } .todo-app { display: flex; flex-direction: column; justify-content: start; width: 520px; min-height: 600px; background: #161a2b; text-align: center; margin: 128px auto; border-radius: 10px; padding-bottom: 32px; } h1 { margin: 32px 0; color: #fff; font-size: 24px; } .complete { text-decoration: line-through; opacity: 0.4; } .todo-form { margin-bottom: 32px; } .todo-input { padding: 14px 32px 14px 16px; border-radius: 4px 0 0 4px; border: 2px solid #5d0cff; outline: none; width: 320px; background: transparent; color: #fff; } .todo-input::placeholder { color: #e2e2e2; } .todo-button { padding: 16px; border: none; border-radius: 0 4px 4px 0; cursor: pointer; outline: none; background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100% ); color: #fff; text-transform: capitalize; } .todo-input.edit { border: 2px solid #149fff; } .todo-button.edit { background: linear-gradient( 90deg, rgba(20, 159, 255, 1) 0%, rgba(17, 122, 255, 1) 100% ); padding: 16px 22px; } .todo-container { display: flex; flex-direction: row; position: relative; } .todo-row { display: flex; justify-content: space-between; align-items: center; margin: 4px auto; color: #fff; background: linear-gradient( 90deg, rgba(255, 118, 20, 1) 0%, rgba(255, 84, 17, 1) 100% ); padding: 16px; border-radius: 5px; width: 90%; } .todo-row:nth-child(4n + 1) { background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100% ); } .todo-row:nth-child(4n + 2) { background: linear-gradient( 90deg, rgba(255, 12, 241, 1) 0%, rgba(250, 0, 135, 1) 100% ); } .todo-row:nth-child(4n + 3) { background: linear-gradient( 90deg, rgba(20, 159, 255, 1) 0%, rgba(17, 122, 255, 1) 100% ); } .icons { display: flex; align-items: center; font-size: 24px; cursor: pointer; } .delete-icon { margin-right: 5px; color: #fff; } .edit-icon { color: #fff; }
@jsonhackademics
@jsonhackademics 2 года назад
thanks for this video. I've been learning & coding in JavaScript since January and although it took me 2 days, I was able to build my first app.
@mydaily21
@mydaily21 2 года назад
at 20.00 mnt, im stuck beacuse error. and after checked in console have notice : react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root. any one have solutiion?
@nataliiachaikovska4
@nataliiachaikovska4 3 года назад
Thank you so much! You did a great job! I wish you health and success!!! With love from Ukraine :)
@nosairabor766
@nosairabor766 2 года назад
hope you're safe amidst the crisis? :)
@longphamvan5314
@longphamvan5314 2 года назад
Thank you for the starter project that I worked on
@DrewNorman
@DrewNorman 3 года назад
Dude you are the best man. I dig your videos
@hacksbyjohn1188
@hacksbyjohn1188 2 года назад
Setting Id incrementally, zero to infinite instead of having random number in a range: const [id, setId] = useState(0); const giveId=()=>{ setId(id + 1) return id; } const handleSubmit = (e)=> { e.preventDefault(); props.onSubmit({ id: giveId(), text:input }); setInput(""); };
@mydaily21
@mydaily21 2 года назад
at 20.00 mnt, im stuck beacuse error. and after checked in console have notice : react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root. any one have solutiion?
@ScottKoons1993
@ScottKoons1993 3 года назад
Excellent tutorial!! Thanks for all the hard work. Love your entire channel
@mustafakosmaz7509
@mustafakosmaz7509 3 года назад
by help of this extensively great tutorial i fixed my whole problms thanks very much
@briandesign
@briandesign 3 года назад
Glad it helped
@ravenhooper9263
@ravenhooper9263 Год назад
works perfect, I definitely subscribed...thanks!!!!
@numberoneBORON
@numberoneBORON 2 года назад
beautiful! I loved the tutorial! I learned so much!
@brocode1240
@brocode1240 2 года назад
thanks for make this video im do excited when I learn it with your video, I like your explaintation.
@MegaTommy105
@MegaTommy105 Год назад
banger as always. Keep it up!
@gonzaloairasca1647
@gonzaloairasca1647 3 года назад
Sos un grande amigo, gracias por subir este contenido!!
@raffascardamaglia7679
@raffascardamaglia7679 4 года назад
thanks dude im always learning more!!
@briandesign
@briandesign 4 года назад
Glad to hear it!
@dannychun924
@dannychun924 2 года назад
Great tutorial ! I learned a lot, thank you for taking the time to make this I found it very helpful!!
@andrewkorsten2423
@andrewkorsten2423 2 года назад
great beginner tut for the todo in react!
@omidmorshedzade7551
@omidmorshedzade7551 2 года назад
Thank you. It was very good. I wish you success
@pjguitar15
@pjguitar15 3 года назад
Thank you so much for this tutorial. I helps a LOOOT of people with their developing careers including me as an intermediate learner. Keep on uploading :)
@fox1k711
@fox1k711 2 года назад
Geat Job ! thx from Ukraine student
@SpyFromMarsZeus
@SpyFromMarsZeus 3 года назад
You saved my life, thank you!
@MrSantino3
@MrSantino3 2 года назад
Really helpful , nice UI
@jscrack8443
@jscrack8443 3 года назад
Superb Brian..... Keep it up :)
@isurukumarasiri7358
@isurukumarasiri7358 2 года назад
superb tutorial. works great
@Ashton-mx2bg
@Ashton-mx2bg 2 года назад
most excellent my dude
@nguyenxuantrong3034
@nguyenxuantrong3034 2 года назад
Great tutorial ! I learned a lot, thanks for share this video
@mydaily21
@mydaily21 2 года назад
at 20.00 mnt, im stuck beacuse error. and after checked in console have notice : react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root. any one have solutiion?
@jtoomay9102
@jtoomay9102 2 года назад
Awesome Tutorial!
@franciscoolivares7068
@franciscoolivares7068 Год назад
Super Thanks bro!
@simonetrita
@simonetrita 2 года назад
Man thank you for this.
@LuciferMorningstar-bj5fh
@LuciferMorningstar-bj5fh 3 года назад
Tks man, u help me so much!
@niralidholariya8238
@niralidholariya8238 4 года назад
i see your all videos AND i like your videos
@sevketparlak3941
@sevketparlak3941 2 года назад
Good Project Thanks..🤓
@jonasrocha2836
@jonasrocha2836 2 года назад
AMAZING Rich!
@iwnl
@iwnl 3 года назад
This was great. tysm
@cosminvalentinionita5743
@cosminvalentinionita5743 3 года назад
Great vid helped a lot!
@jake5335
@jake5335 2 года назад
This feels like one of those lectures at university when the lecturer thinks they can just wing it as they go. Results in a mess where simple idea are not presented clearly
@oskarolortegui9623
@oskarolortegui9623 3 года назад
where does ever the property "is Complete" appear? I mean the object created only has "id" and "text" as keys but even "text" is changed for "value" I'm really confuse
@muhammedaltay3705
@muhammedaltay3705 2 года назад
did you find where 'isComplete' appeared? I am really confused.
@amilkarcruz6117
@amilkarcruz6117 3 года назад
Great video, thanks bro 👏👏👏👏
@briandesign
@briandesign 3 года назад
Thanks!
@reactify4719
@reactify4719 3 года назад
I have a question... const submitUpdate = value => { updateTodo(edit.id, value); setEdit({ id: null, value: '' }); }; if (edit.id) { return ; } but you didint give any parameter for submitUpdate Function. how it take its value to update?
@ironmanlifts
@ironmanlifts 3 года назад
Thanks for the tutorial. For newbies out there like me looking to clone, the public folder and index.html is not included so you will get errors with npm. :) Just thought Id mention that.
@Power_to_Inspire
@Power_to_Inspire 3 года назад
Yep!
@thalibarrifqi
@thalibarrifqi 4 года назад
I just started learning react, and i learn so much from you, are you going to make a crud project using react and firebase?
@briandesign
@briandesign 4 года назад
Ill make one in the future once I have more time
@rohanjoshi8420
@rohanjoshi8420 3 года назад
Awesome videos it helps me alot
@rajbannasa7662
@rajbannasa7662 3 года назад
Thank you so much sir ❤️
@roadofdragon
@roadofdragon 4 года назад
keep going bro, great tutorial
@briandesign
@briandesign 4 года назад
Thanks!
@bakareabayomi4320
@bakareabayomi4320 Год назад
Thanks a lot. ❤
@deleteduser5336
@deleteduser5336 3 года назад
i would have loved to see a save feature i would have used this for my everyday needs
@ethioanonymous1213
@ethioanonymous1213 Месяц назад
tnx verymuch bro
@mohammedtalhi666
@mohammedtalhi666 4 года назад
Thanks dude , keep going !
@briandesign
@briandesign 4 года назад
Thanks Mohammed!
@mohamedabdellatif5620
@mohamedabdellatif5620 2 месяца назад
very good job
@alexlavertyau
@alexlavertyau 3 года назад
Could you do a follow up tutorial on how to persist this To do list to a database?
@yuri_cmps
@yuri_cmps 4 года назад
Hey dude, thanks you for share your knowledge
@briandesign
@briandesign 4 года назад
Thanks Yuri!
@coriariasgibert9945
@coriariasgibert9945 3 года назад
Fantastic ❤️ thanks
@r.muthukumaran
@r.muthukumaran 2 года назад
You Rock!
@Esxae
@Esxae 4 года назад
So glad i came across your channel, this was a great tutorial! Would it be possible to create a part 2 to this? i'd love to learn how you'd store the to-do list data so that it doesn't clear out on refreshes, perhaps using firebase realtime database?
@briandesign
@briandesign 4 года назад
Hey, thanks for commenting! So you could implement localstorage to save the data, but firebase would prob be better since it's saved there. There's plenty of other todo app tutorials I've seen where they implement firebase/local storage that you could simply add to the code I made for this app if you wanted to do it now. I'll most likely update all my projects with firebase or backend in the future, but for now you could probably find a few resources to get started on youtube
@mohammedraquib6195
@mohammedraquib6195 2 года назад
Can you please share me the source code please? Iam stuck with an error props.submit is not a function.
@leoblack8497
@leoblack8497 2 года назад
rfce to create a component ? how come no one told me that before , cool extension!!
@dhanush_gh
@dhanush_gh Год назад
thank you :)
@IbrahimIceCold
@IbrahimIceCold 3 года назад
thank you, master!
@mohanedradhouani4153
@mohanedradhouani4153 3 года назад
have issue in the minit 32 cant add item in the fields ?? any help please ?
@abdessamadahmali3935
@abdessamadahmali3935 Год назад
thanks a lot !
@ojaswijoshi4414
@ojaswijoshi4414 3 года назад
Thank you!
@KeelanJon
@KeelanJon 3 года назад
Hi Brian, thanks for the great tutorial, your react website tutorials are some of the best on RU-vid. I've completed this successfully but there's a strange behavior I noticed on both yours and my own that I couldn't figure out. Considering we log the todos after every submission, why does the first not show when we click add for the first time? They always seem a task behind in the log? Strange stuff.
@briandesign
@briandesign 3 года назад
hmm I'll have to check that out. If you find a solution, feel free to let me know
@KeelanJon
@KeelanJon 3 года назад
@@briandesign Lol just figured it out via of course StackOverflow. It's due to useState not being synchronous. Not sure if links are permitted in your comment section but I'll leave this here should you be interested, or be it useful to anyone else: stackoverflow.com/questions/28773839/react-form-onchange-setstate-one-step-behind.
@briandesign
@briandesign 3 года назад
stackoverflow saving the day haha. I'll check that post out! Thanks for sharing Keelan
@utahshu
@utahshu 3 года назад
Super fun!
@luiscrespol8640
@luiscrespol8640 Год назад
I got totally confused and something that It would take 10 minutes, but it took 50 min. You need to redo this tutorial, fix the mistakes, and make it easier and faster!
@elliottarnold9542
@elliottarnold9542 4 года назад
I dont think its helpful to declare functions inside of the before you have written it. You end up backtracking and it disrupts the flow of learning about the app. You have done this several times in the video by the time you reach 32:31. Just my opinion.
@monkeystylle
@monkeystylle 3 года назад
i must agree , that is very confusing..
@MM-lo9tk
@MM-lo9tk 3 года назад
It's because he doesn't really know what he's doing. I've seen enough tutorials to know when someone is clueless and just copying code from someone else. He doesn't even know what a regex is... I get it.. it's easier to make a RU-vid channel and pretend to know to code than it is to learn how to code and get a job coding... but honestly it's unethical and you're doing the people who watch your videos a huge disservice.
@sireeshaammadasani5549
@sireeshaammadasani5549 2 года назад
@Brian Design using icons making the output not to render on browser even after insta;;ing the packages also
@muhammadhamzashabbir8364
@muhammadhamzashabbir8364 3 года назад
Help Please !!! I am getting Error TypeError: Cannot read property 'map' of undefined
@subbusubtamanyam7819
@subbusubtamanyam7819 2 года назад
This is the css file' * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } body { background: linear-gradient( 90deg, rgba(48, 16, 255, 1) 0%, rgba(100, 115, 255, 1) 100% ); } .todo-app { display: flex; flex-direction: column; justify-content: start; width: 520px; min-height: 600px; background: #161a2b; text-align: center; margin: 128px auto; border-radius: 10px; padding-bottom: 32px; } h1 { margin: 32px 0; color: #fff; font-size: 24px; } .complete { text-decoration: line-through; opacity: 0.4; } .todo-form { margin-bottom: 32px; } .todo-input { padding: 14px 32px 14px 16px; border-radius: 4px 0 0 4px; border: 2px solid #5d0cff; outline: none; width: 320px; background: transparent; color: #fff; } .todo-input::placeholder { color: #e2e2e2; } .todo-button { padding: 16px; border: none; border-radius: 0 4px 4px 0; cursor: pointer; outline: none; background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100% ); color: #fff; text-transform: capitalize; } .todo-input.edit { border: 2px solid #149fff; } .todo-button.edit { background: linear-gradient( 90deg, rgba(20, 159, 255, 1) 0%, rgba(17, 122, 255, 1) 100% ); padding: 16px 22px; } .todo-container { display: flex; flex-direction: row; position: relative; } .todo-row { display: flex; justify-content: space-between; align-items: center; margin: 4px auto; color: #fff; background: linear-gradient( 90deg, rgba(255, 118, 20, 1) 0%, rgba(255, 84, 17, 1) 100% ); padding: 16px; border-radius: 5px; width: 90%; } .todo-row:nth-child(4n + 1) { background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100% ); } .todo-row:nth-child(4n + 2) { background: linear-gradient( 90deg, rgba(255, 12, 241, 1) 0%, rgba(250, 0, 135, 1) 100% ); } .todo-row:nth-child(4n + 3) { background: linear-gradient( 90deg, rgba(20, 159, 255, 1) 0%, rgba(17, 122, 255, 1) 100% ); } .icons { display: flex; align-items: center; font-size: 24px; cursor: pointer; } .delete-icon { margin-right: 5px; color: #fff; } .edit-icon { color: #fff; }* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } body { background: linear-gradient( 90deg, rgba(48, 16, 255, 1) 0%, rgba(100, 115, 255, 1) 100% ); } .todo-app { display: flex; flex-direction: column; justify-content: start; width: 520px; min-height: 600px; background: #161a2b; text-align: center; margin: 128px auto; border-radius: 10px; padding-bottom: 32px; } h1 { margin: 32px 0; color: #fff; font-size: 24px; } .complete { text-decoration: line-through; opacity: 0.4; } .todo-form { margin-bottom: 32px; } .todo-input { padding: 14px 32px 14px 16px; border-radius: 4px 0 0 4px; border: 2px solid #5d0cff; outline: none; width: 320px; background: transparent; color: #fff; } .todo-input::placeholder { color: #e2e2e2; } .todo-button { padding: 16px; border: none; border-radius: 0 4px 4px 0; cursor: pointer; outline: none; background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100% ); color: #fff; text-transform: capitalize; } .todo-input.edit { border: 2px solid #149fff; } .todo-button.edit { background: linear-gradient( 90deg, rgba(20, 159, 255, 1) 0%, rgba(17, 122, 255, 1) 100% ); padding: 16px 22px; } .todo-container { display: flex; flex-direction: row; position: relative; } .todo-row { display: flex; justify-content: space-between; align-items: center; margin: 4px auto; color: #fff; background: linear-gradient( 90deg, rgba(255, 118, 20, 1) 0%, rgba(255, 84, 17, 1) 100% ); padding: 16px; border-radius: 5px; width: 90%; } .todo-row:nth-child(4n + 1) { background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100% ); } .todo-row:nth-child(4n + 2) { background: linear-gradient( 90deg, rgba(255, 12, 241, 1) 0%, rgba(250, 0, 135, 1) 100% ); } .todo-row:nth-child(4n + 3) { background: linear-gradient( 90deg, rgba(20, 159, 255, 1) 0%, rgba(17, 122, 255, 1) 100% ); } .icons { display: flex; align-items: center; font-size: 24px; cursor: pointer; } .delete-icon { margin-right: 5px; color: #fff; } .edit-icon { color: #fff; }
@msdryagin
@msdryagin 3 года назад
nice video!! Thank You
@briandesign
@briandesign 3 года назад
Thanks!
@tkot7857
@tkot7857 2 года назад
6:40 install es7 27:20 installing react icons
@a.hannan_06
@a.hannan_06 Год назад
was looking for this. so grateful of you.
@a.hannan_06
@a.hannan_06 Год назад
is there any download for ti??
@avinashsinghaniya8033
@avinashsinghaniya8033 3 года назад
I created but when I am going with edit button it's editing options is coming but when I edit and add again edit showing error :- props.onSubmit is not a function iside TodoForm ????? Please resolve as soon I'm stuck in last minute 🙄
@momparty
@momparty Год назад
I wish you had explained that regular expression, or at least what it was trying to do. I couldn't get it to work so I just omitted it
@justinekenyansa
@justinekenyansa 2 года назад
you did no include a github repo, but thanks for the video, its a greta one
@Kelvin711
@Kelvin711 3 года назад
constructive criticism time. I thought the app looked sick so I decided to code along to see the way you tackled this app since there are many ways to do things in React. Unfortunately the way you were describing your steps lacked. You seemed to not have a thorough explanation of why you did things and sorta just did them. If I was a pure beginner and I watched you, I would be confused on many of the things you were doing.
@ketankshukla
@ketankshukla 3 года назад
I think he just copied stuff from another tutorial and prettified it. If you asked him to make this app from scratch without references, he wouldn't be able to do it.
@ketankshukla
@ketankshukla 3 года назад
You're better off watching Stephen Grider's Udemy courses.
@ketankshukla
@ketankshukla 3 года назад
His GitHub repo is missing the entire public folder - no index.html.
@mohamedyahya7463
@mohamedyahya7463 3 года назад
good jop man thanks a lot
@BestNbaShorts
@BestNbaShorts 2 года назад
wrote code like u and got error Uncaught TypeError: Cannot read properties of undefined (reading 'text') in props.onSubmit. Please help!
@slaincore
@slaincore 4 года назад
Just instant like =)
@AbhishekVerma-dv6bz
@AbhishekVerma-dv6bz Год назад
Thanks
@pavelsarygin4937
@pavelsarygin4937 3 года назад
"let me type here that makes more sense" types in "ayoo"
@shinnthantminn9758
@shinnthantminn9758 2 года назад
what is your icon Theme Extension pls show Tell Me
@kaanzenginer4699
@kaanzenginer4699 Год назад
which extensions are in use during this tutorial? which one autofills the html tags and which extension organised the code in the input tag for you?
@Shawnmindset
@Shawnmindset 2 года назад
Thank you for this video but can you please try to explain what does those function do. so that it will be easy to understand.
@ejikemekingson6336
@ejikemekingson6336 2 года назад
Hey, I think these tutorials only piece what you've learnt together and not exactly go in-depth. So I'd really recommend checking out Angela Yu or Colt Steele for a solid foundation and then following tutorials like this to build muscle memory and learn the industry standards or like it's commonly said "best coding practice". All the best.
Далее
Every React Concept Explained in 12 Minutes
11:53
Просмотров 681 тыс.
V16 из БЕНЗОПИЛ - ПЕРВЫЙ ЗАПУСК
13:57
Why Signals Are Better Than React Hooks
16:30
Просмотров 478 тыс.
5 JavaScript Concepts You HAVE TO KNOW
9:38
Просмотров 1,4 млн
Learn React With This One Project
42:38
Просмотров 790 тыс.
ALL React Hooks Explained in 12 Minutes
12:21
Просмотров 135 тыс.