Thank you, I learned to create a task manager from this tutorial, and more than that I learned the process of building application in a systematic way.
This is a great video!!! I learnt a lot from this concise tutorial. If you don't want to display "Please fill out this field" message when you click clear button, you can change type of clear button to this: Clear :)
Thank you very much man! This video help me to really understand React Context and use Effect. I can't express how grateful i'm for this. Thanks again.
Hi, this is so cool, I'm learning react native for some project I need to do and the functionality of this app helps me a lot so thanks, you have a new subscriber
Before watching the video keep in mind that you need to have a basic understanding on Redux, hook,js array function. Otherwise you might have hard time understanding some things. Its pretty basic but you need to know the basics. Btw great work man. Really enjoyed the video and the way you explained everything .This is a good tutorials to go through if you want to brush up your knowledge in react. I was a on break from programing and need something to brush up my knowledge on react and this was perfect.
UUID has changed, just in case you need the update... in TaskListContext : import { v4 as uuidv4 } from "uuid"; and in the // Add tasks const addTask = title => { setTasks([...tasks, { title, id: uuidv4() }]); }; also, make sure you put this font-awesome version in your /public/index.html otherwise, the icons won't show up with the lastest version
Great tutorial. I learn a lot from you, Thank you for sharing. ☘️ I notice that when adding new task, the Clear button acts like Add task button. i guess coz both nested within the same form.
Why is a callback function needed when triggering the removeTask method on the delete button onClick? I think I might not understand callback functions as well as I thought.
I just started the video but I’m assuming you mean something like onClick={() => this.function()}. I’m no expert but as far as I know it’s not needed. OnClick={this.function} would work just fine. Might need to look more into it
One of the most concise tutorials that I had ever watched. Keep it up! Can you just please tell me what font-family are you using for your IDE? Is it Operator Mono Pro or Dank Mono?
When i console log editItem in TaskForm , it doesn't log the value set from findTask, but instead logs the function. output : id => { const task = tasks.find(item => item.id === id); seteditItem(task); } is there a step I am missing?
Hi, thanks. Great video. I created todo app using useReducer and context api. It works, but if I update browser all todos that I added before disappear. What could be the problem?
Great content! Thank you! i have a question though, halfway through the tutorial I lost internet connection so I tried doing the project on my own, offline, since you showed us the functionalities of the app from the start. So, I was able to do all the functionalities and when my internet was up again I tried to compare your code on github to compare. Almost the same but a few methods that werent. My question is, is that fine? I mean, does my code have to be exactly yours or can code be written differently to produce the same output? for example, I didn't have a findItem method which use .find to get the id and title of the clicked list item to edit, instead I had a method to get the id of the clicked item and used that id to map through the tasks to find the one with same id and edit the title of the task. sorry if this was lengthy. thanks again!
Your question literally makes zero sense. Of course your app will be different if you did it yourself. There is probably a hundred ways different to create a simple todo app. As long as it works
u used the context api and hooks but used as localstorage for storing thats kind of cheating, if possible do without using localstorage and using context api and hooks
Hey all,
Please use the link below for the Font Awesome icons:
cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css
;
I've been trying to understand context for months! I can't imagine a better explanation. Many thanks!
Thank you, I learned to create a task manager from this tutorial, and more than that I learned the process of building application in a systematic way.
This is a great video!!! I learnt a lot from this concise tutorial. If you don't want to display "Please fill out this field" message when you click clear button, you can change type of clear button to this: Clear :)
My very first React App is a complete success thanks to you!
Tons of gratitudes 🙏 🙌
ყველანაირად ძალიან კარგი ვიდეოა, მადლობა
very good clear explanation of context api
Nice tutorial, all the basics you need to know to start coding with Context API and React Hooks!
Thank you very much man! This video help me to really understand React Context and use Effect. I can't express how grateful i'm for this. Thanks again.
I already have one of your course, but really a big THANK YOU for this video. this is really great practice of context api
Glad to hear that! Thanks!!!
Hi, this is so cool, I'm learning react native for some project I need to do and the functionality of this app helps me a lot so thanks, you have a new subscriber
Really Good Instructor.
Hi,
this tutorial is very awesome,
I hope you have a great life.
Thanks man :D
Awesome tutorial. Thanks
Really very great job
please don't ever stop doing that
you're the best
Thanks man! We will keep doing it :)
This was a good one, keep it up
This is a production level app. Great work!
It's a good tips to keep the css file name in all lover case.
Before watching the video keep in mind that you need to have a basic understanding on Redux, hook,js array function. Otherwise you might have hard time understanding some things. Its pretty basic but you need to know the basics.
Btw great work man. Really enjoyed the video and the way you explained everything .This is a good tutorials to go through if you want to brush up your knowledge in react. I was a on break from programing and need something to brush up my knowledge on react and this was perfect.
Amazing tutorial. I learnt a lot from you.
Clear and good explanation. Awesome.
Superb tutorials
only one word : Perfect
UUID has changed, just in case you need the update...
in TaskListContext :
import { v4 as uuidv4 } from "uuid";
and in the // Add tasks
const addTask = title => {
setTasks([...tasks, { title, id: uuidv4() }]);
};
also, make sure you put this font-awesome version in your /public/index.html
otherwise, the icons won't show up with the lastest version
Thanks! :)
Thanks a lot for this update Marc!!!
Create more projects like this.
Thank you for this awesome tutorial. 🖤
Thanks a lot!! We have a couple of other React tuts on our channel, so, you can check them out as well
@@codeandcreate Okay
Thanks for this tutorial.
had a little issue with uuid. needed to it a different way
import {v4 as uuid} from 'uuid'
I cannot delete the task when I click on it
finally!!, One of the best react videos ever!!!!
Great Tutorial.
tks
Glad it helped
Great tutorial. I learn a lot from you, Thank you for sharing. ☘️
I notice that when adding new task, the Clear button acts like Add task button. i guess coz both nested within the same form.
Try putting a type="button" tag on the Clear button, should prevent it from acting as a submit button
Great content from my favorite Udemy instructor. (-:
Thank you so much for this wonderful tutorial.
Superb tutorial
Nice one man.
I learnt many things..Really, it's great job.. Thanks :)
Thanks you!!! Glad to hear that!
best
Awesome!!
Well Explained! Thanks
Thank you!!
fantastic tutorial. Thank you so much.
When i am integrating this context api in router modules, am not able to get a result, How to create a multipage navigation along with Context API?
Amazing work. Great app, but please use a bigger font, thanks :)
Thank you. You meant the font in VS Code, right?
@@codeandcreate yes :)
Ajudou muito, thks bro!
Thanks
Solid! Thank you!
if i refresh this it will gone?
Nope, we use a browser local storage, follow the video to the end
thank u so much
what is the version of your VS code when you created this?
Thank you, very much.Im waiting new tutorials
Thanks! Stay tuned
Why is a callback function needed when triggering the removeTask method on the delete button onClick? I think I might not understand callback functions as well as I thought.
I just started the video but I’m assuming you mean something like onClick={() => this.function()}. I’m no expert but as far as I know it’s not needed.
OnClick={this.function} would work just fine. Might need to look more into it
Thanks for your work!
Amazing tutorial!
Thank you!
One of the most concise tutorials that I had ever watched. Keep it up! Can you just please tell me what font-family are you using for your IDE? Is it Operator Mono Pro or Dank Mono?
Hey thanks!!! It’s called “Operator Pro”
@@codeandcreate Thank you for the fast reply. I have one more question to ask.. What color theme for IDE are you using?
It’s one of the Monokai themes I believe
@@codeandcreate Found it! Thanks a lot!
This was great!
Merci :)
Please what's the colour name for the content background? I mean what type of black/grey colour is that...
are you planning to make a react course we are waiting please make a complete course plz in udemy
How we can add search component in this app? Help please with that, i have no idea what need to be write
Great video!!!! And if I would like to use a mySql table to storage all tasks? Can you help me?
Good tutorial but i was wondering why you didnt useReducer hook for your action?! Is there an specific reason for it?!
Not really, I did use it in the Budget App tutorial, you can check it out
hey, great tutorial! i keep getting an error that 'localStorage is not defined' i'm using next.js, any idea how I can go about solving this?
When i console log editItem in TaskForm , it doesn't log the value set from findTask, but instead logs the function.
output :
id => {
const task = tasks.find(item => item.id === id);
seteditItem(task);
}
is there a step I am missing?
Is there a chance that you named your method and variable the same name i.e. editItem?
Hi, thanks. Great video. I created todo app using useReducer and context api. It works, but if I update browser all todos that I added before disappear. What could be the problem?
Hi, did you add local storage functionality?
@@codeandcreate No, I didn't add localStorage. Thanks I am gonna add that.
We add the local storage at the end of the video, so, just follow it :)
Hi please create more projects using react hooks
Great content! Thank you! i have a question though, halfway through the tutorial I lost internet connection so I tried doing the project on my own, offline, since you showed us the functionalities of the app from the start. So, I was able to do all the functionalities and when my internet was up again I tried to compare your code on github to compare. Almost the same but a few methods that werent. My question is, is that fine? I mean, does my code have to be exactly yours or can code be written differently to produce the same output? for example, I didn't have a findItem method which use .find to get the id and title of the clicked list item to edit, instead I had a method to get the id of the clicked item and used that id to map through the tasks to find the one with same id and edit the title of the task. sorry if this was lengthy. thanks again!
Your question literally makes zero sense. Of course your app will be different if you did it yourself. There is probably a hundred ways different to create a simple todo app. As long as it works
@@alexlytle089 my apologies for asking a nonsensical question then..
I canny delete a task.Please help me I wrote exactly same code but still showing task is not defined.Please help I got stuck here.
import { TaskListContext } from '../context/TaskListContext'
remember about { } in import
hi please make a course using react hooks and styled components
which bootstrap snippets using?
We are not using bootstrap
nice tutorial sir. Can u make Global State Management in Hooks? thanks
14:08 I could not understand this part
You wrote const {task}=useContext(TaskListContext).
40:18
can anyone do a version without using uuid....
I cannot delete the task 😭😭😭.
u used the context api and hooks but used as localstorage for storing thats kind of cheating, if possible do without using localstorage and using context api and hooks