Build this React To-Do List app in 20 minutes! ☝

Рет қаралды 78,529

Күн бұрын

Пікірлер: 56

@BroCodez Жыл бұрын

I apologize if my voice sounds strained. I had to record this video 3 separate times because it wouldn't turn out right. My voice REALLY hurts 😂 import ToDoList from './ToDoList.jsx'; function App() { return () } export default App import React, { useState } from 'react' function ToDoList(){ const [tasks, setTasks] = useState([]); const [newTask, setNewTask] = useState(""); function handleInputChange(event){ setNewTask(event.target.value); } function addTask(){ if(newTask.trim() !== ""){ setTasks(t => [...t, newTask]); setNewTask(""); } } function deleteTask(index){ const updatedTasks = tasks.filter((_, i) => i !== index); setTasks(updatedTasks); } function moveTaskUp(index){ if(index > 0){ const updatedTasks = [...tasks]; [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]]; setTasks(updatedTasks); } } function moveTaskDown(index){ if(index < tasks.length - 1){ const updatedTasks = [...tasks]; [updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index + 1], updatedTasks[index]]; setTasks(updatedTasks); } } return( To-Do-List Add {tasks.map((task, index) => {task} deleteTask(index)}> Delete moveTaskUp(index)}> ☝ moveTaskDown(index)}> 👇 )} ); } export default ToDoList body{ background-color: hsl(0, 0%, 10%); } .to-do-list{ font-family: Arial, sans-serif; text-align: center; margin-top: 100px; } h1{ font-size: 4rem; color: white; } button{ font-size: 1.7rem; font-weight: bold; padding: 10px 20px; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.5s ease; } .add-button{ background-color: hsl(125, 47%, 54%); } .add-button:hover{ background-color: hsl(125, 47%, 44%); } .delete-button{ background-color: hsl(10, 90%, 50%); } .delete-button:hover{ background-color: hsl(10, 90%, 40%); } .move-button{ background-color: hsl(207, 90%, 64%); } .move-button:hover{ background-color: hsl(207, 90%, 54%); } input[type="text"]{ font-size: 1.6rem; padding: 10px; border: 2px solid hsla(0, 0%, 80%, 0.5); border-radius: 5px; color: hsla(0, 0%, 0%, 0.5); } ol{ padding: 0; } li{ font-size: 2rem; font-weight: bold; padding: 15px; background-color: hsl(0, 0%, 97%); margin-bottom: 10px; border: 3px solid hsla(0, 0%, 85%, 0.75); border-radius: 5px; display: flex; align-items: center; } .text{ flex: 1; } .delete-button, .move-button{ padding: 8px 12px; font-size: 1.4rem; margin-left: 10px; }

@dev.java_0 Жыл бұрын

yeah its okay

@YS-cc1nk Жыл бұрын

I bet you got it twisted!!

@ISpeakOnly Жыл бұрын

When are you going to post the full course of React JS? I am waiting for it!

@xzex2609 Жыл бұрын

your voice is great , your voice is what we love and don't be hard on your self

@s-qc9ns 8 ай бұрын

use ai to clear your voice in the video.

@valerylouis6747 Жыл бұрын

One of the best tutorials on how to do a todolist in react.

@michaelschroeder3091 Жыл бұрын

I just watched your entire react course this far and it have been a life saver thank you! You taught me Java, C, HTML, CSS, JS and Python, literally helped carry me through my degree.

@abrahamsimonramirez2933 Жыл бұрын

Petition for a Svelte course, I am starting to watch a 20 hour long one, since svelte is less troublesome than react it could be possible to have a comprehensive course in maybe 5-8 hours plus I like your style. I will anyways check documentation when I get some time to spare. No pressure though just an idea you'll perhaps like, ❤

@hasnainmalik8982 Жыл бұрын

Please never stop making this kind of useful video...❤

@greengoatsh1t888 Жыл бұрын

Hoping that you will upload more videos in react js. I've been watching your videos from HTML,CSS,JS and this react js tutorial your videos are very understandable. I hope this coming 2024 I will be a frontend developer as a stepping stones into full stack developer.

