Building a Todo List App with Redux 😍 | ( React-Redux ) Tutorial For Beginners
HTML-код
- Опубликовано: 5 сен 2024
- Todo List App with Redux and React with Awesome animation using Framer motion 😇
Demo Link: react-redux-to...
-----------------------------------------------
Need Web Development or AI Solutions Services? 🚀
Let's bring your ideas to life!
Contact Me From Here: tally.so/r/wdlj0N
-----------------------------------------------
Blog📖: devdreaming.co...
If you want to learn Redux as a beginner here is Tutorial for you 💖:
• React Redux Tutorial f...
Hey Guys,
In this video we're going to build awesome todo app with react-redux and cool animation using Framer motion.
Don't forget to watch whole videos, we're going to learn a lot of stuff like,
-- How to create reducer and action in just one createSlice function?
-- All functionalities like add, update, delete etc...
-- Cool animation using Framer motion
-- Connecting Redux with ReactJS
-- Use Redux with Redux-toolkit etc.
Watch whole video in order to understand so that you use Redux freely on your own projects.
CODE:
github.com/cod...
[𝐈 𝐬𝐭𝐫𝐨𝐧𝐠𝐥𝐲 𝐬𝐮𝐠𝐠𝐞𝐬𝐭 𝐲𝐨𝐮 𝐭𝐨 𝐰𝐫𝐢𝐭𝐞 𝐜𝐨𝐝𝐞 𝐚𝐥𝐨𝐧𝐠 𝐰𝐢𝐭𝐡 𝐦𝐞 𝐬𝐨 𝐲𝐨𝐮 𝐜𝐚𝐧 𝐥𝐞𝐚𝐫𝐧 𝐭𝐡𝐞 𝐟𝐥𝐨𝐰 𝐨𝐟 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐭𝐡𝐢𝐬]
𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲 𝗼𝗻 👇 𝘄𝗵𝗲𝗿𝗲 𝗜'𝗺 𝘀𝗵𝗮𝗿𝗶𝗻𝗴 𝗹𝗼𝘁'𝘀 𝗼𝗳 𝘂𝘀𝗲𝗳𝘂𝗹 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀!
Twitter🐤 : / code_bucks
LinkedIn 🔗: / codebucks
Instagram 📫: / code.bucks
Email 📧: codebucks27@gmail.com
In upcoming videos, I'm going to create lots of cool stuff with JavaScript and react so make sure to subscribe.
Like, Sub🥂 & Share! ♥
Learn More About,
Build Devto Clone in React:
• Build Dev.to Clone in ...
Build Awesome stuff with ReactJs (Playlist) :
• Build with ReactJs
Learn React Basics (Playlist):
• React Basics
React Advanced Topic (Playlist) :
• React Advanced Concept...
If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below.
Thank You for watching! 😉
Music Credits:
Ruck P, Shuko - 5 am chll.to/0a03fd12
Aso, Middle School, Aviino - Cap's Café chll.to/45547fee
Psalm Trees, Guillaume Muschalle - Desire chll.to/575d082f
Ian Ewing, Toonorth - Midnight Service chll.to/c7615cb6
Mama Aiuto - Today Feels Like Everyday chll.to/863a06fb
Mama Aiuto - Small Town Palm Trees chll.to/10023c1e
Sleepy Fish - Way Away chll.to/d843abcf
Get more awesome music from chillhop.com
Where else you can find me:
Twitter🐤 : / code_bucks
LinkedIn 🔗: / codebucks
Instagram 📫: / code.bucks
Email 📧: codebucks27@gmail.com
#ReduxProject
#TodoAppInRedux
#ReactRedux
Thank you for helping to complete my assignment 🙏
Glad it helped you😄
One day I'll tell my juniors, "This is where I've started from...". Thank You So Much For your Tutorial!
This means a lot. Thanks for appreciation 😄🍻
I rarely leave comments, but I have to! Your video is fantastic. I tried a few other tutorials, and the main reason I found yours was bc I kept having errors I couldn’t resolve on StackOverflow that for some reason the instructors were not having??
Yours was put together beautifully, loved the music and vibe and didn’t find it boring. In fact, I think I realized listening to people talk while I’m learning is a bit draining (perhaps my learning style idk), and really enjoyed the presentation. I always want to listen to music when I’m coding but I’m just not there yet as I’m still learning. I was able to put two-and-two together with your pauses and highlights, etc.
My only critique is that the VS Code theme you used made the () contrast poorly with the background sometimes, and I couldn’t tell if it was a () or [] and sometimes would try both, which I’m actually learning from LOL. I think it also has to do with the video quality, but overall a super minor complaint.
Also THANK YOU for including the track links! How cool. Thanks again 💘 Subscribed.
Thank you so much! ❤️
For this wonderful comment. It really means a lot to me and encourage me to keep doing this.
You can ask me anytime if you're having any errors.
Also, as I mentioned in the description chillhop has really good music to listen in the background.
Actually, My laptop is a bit old so maybe because of that video quality is a bit lower, I'll try different themes in vscode and will make sure that it will be more visible. Thanks for this critique I appreciate that.
Thanks again for subscribing. 🥂
I'll upload one video soon.
Keep Coding😄
@@CodeBucks Ok, I do have a question. I’m trying to add a “contact” page with Router. Any tips? I’m reading the docs and following another tutorial rn, but I think my issue is there’s no like designated “home page” cos it’s just one page. Thanks again!
You should make two components, One is the main page while the other is the contact page. And in the the app file add router and on '/' you render Main component and on '/contact' you render the contact page. If you have header in the Main component then you can add contact link (like navigation tab) there. You can also watch this video where I have used router to render different pages on click of navigation links. => ruclips.net/video/BHC-ll9PFe0/видео.html
This is great!!! 👍
Also some app with redux-toolkit and router would be great in the future if possible 😊
Thanks! Sure I'll try to make a video on it ^_^. Is there any app that you recommend using redux-toolkit and Router?
@@CodeBucksIt is not easy question ;-) Maybe some very simple e-shop-like app...
Or e-learning app like english words repeating: on one page (route path) creating a list of words in one column and translation in the second column; on the next page fitting these words with written translation (by clicking a pair - ? ), on the third page pronunciation of these words when onClick (connected with google translator api - ? ). Just a quick idea, something like that :-)
@@witoldnawrot8646 Sounds great! I'll try that :)
😁👍 Awesome!! :)
Really bravo bravo for your work the video helped me a lot 💙💙💙💙
Glad it helped!
Thanks for the appreciation it means a lot.😊
@@CodeBucksI hope there is another tutorials like this one 🌼🙏
Sure!🥂
It is great... Thank you.. I learned a lot from this app...
Glad it was helpful!😄
May I know what is the extension u use to check the state on the chrome?
It's Redux DevTools: chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
Thank you very much, you saved me 😍
Glad it helped!😇
hey can you make a small project on react when you implement animation when state change or stagger animations like that??
Hey, Currently I'm working on creating website using ReactJS. I'll try to make video on small project which use animations. Until then you can try Framer Motion or GSAP.
Man, everything is cool... But pls next videos make font bigger in vs code.
Hey, Sorry for that. Sure i'll keep that in mind😄
The video is good but I wish you would have explained the code cause sometimes it's difficult to understand and boring to watch without explanation.
Hey,
Due to my schedule and stuff i couldn't add voice over in this video cause it takes a lot of time to edit, I'll try my best to add a voice over in my upcoming videos.
Thanks for watching 😃🍻
Bro your content is amazing but you can create a playlist on these topis like which topics we have to learn before doing this project and please also create some playlist with voice because we want someone who expalin the whole logic behind the code as like Code with harry & Thappa technical do and please also suggest some videos or topic from other sources for every action you are taking in project for example here you are you are using redux so suggest where we can learn redux to understand your logic in this project . if you are indian then please make videos in hindi you will get more likes & views and you can also create separate playlist with hindi and english voice over you will get multiple views
I really appreciate all your suggestions and I definitely try to implement as many as possible. Also I have started adding voice over in my recent videos and for this current video, It is in the playlist called "React Redux Tutorial for beginners". Thanks again for this comment. 😉
osm video plzz make sign in sign up page with react redux
Hey, Thanks! Sure I will make one ^_^
How would you add to this? Can you show how to save to local storage, so when it reloads the todos will still be there?
If you want to store in the local storage then,
--> When app loads check if there is no state (todos) in the local storage then initialize one with empty array
--> In the reducer where we're declaring initial state, In that instead of empty array load state (or todo object) from local storage
--> Whenever you're adding, updating or deleting and todos make sure to change it in the local-storage too.
as an example in the addTodos,
before return state you can do,
const newState= JSON.stringify(state);
localStorage.setItem('state', newState);
or something like that. Inshort make changes in local storage too.
@@CodeBucks Okay, thank you very much for the explanation. :D
useref is return the last element.
Could you explain your issue a bit more?
or share the code or a part of it?
@@CodeBucks could you join with me via google meet for 5 minutes please ?
@@CodeBucks when the edit button in clicked , inputref.current only return the last element of the map value.
@@faysalahmedtarek8649 Hey Sry I can't join you right now
@faysal ahmed tarek Where did you used inpuRef ? and where are you using Map function?
Nice 😍
Thanks! ^_^
Please make on video node js tutorial
I will make videos on node JS after a few days. ^_^
When I use provider and store as showing in the video , everything vanishes from my local host. Please help me
There is some error. You can see it in the console. Let me know what it says.
I got the same problem it was a spelling mistake in Reducer.js page instead of
"addTodoReducer.action" its "addtodoReducer.actions"
@@muhammedaashiq119 Oh Alright. Thanks for sharing🥂
what do you bro using extention dev tool react ? what name ! please
Hey, currently I'm using,
Simple react snippets by burke holland;
Auto rename tag by jun han;
Bracket pair colorizer by coenraads;
JavaScript es6 code snippets by charalampos;
Vscode-styled-components by julien;
Prettier for code format;
Also path intellisense vscode plugin...!
For vscode theme i'm currently using Dracula😄
The extension is Redux DevTools.
Link to install in chrome browser: chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related
Can you please suggest the Visual Studio extensions that you are using for React?
Hey sure! Here it is 👇
Simple react snippets ➡ by burke holland;
Auto rename tag ➡ by jun han;
Bracket pair colorizer ➡ by coenraads;
JavaScript es6 code snippets ➡ by charalampos;
Vscode-styled-components ➡ by julien;
Prettier for code format;
Also path intellisense vscode plugin...!
For vscode theme i'm currently using Dracula😄
@@CodeBucks Thanks a lot for sharing 😀!! Will definitely install these today, also learning a lot from this video ❤️
Happy to help😇
Bro should be voice 😢
Hey, yes I agree. It's an old video and I have added voice over in all the latest videos.
how could you do an entire app without explaining anything out, no voice that is nonsense
Hey,
Sorry for any inconvenience But doing voice over video takes more time and thus I have made this without any voice over.
Also, I have made a series of learning Redux an this is the project which uses Redux Toolkit so If you have seen it you'll understand this project quickly.
Even though you follow steps as per the video and see the output you will understand it better. 😄