Let me know what video topics you guys want next 🙏
@Ua-uj1zn Жыл бұрын
I would like to watch video about your first react project
@opeafolabi Жыл бұрын
Thanks for the suggestion! Can you explain a bit more what you mean?
@H7forReal Жыл бұрын
Do more projects with react using API s may be
@opeafolabi Жыл бұрын
@@H7forReal noted! Thanks🙏
@wajidhussain453 Жыл бұрын
filter products using react and image slider using react
@ichiroutakashima4503 Жыл бұрын
ToDo list is one of those underrated apps, but actually one of the most important concepts that allows you to learn the most important parts of React and even JavaScript.
@opeafolabi Жыл бұрын
Facts, it's simple but really effective 👌
@ichiroutakashima4503 Жыл бұрын
@@opeafolabi Yes, I learned a lot with this video. I'm still starting and am currently at props, components, maps and a little bit of useState. This video helps a lot.
@opeafolabi Жыл бұрын
Great to hear that! 🙏
@MrBrady95 Жыл бұрын
Upvoted, for sure! 👍
@janeworld001 Жыл бұрын
Even me, I underrated it. Now I'm back to it😂
@orion6831 Жыл бұрын
I just finished watching this video and I have to say, it was incredibly helpful! The explanations were clear and concise, and I feel like I have a much better understanding of useState now. Thank you so much for sharing this valuable content. I can't wait to start using ReactJs in my own projects.
@opeafolabi Жыл бұрын
Appreciate it bro! 🙏
@TheAniBueatiful7 ай бұрын
Probably one of the best videos I've seen so far about React and using it to create a project. You did an amazing job explaining each segment of this project.
@walterdiaz20038 ай бұрын
Excellent walk through!. I made sure I watched the ads completely to support.
@opeafolabi8 ай бұрын
thank you for that, much appreciated, glad it helped :)
@bluray92726 ай бұрын
Im a bit confused, at around 6:38 when the tag is being put, in my vs code it is not auto importing the "import" statement. I have looked on stack and other videos on youtube, but nothing is seeming to make it auto import.
@sebastianlozano7707 Жыл бұрын
Staggering project my friend. For a rookie like me it was quite helpful to put all this into practice! Thanks a lot my friend
@needlesandpins1701 Жыл бұрын
I have an issue in this part: const [todos, setTodos] = useState([]) const addTodo = todo => { setTodos([...todos, {id: uuidv4(), task: todo, completed: false, isEditing: false}]) console.log(todos); } In my browser it doesn't logs the updated todos. Instead it just shows an empty array whenever i click the addTask button
@VijaySolanki-tf6vt Жыл бұрын
please add the todos in localstrorage and retrive using useEffect here is snapshot const [todos, setTodos] = useState([]); useEffect(() => { const savedTodos = JSON.parse(localStorage.getItem("todos")) || []; setTodos(savedTodos); }, []); const addTodo = (todo) => { const newTodos = [ ...todos,{id:uuidv4(),task:todo,completed:false,isEditing:false}] setTodos(newTodos); localStorage.setItem('todos', JSON.stringify(newTodos)); console.log(newTodos) }; same for the edit,delete :)
@geethu1093 Жыл бұрын
Keep console.log(todos) outside } and check
@thiswillnotdo60274 ай бұрын
@@geethu1093 that worked for me thank you
@Ayush37262 Жыл бұрын
The best part about the video is that you didn't waste time on styling ✌ BTW Awesome Explanation!!!
@opeafolabi Жыл бұрын
Thanks appreciate it🙏
@sucesssoulman Жыл бұрын
It took me a lot of hours to understand your code but with the help of bard I could do it. The hardest part was how you name props, I noticed some people told you the same here. For example task and todo... todo should be taken as the object and task as the variable. Instead of saying task.task you should have said todo.task... and there are more examples in your code. I think that maybe adding more descriptive names for example: task and taskObject ( which is the one that contains the id, task, etc), and trying to not change them when you passed to props would be nice. However, I liked analyzing your code, I learned a lot these hours.
@opeafolabi Жыл бұрын
sorry about that bro. I think in my head it looked okay but I didn't realise it would be confusing for others. Great that you used ai tools. I wish I had them when I first started learning to code. Would have saved me a LOT of headaches. 😂
@feastorfeed8541 Жыл бұрын
The most effective beginner's tutorial I've seen so far.
@itssacmac10 ай бұрын
where did he get the CSS, 4:54
@z.sayari6 ай бұрын
Thanx a lot bro , awesome , clear and simple explanation .
@ethioanonymous12134 ай бұрын
its nice tytor ....iam confused on how you set the id i get error...
@zenel5685 Жыл бұрын
Hi, at 18:00 I get error: "Objects are not valid as a React child (found: object with keys {id, task, completed, isEditing}). If you meant to render a collection of children, use an array instead. " Any way to fix? Edit: Instead of task={todo} I I used task={todo.task} and it worked
@pms147 Жыл бұрын
By this way i fix this bug, i try again task={todo} and it worked. Tks ur cmt.
@Herakles972 Жыл бұрын
Thanks a lot Ope for this tutorial, clear and effective👏
@opeafolabi Жыл бұрын
You're welcome, thanks for watching 🙏
@1942Bombay Жыл бұрын
I like how simple and usefull this looks, im going for it.
@Alcsie Жыл бұрын
Great job! This is a very beautiful exercise. You explain very clearly. Thank you for this video, I learned a lot of stuff from this.
@anikdas7434 Жыл бұрын
awesome tutorial, simple but you covered all the use cases
@opeafolabi Жыл бұрын
thanks man!
@RaphaelKanada7 ай бұрын
You're really a good tutor keep up the good work bro
@opeafolabi7 ай бұрын
Thanks I appreciate it! 🙏
@itssacmac10 ай бұрын
From where he got that CSS 4:54 , i mean how would i know the CSS style he used?
@noneone4377Ай бұрын
in description there is github link, there is css code, u can learn here.
@abiygirma19259 ай бұрын
I'm following the tutorial and I'm At around 13:00 mark. When I click the 'add task' button to see if the state has been updated in the parent component, I get an empty array. Then when I add another task, I get the first task in the array, etc etc. Any idea what is going on?
@abiygirma19259 ай бұрын
I tried putting the print statement in a useEffect because I thought the state update was happening asynchronously. Now the log is happening twice
@torkz10318 ай бұрын
@@abiygirma1925 having this same issue, no use effect logs an empty array, adding a use effect causes it to log the value twice before u actually add the task
@torkz10318 ай бұрын
@opeafolabi any help here?
@abiygirma19258 ай бұрын
@@torkz1031 "no use effect logs an empty array," what do you mean?
@torkz10318 ай бұрын
@@abiygirma1925 so if leave it as he's written it without the useEffect, in the console it will log an array with a length of zero. however i took a break for a while and came back and it's working now. i have no idea why or what i changed lol
@PrabashDissanayaka-m4n Жыл бұрын
really helped me to develop my react skills very valuable video
@Nanashi-rq7lk Жыл бұрын
Perfect tutorial. This video is useful for React beginner
@opeafolabi Жыл бұрын
Thanks, glad it helped!
@crybbcassie93 Жыл бұрын
Thank you a lot! Your tutorials are awesome, i swear
@opeafolabi Жыл бұрын
No problem 🙏 Appreciate it!
@bogdandashinskiy Жыл бұрын
It's cool man, thx for your tutorial and explaining. You are best, makes my day
@opeafolabi Жыл бұрын
Glad to hear that! Thanks for watching 🙏
@KDEWORLD Жыл бұрын
Nice one dude👍
@opeafolabi Жыл бұрын
Thanks ✌
@MariaClara-ru7hn Жыл бұрын
You didn't really explain anything in this video, you just verbalize what you're doing... But it's a good project to try on
@azaelrondon21504 ай бұрын
Excellent Tutorial!
@Abrordev_Axmedov Жыл бұрын
Thank you for this lesson I really liked the way u r teaching us)
@dinoelef Жыл бұрын
Awesome Stuff and great work! everything worked perfectly
@opeafolabi Жыл бұрын
Appreciate it man! Glad it helped.
@a_sarahguerreiro9 ай бұрын
Do I need to download any extensions to be able to use emmet's shortcuts in React projects like he does in min 3:26?
@opeafolabi9 ай бұрын
should be default in vscode, if not maybe download ES7+ React/Redux/React-Native
@a_sarahguerreiro9 ай бұрын
it works,@@opeafolabi , thak u!
@henrimiessan3881 Жыл бұрын
IT HAS BEEN ABOUT 4DAYS WATCHING AND LEARN MOST VALUABLE UNDERSTANDING CONCEPT OF REACT SUCH MANUPILATION ARRAY IN REACT THROUGH THIS VIDEO I HAVE LEARN A LOT AND READY FOR MY REACT LEARNING SKILLL
@benjaminchukwu7298 Жыл бұрын
thank you for the video, i feel like a mistake while doing it, but it still works as intended
@shabanrasheed7713 ай бұрын
Really impressed
@tanpham88858 ай бұрын
@4:58 , where did you get the code to paste into App.css?
@opeafolabi8 ай бұрын
from the github repo, link is in the description
@juanchu2488 Жыл бұрын
OMG, Thanks a lot!! This is a good and complete tutorial. It works perfectly :D
@mufeesrahman-e6g Жыл бұрын
That was great Man ....... i really appretiate your work, it really hels me to do my project
@opeafolabi Жыл бұрын
Glad to hear that 🙏
@cd7458 Жыл бұрын
I thank you very much that you care about local storage in source code , thank you very much
@opeafolabi Жыл бұрын
no worries 🙏
@jdhenckel27 ай бұрын
what version of NODE and NPM are you using?
@hongkaihuang1503 Жыл бұрын
best tutorial in my life!
@opeafolabi Жыл бұрын
wow, it's great to hear that! Thanks so much for watching🙏
@Sammy1020939 ай бұрын
Good tutorial, trying to get back into coding with React after spending so much time on Python and Ansible
@opeafolabi9 ай бұрын
Nice. I've been working with python recently for a web scraping project.
@deez-48 Жыл бұрын
great tutorial, really helped me out
@opeafolabi Жыл бұрын
Glad it helped 👍
@anilsuyal7 ай бұрын
Thanks man! this was amazing.
@opeafolabi7 ай бұрын
Glad you liked it!
@Shebajsahikh3807 ай бұрын
for learning logices implement your video is very good thats i learned a lot frome this viedeo that how we can give style and some logice building in react
@osamamahmoud695110 ай бұрын
thank you so much this work is amazing God bless you
@developersworld23 Жыл бұрын
Love it man keep making this kind videos
@opeafolabi Жыл бұрын
Thanks! Appreciate the support!
@Vaibhav-z6o Жыл бұрын
Very helpful and well explained tutorial
@alexdaimari75610 ай бұрын
great work👏👏
@opeafolabi10 ай бұрын
Thanks :)
@PavanKumar7799k11 ай бұрын
at 4:50 in this video where u copy that file of css u paste it in app.css let me know if u available to tell us
@opeafolabi11 ай бұрын
Check the github repo. Has all the css code
@PavanKumar7799k11 ай бұрын
@@opeafolabi yes i got it thank you for your instance response. Your video is really underrated It's a really nice video with proper guidance. I recommend this channel to my colleagues
@yanni4834 Жыл бұрын
hey how would i make the Add Task Button go under the text bar but still above the line of the shadowed box?
@opeafolabi Жыл бұрын
Try giving the button a display of block
@universe777910 ай бұрын
How do i get my vs code to auto suggest and import automatically the components like when he typed "TodoWrapper" it auto suggested it (didnt show for me) and then he chose it and the import { TodoWrapper } from './compnents/TodoWrapper'; appeared at the top?
@damilola_omotoyinbo10 ай бұрын
I went to read about it. You should download the ES7+ React/Redux/React-Native snippets extension.
@russellandrady9 ай бұрын
Alright. Thanks mate. I used typescript instead js. So I had to create interfaces in each component in order to call the functions. If you know typescript, can you say is that a good way to do? And actually I didn't want to use editTodo function which you created in TodoWrapper. And it works.
@opeafolabi9 ай бұрын
Typescript is standard in the industry now, I chose not to include it for this tutorial because its aimed mostly at beginners.
@honeyvara6821 Жыл бұрын
Hii sir, Your tutorial was simply superb and please make more videos on react course
@opeafolabi Жыл бұрын
Hey bro thanks, I'm gonna release a video this week.
@gretaalfon6010 Жыл бұрын
very good explanation sir, thank you!
@opeafolabi Жыл бұрын
No worries!
@sujaypagam1149 Жыл бұрын
Hey bro , I am from India and love your content nicely explain keep it up 👍👍
@opeafolabi Жыл бұрын
Thanks bro! Glad it was helpful! 🙏
@muhendis_ Жыл бұрын
hi, I have a question. I'm wondering that how to use 'todo-input' or 'todo-btn' in className? I couldn't any doc for fontawesome. How did you do this appearance? I mean input and button are side by side
@opeafolabi Жыл бұрын
todo-input and todo-btn are just custom class names so that I can style them. Inputs and button are inline-block by default which means they don't start on a new line and can stand side by side.
@NaveedAhmed-m4l2 ай бұрын
i am unable to add todowrapper class functions
@omotoshoolayiwola8963 Жыл бұрын
Clear and Concise.Thank you
@opeafolabi Жыл бұрын
No worries! Glad it helped:)
@sepehrdera3064 Жыл бұрын
Man what can i do for the css things that you'd pastade there? Where can i find the codes?
@opeafolabi Жыл бұрын
The github link in the description
@abiygirma19259 ай бұрын
Can you break down the customizations and theme you use for vscode? i've been trying to get a good one for ages.
@opeafolabi9 ай бұрын
the theme is ayu dark theme, if you don't have emmet also, you can download this extension: ES7+ React/Redux/React-Native
@crespinnougbodohoue7324 Жыл бұрын
Thanks a lot Ope. I learned a lot.
@opeafolabi Жыл бұрын
Glad to hear that! Thanks for watching.
@hadiamazhar6204 Жыл бұрын
can you explain what have you done at 4:56/31:12?
@opeafolabi Жыл бұрын
4:56, I was just pasting the css cose
@iamksmith Жыл бұрын
Awesome video man. Some parts were a little bit quick but for the most part I could follow along. One of my functions didn't work and I couldn't figure out for the life of me how to correct the issue. I ended up going watching a more cohesive tutorial. That said, that's my issue, not yours! Subscribed!
@anazodovanessa5323 Жыл бұрын
Nice work. Well explained.
@sergekamga4512 Жыл бұрын
Updating todo was not clear. Where does the property "isEditing" come from? A todo object has isCompleted but not isEditing.
@opeafolabi Жыл бұрын
The property isEditing allows us to know if the current todo is being edited. So if isediting is true.
@mrunalichoudhary9839 Жыл бұрын
Wonderful doubt , But there is problem in this code when i refresh the to do list in my browser the changes that I made(for example added the list of tasks) does not remain same, it vanishes with the reload of page. Can you please help me with this?
@opeafolabi Жыл бұрын
To save the todos you either need to have a database where they are stored or you need to use localstorage. In the github link in the description, I have attached a file called todolistwrapperlocalstorage with localstorage functionality.
@anastasia_yseeva_17 Жыл бұрын
Thank you very much. It was interesting and helpful.
@opeafolabi Жыл бұрын
Glad you enjoyed it! Thanks for watching.
@aydynbai7 ай бұрын
3:27 "rafc". "Code" -> "Preferences" -> "Configure User Snippets" -> "New Global Snippets File" - : { "React Component with Filename": { "prefix": "rafc", "body": [ "import React from 'react';", "", "export const ${TM_FILENAME_BASE} = () => {", " return (", " ${TM_FILENAME_BASE}", " );", "};" ], "description": "Creates a React component with the filename as the component name" } }
@DJMonsterXify Жыл бұрын
amazing video, thanks a lot!
@opeafolabi Жыл бұрын
Glad it helped!
@NOTHING-en2ue Жыл бұрын
Amazing Tutorial thanks a lot 🙏
@opeafolabi Жыл бұрын
Appreciate it thanks 👍
@gourmetpro6784 Жыл бұрын
you didnt explain how you put a delete mark on the text when clicking on the text tho
@opeafolabi Жыл бұрын
I'm not sure what you mean, can you explain a bit more?
@kingosterval Жыл бұрын
I can't get to the blank white page on the react app, when I delete the logo.svg I still get error messages on the react app. Not sure if i'm missing plugins or just doing something wrong.
@opeafolabi Жыл бұрын
what is the error message?
@kingosterval Жыл бұрын
module logo.svg missing, module index.css missing
@opeafolabi Жыл бұрын
@@kingosterval it might be because they are still being imported in App.js. check the top of the App.js file.
@Peywan Жыл бұрын
can you add a json backend part to this so we can get back deleted notes ?
@opeafolabi Жыл бұрын
I plan to rebuild this in a future video using nodejs and mongodb 🙏
@Peywan Жыл бұрын
@@opeafolabi sounds great bro, looking forward to see that one as well, this one was great 😁
@opeafolabi Жыл бұрын
@@Peywan thanks bro, appreciate it fr 💯
@sknEK_code_chef11 ай бұрын
super good video! would like it even better if I could see what you were typing all of the time. the autocomplete and vscode extension stuff was pretty distracting
@qwesicodes6 ай бұрын
Thanks man! 👍 👍
@karolinamaka89299 ай бұрын
Very nice!
@Sleek__Solutions11 ай бұрын
How do I then deploy this using Netlify?
@mohammad_saud_humayun11 ай бұрын
I am making this using react+vite , in my case it's not functioning i.e I am unable to add the task to my todo list using user input. What should I do, Pls help me clearing my doubt
@opeafolabi11 ай бұрын
Using video shouldn't make a difference. Post your code for me to look at.
@futu6530 Жыл бұрын
13:30 addTodo is not a function TypeError: addTodo is not a function - I follow your instruction, and the code is exactly same. Please teach me how to fix, i had asked chatGPT but couldn't address the issue
@opeafolabi Жыл бұрын
Can you post the todowrapper component code. Maybe you need to create the add Todo function and set the add todo prop to the add todo function.
i am having the same issue too, have you fixed it?
@worlayramvasmark79183 ай бұрын
To be honest I had a hard time understanding your code but all round it was very good.
@opeafolabi3 ай бұрын
Yh react can be difficult to understand. Or maybe it was me lol
@egornikolaev3038 Жыл бұрын
Bro, awesome tutorial! Tell me please what color theme do you use for vscode?
@opeafolabi Жыл бұрын
I use a theme called ayu 👌
@subindask8364 Жыл бұрын
From where did you copied some links ?(video time: 15:24)
@opeafolabi Жыл бұрын
github link in description
@JessePancho5 ай бұрын
where did you copy the v4 as uuidv4 from?
@opeafolabi5 ай бұрын
@@JessePancho it's in the docs
@sodiqjonsharipovАй бұрын
why is the background pink not black?
@herusarmstrong89305 ай бұрын
What theme do you use?
@opeafolabi5 ай бұрын
ayu dark
@senibodon-pedro932711 ай бұрын
Hell, thank you for this. There is still something that confuses me, if a function was defined previously, on the onclick functions, why are they still called in an arrow function? can you just do onClick={handleClick} rather than onClick{()=>handleClick()} ? Anyone who can explain why that is would be very helpful, thank you
@opeafolabi11 ай бұрын
If you are calling a function as a prop, you have to use the arrow functions to invoke that function. In other situations however, they can be used interchangeably.
@senibodon-pedro932711 ай бұрын
@@opeafolabi thanks for clearing that up🙏🏾
@ramitchaurasia0178 Жыл бұрын
why we have used the task={todo} in edit todo form in editToDo form in todowrapper
@opeafolabi Жыл бұрын
We use it to be able to get the task name and the task id. In EditTodoForm, We are using the task name in usestate and using the task id so that we can edit the todo.
@snowphoenix25506 ай бұрын
ERROR in ./src/Components/Todo.js 5:0-66 Module not found: Error: Can't resolve '@fortawesome/free-solid-svg-icons' in 'C:\Users\BEST SOLUTION\Documents\FSWD\projects\Todo list\toddo\src\Components
@opeafolabi6 ай бұрын
Have you installed it. If you have it could be that it's not being imported correctly
@Mahmoud_176 Жыл бұрын
I have done everything u did in the tutorial and everything works well except the "Edit Todo" part, when I click the the update task button, it doesn't update the todo
@opeafolabi Жыл бұрын
Hit me up on Instagram with screenshot of EditTodoForm👍
@DaniyalMutahhar5 ай бұрын
You did explained it well but for newbies, they want to make the ui of their starting apps to be cool, so it would have been great if you had provided the css also :) Just an opinion
@opeafolabi5 ай бұрын
The code is the github repo but if you meant code it from scratch then you are right, it would have been better. Glad you liked the video🙏
@jaim5048 Жыл бұрын
la forma como se crea el id se incrementa ?
@ceylontechbro640 Жыл бұрын
Good video!
@opeafolabi Жыл бұрын
Thanks!
@kamyarkamali7685 Жыл бұрын
very good bro
@opeafolabi Жыл бұрын
Thanks man 🙏
@kihalbilel3851 Жыл бұрын
Thank you so much bro
@opeafolabi Жыл бұрын
No worries bro 👍
@ismailbakhach8990 Жыл бұрын
for what we use uuidv4 ?
@opeafolabi Жыл бұрын
to create unique ids
@ismailbakhach8990 Жыл бұрын
@@opeafolabi so its a npm packages ?
@Iltar10 ай бұрын
can you share the link to find the components please?
@opeafolabi10 ай бұрын
it's in the description :)
@basAisehiShrey Жыл бұрын
I get error when I pass task as prop it shows "Cannot read properties of undefined (reading 'task')" Please help
@opeafolabi Жыл бұрын
This happens when trying to access a property of an object that is undefined.
@basAisehiShrey Жыл бұрын
@@opeafolabi Thanks man, it worked.
@kunalpassan33815 ай бұрын
my addTodo function is not working, any suggestions?