Build a Simple To-Do List with Next.js (React) and Material-UI

hello and welcome into another Hands-On video on this channel today we'll be talking about react and especially nextjs which is built on top of react and we will use material UI which is a external packages for creating a user interface and we will try to create a very basic too List application the to list is a very common interview question so let's let's hop into the vs code and to the browser and see what we will be able to do [Music] today all right so we are in the browser and let's first look for react let's visit the react page and let's click on learn and install so react is a JavaScript framework for building front ends of the applications and if we will go here usually like 2 years ago there was a create react App application right now even react considers to use something else like nextjs remix or many more those are the Frameworks that are being built on top of react with some extensions and more options so let's firstly click here and we'll get to vs code I created a very basic react folder and let's click dot we'll be asked some questions like project name so let's call it to the list and some questions which I will explain very briefly do you like to use typescript today we will not be using typescript because this is a very vast topic for another video Let's create no let's eslint do we would like to use eslint we won't be using sink today that's another topic this will be a thing that will statedly check out your code so if the all the declared variables are being used or the Imports are proper and so on and so on let's click no here Tailwind CSS Tailwind CS s is another package that it's being used for styling the applications we'll be using material today so we will skip tailwind and do we would like to use Source directory we can use Source directory this will be the place where the code is being stored like a source code and it's being complied to the uh distribution itself so let's do yes and do we want to use outer we will click yes but on the routing we will talk a little bit more in the future but routing itself very briefly it's something that in the single page applications that the browser browser URL is changing but actually without the whole reload so the page view is being changed in an app not on the like another slash route something in the browser so let's do yes and do we would like to customize the default import let's just skip it for now it's just a matter of how you will be importing your files to the application and right now there will be some node installations being done and some basic setup so I will click this to the folder and as you can see we have a very basic nodejs application here so we have our pcket Json we have our readme we have our note modules the public folder where you will store all the public assets like images PD PFS if you would like to attach them to the web page and this Source folder that we talked about so here we'll build the old sources so let's firstly go to rme and we will see here that npm runev we start our development server okay I'm not in to-do list folder and PM runev one more time it will start the local development server and compile the source to our usage so let's open another top and let's do Local Host 3000 it compiled the source code and as you can see we have a our very barebone application let's clean it up a little bit so that we'll be starting from scratch I will delete the C s s I will delete the modules and I will do some work around here so title let's call it our briefly doev Todo list and let's here remove this styling and we will keep this like that and let's go to page and here I will make it a little bit bigger here is the basic structure of the page but we will take everything out and we will start from scratch so just to know that it works we'll stick here just very basic hello with to-do all right let's go to the browser and as we can see we have our to-do header one here let's try to build it so we talked about material UI so let's do material UI it's a components Library there is also a paid version but a lot of components are for free and if you would get a little bit acquainted with that you will see that there are are many of those elements and styling across the internet so let's go to installation it's an npm package that we need to install we'll install it and in the meantime I will show you some components so you can scroll through the many different groups like data display feedback inputs and so on we will be firstly taking a text field so the idea is that we will create a very simple text field in which we'll write a to-do description and then will be a button and when we will click a button this to-do from the input will add to a to-do list and then you will be able to add another to-do another to-do another to-do and you will be able to browse through this list and delete the to do from the list so let's get back to the application and we will start writing some code so text field basic text field let's expand here and see what we need so we need to import box box is something like a div and text field let's put it at the top and then let's take import of a very basic text field here so we will start to build our page and we will take box and in box we'll give this text field and let's restart after in ining our development server see where we are right now let's reload the page and let's see how it will look like right now the first compiling always takes sometimes because the sources are being prepared the packages are being prepared but later we are taking only the difference so we have our basic form in which we can write some stuff all right let's get back to vs code and try to make it a little bit nicer first of all I will change this import to the one line so that we will be able to import more of the components and then let's add another one so we will add a our button and here we will add a very basic button called add too and let's click save and it will reload and we will see our button let's do a little bit of styling to that so that you can know what we are dealing with so we will take variant to contain and let's refresh it looks like this then let's try to make it one here and one here so I will use the grid component which is very useful for creating also uh applications that will work well on many different screen sizes because we know in different we have tablets we have phones we have desktops so let's wrap it in a grid container with spacing this will be a amount of space between the grid elements and then let's create a grid item with X X from the lowest screen size to six we are doing each grid like horizontally has 12 has 12 of those points which we can use so this will wrap it this will wrap the input into half of the screen as you can see to do is starting from the second part of the screen let's do it one more time for the button and right now let's add to see it more fully let's do add fully full width here and full WID here all of this stuff is a part of material UI the M mentation full width not in Grid but in button itself looks like this and another thing that I will show you from the from the styling perspective is that H material UI element has something called SX and it's something like styling you can pass here very basic CSS stuff so like height 100% And we will see it like here all right this is the first element now we need to talk about react hooks the concept of hooks and one hook in particular that we will use will be use State use state is a hook that you can use to store State itself so State we can call it as a variable so that react knows that something happens something change and it it can refresh refesh some parts of the page without the hold reload so let's explain it a little bit but I will firstly add use client here client so the thing about nextjs is something that we can have client side rendering or server side rendering when we render the things on server which was not available in previous versions of react that's why nextjs was building those those stuff and those extensions and the new ideas is that if you requesting some kind of a website or view it was being compiled on the server and sent as a view strictly to the browser itself but in use client and use State all of those operation happen on the browser level and the client computer level this is something that will be going very deeply in the future in a different videos so we will declare our state which will be a todos and set to do and let me just write it and I will explain it a little bit so used to do is a function that gives us back an array of two elements the first element is to do itself so we can call it as a variable so this is actually a to this variable the same as you would declare it like this with a very basic initialization value of an empty array set to do on the other hand is a function which is being used to update the state so we shouldn't ever do something like this or push to this array like this we should always use this set too function to update that state so that react can take control of this updating and refreshing all right let's get back to our function right now we'll create another state which will hold the input itself so we will do the same thing but with a blank string and we will connect it to this text field so here we will write that the value shown is to do and we will use something called on change so on change will be launched every time something changes in the input and we will assign here a function that will will update this set to do this is something not react react but HTML stuff that we have this value in the input that we can use and pass to do so let's just see that still everything works all right let's get back to the button what we would like to do when the button will be clicked so first of all we would like to add this new to-do to the to-do stable and then we would need to would like to clear this to-do so that we would be able to enter a new one so let's create a function like handle add and it will do two things it will take the it will set the to do but we will use something called prev here there is a when the use state is being launched it's not being launched synchronously so like this update doesn't happen like instantly at the snap of the figures because react is trying to do some optimizations and let's say update in a patches or something so when we are using set in use State we usually use this something that the first argument is a previous value so that we always update from the previous one and that makes a lot of sense here and we will create a set to-dos with a new array spread the all the previous to-dos and add a new one and the second thing we want to do is to set too with a blank string let's see how it will work test all right let think that we oh we didn't attach it to a button all right so we are on the button and now on the button we will do on click and we will P here handle at handle all right and now when we will click this button the handle out function will run and it will add the new to-do from the input to the to-dos array and clear the to-do field let's see if it will work test add to-do all right let's maybe reload the application sometimes with changing a lot of stuff this use client adding State and so on some stuff may not work it's a very general solution that if something isn't updated the way it should you should try to relaunch the the launch the server so let's load the page one more time all right and it's loaded let's click let's write test here and click add to do it disappeared so it should work let's now try to show those toos on the screen so here I would add another grid item with xs12 so that would count for the whole page and we will do a very basic very basic map maybe let's wrap it in UL as co-pilot suggest and we will do todos map we will take each individual to-do and its index and we write it in Li and as you can see already this test one popped here let's do test to test something other yeah it works because react when we update this state knows that this state was updated and it knows that it needs to refresh the components which are using this to do this key value also is something very react native it allows for react and the Frameworks B on react to know which element has changed in the Dome of the page so this key when you whenever you are doing a map this key is important and it's required usually it's some kind of an index or even some some kind of a text that you can have here like like todos Todo UL slash and add index to that it's just a matter of creating a a new thing here so like this templates thing to those and pushing index here just to know because in other example if we would be using only indexes and this page would have a lot of elements then those indexes would overlap and you could run into trouble that you are changing wanting and for some reasons many other things are changing because in fact the elements had the same ID so react didn't know exactly what element needs to change so that's something you need to keep in mind of okay so we have that and it's working let's add one more thing let's add let let's add a button for clearing that up so delete let's see it should add us a delete button somewhere here or maybe no the LI with the button doesn't need to go very well let's reload the page and one more thing in every reload the state clears because it's just a temporary JavaScript variable usually we would store it in some kind of a file or mostly database let's add test and we have delete button here test to delete button all right let's work out the delete so we will create a handle delete function which will grab the index of the clicked button and delete that particular element from the array so let's add const handle Dale we will take an index as an argument to this function and it already shows us one of the possible solutions to this issue so we will set to do take the previous value of the whole array and make a filter on that and go to the index and if the index doesn't match it will remove this element so this is the this is strictly JavaScript it's nothing react related so let's do that and let's to this button we already know what we need to do so onclick handle if you want to pass this index we need to do it in this way so handle Dell index and right now every the of this button we have the separate index because this is being rendered with a separate indexes using this map function so let's click delete on this one let's click delete on this one and as you can see we are we are good so let's do test one test two test three and delete something in the middle and hey it works so we created our very basic application using react specifically nextjs material UI as a UI design interface and a lot of JavaScript one thing that we can change here would be this label so add to do and as you can see it will update here that's just a very basic Final Touch to this one so I hope you had fun today I know it's a lot but for sure we'll get deeper into a lot of of those Concepts so keep working and see you next time

Channel: DEVelopment Briefly

Views: 268

Keywords:

Id: ovV6W7l_BAI

Length: 23min 55sec (1435 seconds)

Published: Fri Jun 28 2024