@CarCinCal Жыл бұрын

THIS! 👏🏽 TUTORIAL! 👏🏽 IS! 👏🏽 THE DOPEST! 👏🏽 INTRO! 👏🏽 TUTORIAL! 👏🏽 TO! 👏🏽 REACT! 👏🏽 PERIOD! 👏🏽

@shaikshahed413 6 ай бұрын

The best todo list app teaching on youtube by React

@kolya_SAKHA Жыл бұрын

Thank you so much for these useful videos, your voice is calm and your videos are so understandable 🙏

@x..darkfate..x 8 ай бұрын

Quick and clean but it take time to understand the logic how the up and down function work

@learnwithraj23 21 күн бұрын

Please make a complete ecommerce project in react your teaching style is just awesome...

@al-cadaalachannel3194 Жыл бұрын

Thanks dear tutor. Useful video

@thierrynoemy8344 2 ай бұрын

Thank you for sharing !!👌🙏🙏

@rohannaidu6277 7 ай бұрын

I just logged in to KZbin to tell you thank you for this.

@danielo_tunes1922 7 ай бұрын

Thanks bro, very helful for my first react app

@syedmajid3202 3 ай бұрын

Thanks for video!👍

@miltonkumirai Ай бұрын

Well explained 🤝

@deeplife9654 Жыл бұрын

Hey bro. So happy to see you back in making video on but please make video for Springboot too

@mediasmithsllc3052 4 ай бұрын

Awesome video. One of the easier ones to follow that made sense and was short and to the point. How would you include an option to edit an item on the list? (Thanks again and keep up the great work)

@Spacetime23 Ай бұрын

thank you soo much !!

@AdanJelle-wt4zu 6 ай бұрын

thank you so much greate man

@otabekmadaminov-z2i 3 ай бұрын

Thank you bro

@mr.RAND5584 5 ай бұрын

Nice👍

@nickinspire1 Жыл бұрын

Thanks bro, can you make a flutter tutorial please? I hope you see this comment

@aninh7456 Жыл бұрын

can you make a video guide about vuejs, nodejs? We are looking forward to it!!!

@OCEMTechZone 22 күн бұрын

Great

@kathikr9360 9 ай бұрын

thank you

@andromilk2634 11 ай бұрын

When an element ends up moving up or down by using the function, we update our new array. Does this mean we also recreate the mapping with the new positioned elements by reinserting them into the unordered list? (Because we also need to take into account that the element which have changed position have take new indexes, so we have to readjust their id, index given to the callback functions, etc.) ?

@NoobExploits Жыл бұрын

You should create lua guides

@McDonuts1675 Жыл бұрын

Hello i’m new. What is he using for a platform to write the code and run it? I use apps on my Mac, like Hello Web and know about note pad. curious as to what else i can use.

@miikkarautio 10 ай бұрын

Visual studio code

@ireqkub 3 ай бұрын

21:12 I wrote according to the video and it said that error. I attempted to find the cause of error. I read it and I don't understand it. But just putting a single semi-colon (;) end of the line, The error is gone :>

@Zomoroda89 6 ай бұрын

this line keeps giving me this error ! [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]]; the error : Cannot access 'updatedTasks' before initialization

@eduardokawaguchi3086 4 ай бұрын

i had some problems there too. all i had to do is put a semicolon at the end of the variable above. like this: const updatedTasks = [...tasks];

@andromilk2634 10 ай бұрын

By the way, I just tested the code and it seems that I'm still able to enter input even though I removed the " value={newTask}" line?

@Zomoroda89 6 ай бұрын

yes but if you leave it and not set it you won't be able to, this code allows us to get the input value when the button is clicked using useState hook without the need to access the DOM

@loke3969 8 ай бұрын

Hello Bro, can you make a video on the redux toolkit.

@Vc-1111 Ай бұрын

The whole CSS section, which is about 1/3th of the video, could just be npm i bootstrap, and adding the classes. I don't get why people do CSS themself these days.