React Project for Beginners: Building a Todo List App | Laksh Dwivedee | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

React Project for Beginners: Building a Todo List App

teacher avatar Laksh Dwivedee, Software Engineer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      0:44

    • 2.

      The Project

      0:45

    • 3.

      Planning our components and states

      0:56

    • 4.

      Our development environment

      1:46

    • 5.

      Setting up and file structure

      3:07

    • 6.

      Our first component - The Form

      6:33

    • 7.

      Adding state to our form

      3:00

    • 8.

      Adding state to our app and using props

      3:08

    • 9.

      List UI using reusable components

      8:21

    • 10.

      Mapping state to components

      2:12

    • 11.

      Adding the delete task feature

      2:57

    • 12.

      Conclusion

      0:41

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

178

Students

2

Projects

About This Class

This is the perfect course for beginners to React! Learn how to apply React concepts to a real-world project while building a todo list application.

This course will guide you on how to start a React project from scratch. We will cover everything from planning and designing the project to coding it out using HTML, CSS, and React from scratch.

While making our todo list, we will cover the following topics:

  1. CodeSandbox
  2. Structuring a React project
  3. Functional components
  4. State using useState
  5. Props and passing props across multiple levels
  6. Reusing components
  7. Nested components

After taking this course, you will have a good understanding of how to create a React project from scratch and how different React concepts can be applied in real-life projects. By the end you’ll also have a todo list application which you can show off to your friends!

HTML, CSS, and JS is a prerequisite for this course. Knowledge about the basics of React is preferred but don’t worry, we’ll revise everything.

Meet Your Teacher

Teacher Profile Image

Laksh Dwivedee

Software Engineer

Teacher

Hi! I'm Laksh. I'm a software engineer with 4 years of experience in full-stack development in technologies such as React, Node.js, Python, and many more.

I did my bachelor's degree in Computer Engineering at NTU, Singapore where I had the opportunity to work on many full-stack projects through my internships and programs such as GSoC.

I love to code and have been coding for almost the past 10 years. I decided to make lessons to pass on the knowledge that I'm grateful to have gained in my coding journey.

See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hi, I'm lunch and I'm a Software Engineer with for years of experience with React. In this course, we'll be building a simple React application which allows you to enter a task added to your list. And then once you're done, you can complete it by clicking the button over here will be going through the HTML, CSS, and JavaScript of the code from scratch. So it's the perfect project if you just learn, react and you want to get your feet wet with a real life project. Knowledge of HTML, CSS, and JavaScript is required and a basic knowledge of reactants preferred. But don't worry, we'll be reviewing everything. By the end of this, you will have built your first React project and you will have learned how to apply react concepts to real life projects without any further ado. Let's get started. 2. The Project: In this course, you will be learning how to build a to-do list application. By the end of it, you should have a working application in which you can add items and you can delete them by pressing the button over here. Now your project will be to build upon this by adding more features. Some examples of features could be a button which clears all of the items. Maybe instead of removing the item month it's done, you can show it as grayed-out across doubt. This will teach you how to create a component on your own, how to pass props to weld, and how to manipulate the state. To get started, try to think about the components that you need and the state that they'll manipulate. Once you're done, make sure to post a video or a link to your project down in the projects and resources section below. I'd love to see what you've made. 3. Planning our components and states: Before you start any new React project, you should plan out how you will be making it. And when you plan, think about two things, the components and the states that you will need. Here we have two components which are the form and the text field. Inside the form, we have two elements, which is the text field and the button on the right-hand side. On the other hand, the to-do lists can have many subcomponents, which are the list items. And each list item has text and a button on the right-hand side. We will be needing to different states. The first stage will keep track of the texts that's entered inside the text field by the user. Secondly, we will have a list which will keep track of all of the items we have already added to our to-do list. In summary, before we start our project, we plan on what it will look like based on the components and the states that it will have. The next lesson, we'll take a look at the development environment that we'll be using. 4. Our development environment: In this lesson, we'll be taking a look at the tools we'll be using to create our project. We'll be making a project on a website called code sandbox.io. This is a free website which lets you create React projects remotely without requiring to install anything on your local machine. If you're just getting started out with React, this is the perfect platform for you to get started. You can login either by your GitHub account or Google account. You can click on either one of those to get started. Once you're logged in, you will see a page similar to this. Now what you have to do is you have to go to this button which says new sandbox and click on it. What this will allow you to do is to create a new project. You can see that we can create projects from multiple frameworks like Vue, Angular and React. But since this is a DIY project, we'll go over here and then click on React to get started. Once your project is set up, you will see a page similar to this. On the left-hand side, you can see the files in your project, any dependencies that you use, and any external resources that we're using, such as fonts. In the middle you can see the code that you're writing and any files that you have open. And on the right-hand side you can see what your React project looks like in the browser. Now the great thing about code sandbox is that any change that you make to your code appears almost immediately on the browser, on the right-hand side. Let's change the text over here from hello code sandbox to hello world. When we save that, you'll see on the right-hand side that it updates almost automatically. In this lesson, we learned how to setup code sandbox dot IO for our project. In the next lesson, we'll be taking a look at the different files will be using and how to structure a project. 5. Setting up and file structure: Welcome back. In this lesson, we'll be taking a look at the file and folder structure of our project. And we'll also be adding some basic styling to our project. If you take a look at the left-hand side, we have mainly five files. So firstly, we have packaged or JSON. This file contains the configuration for your projects such as any dependencies that you have and any scripts that you have. Then we have indexed on HTML. This is the first five that's rendered when somebody visits your website. It doesn't really have a lot of content inside it. But that's mainly because all of the content of your website will be injected into it by index.js. Index.js is basically a JavaScript file which takes all of the React code which you have inside your app component and injects it into index.html. All of the React components that you make by reside inside app.js, any companies that you make will be put inside this development which has the class name of App. It will be sent to index.js, which will inject it into the index.html file. Lastly, we have styles.css. This is a style sheet which apply styles to our app component and therefore the entire project. When you're starting with a new React project, you should always go into the source folder and create a folder inside it, IT components. Now whenever you make a new component, you can add the JavaScript and CSS files for that component inside this folder. To get started, we'll create the files for our first component which will be working on, which will be the formed component. What you have to do is you have to click on this icon over here and you have to write down formed or JS. You can create the corresponding style sheet by creating a new file and naming it form dot CSS. We won't be coding it out right now, but this is the basic structure you should follow when creating any new component. Lastly, we'll be going into styles.css and adding some basic styling for our project, which is a good practice when you're starting out with a new project. So what we'll do is firstly, we'll give it a background color of slightly gray. What we can do is say background dash color and set the value to hash F4, F6, FDI. Now you can see on the right-hand side that our app doesn't cover the entire width and height of the page. What we can do is we can say that the width of our app should be equal to 100% of the viewport width. And the height of our app should be equal to a 100% of the viewport height. Lastly, we can see that the contents of an application start directly from the top and we want to leave some space on the top. What we can do is we can add some padding to the top of our application and give it a value of two REM. And once we save it, we can see that the contents of an application starts slightly below the top. In this lesson, we took a look at some of the files that are already present in our React project. We created the file and folder structure and we added some basic styling to our application. In the next lesson, we'll be starting with our first component, which is the form component. 6. Our first component - The Form: Welcome back. In this lesson, we'll be creating our first component, which is the form component, will be going over the HTML and the CSS for this component, and the logic will be added in the next lesson. So let's get started by going into form dot js. We will start by creating our functional component by writing export const form equal to B. Won't take any parameters as of now. And we'll create the functional component, then we have to return the HTML, in our case, will be returning a form. So we'll add the form tags over here. And then on the inside we'll be adding two inputs. Firstly, there'll be an input of type text. And secondly there will be an input of type submit. We'll go ahead and save that. Now we need to add this to our app.js so that we can see it will go into app.js and read the two header tags over here and add in our form component. Now we have to import it as well. So we'll go over your head and say Import form, which is the name of the component from then the path to where the form component is, dot slash components slash form. We'll go ahead and save that. And now we can see a text field and a button on the right-hand side. Now it doesn't look that great. So what we have to do is go back into form dot js and add some class names and some styling. What we'll do is we'll add some class names to our different elements. We will start by adding a class name of form to our form element. We will add a class name of TextField to our text field. Lastly, we'll add a class name of submit, dash and btn to our submit button over here. And then since we want the styles to apply to this component, will import the style sheet by going to the top and saying import dot slash form dot CSS. And we'll go ahead and save that. Now we have to define the styles. So we'll go into form dot CSS and get started on that. Firstly, we add the style to our entire form component. We'll say display flex. We want to justify the contents. To the center. We wanted to have a height of two REM. We wanted to have a width of 80% of the page and we'll give it a margin auto, centered it across the page. Then we'll add some styling to our text fields. So we'll say dot txt field. We'll give it a background color of slightly agree. So we'll say background-color hash will remove any borders that it has. We'll give it a slightly rounded border by saying border dash radius and giving it a value of 0.5 rem, we'll give it a height of 100% of its parent. We get rid of margin on the right-hand side of ten pixels, so it's not stuck to the button. We'll give it some padding of five pixels and ten pixels. So that when you're typing there's some space between the text and the border. Then we'll give it a font size of one rem. And we also give it a box-shadow, will make sure that the shadow is 0 pixels horizontally. Five pixels vertically has a ten pixel blur. And we'll give it an RGB value of 218 for red, green, and blue. And we'll also give it a box-sizing border-box so that when calculating the size, the pixels into border are also taken into consideration. Now our text field looks perfect, but once we focus on it, we don't want the outline to appear and we also want the shadow to change slightly. We'll get started on that by using the focus selector. So we'll say dot text field. When it's in focus. We will set it to have an outline of none. And we will set that as an important style. And we will also change the box-shadow slightly. So we'll say 0 pixels horizontally, three pixels vertically, a five pixel blur. And we will give it an RGB value of 218 for the red, green, and blue values. Now when you click on it, it looks a lot better. Finally, we'll get started on the submit button. So we'll say dot submit, btn. We'll give it a height of 100% of its parent. We give it a background color of slightly blue by saying background color and giving it a value of 1993 and do 55. Then we'll say that the forms should be white. And we will remove any borders that it has. We will give it a border radius of 0.5 rem. We will give it a font size of one rem so that the text is slightly larger. We will give it a box shadow of 0 pixels, five pixels, and ten pixels, and give it a color of B1 Ff. We will also add some padding of 01 rem. When we hover over the button, we want it to appear slightly different so that we can tell we are hovering over it. So we'll write dot, submit, dash, btn, and on hover will change the shadow slightly. So we'll say box shadow 0 pixels, three pixels, and five pixels, and give it a hash value of 789. Easier. Go ahead and save that. And lastly, inside formed or JS, we will change the text of the Submit button so that it says Add. And we'll go ahead and save that. There we have our form component. We learned how to create a new functional component. We learned how to add the HTML, and then we learned how to add the CSS. In the next lesson, we'll be working on adding the functionality using JavaScript. 7. Adding state to our form: Welcome back. In our previous lesson, we learned how to create a new functional component using HTML and CSS. Now if we go into the text field and write something, we see that it's shown on the screen. But the issue is that we do not have access to the value that the user has entered inside the text field. For it to be useful, we need to store it in some kind of variable which we can send to our other components. So to do this, we can use a React feature called state. The state is any variable which you keep track of, which influences how the component is rendered. What we can do is go to the top over here and import a function called US state from React. The US state function will let us create a new variable which will keep a track of the state of the text which the user has entered. To do this, we can go down here and say const, add some square brackets, and we'll name the variable text. And the function we can use to modify this variable will be called setText. Will say US state, so that it's a stateful variable and we'll give it a default value of empty. Now what we want to do is to connect this variable to the value that's entered by the user in the text field will go to the TextField HTML element. And we'll say that the value inside this should be equal to the text variable. Secondly, whenever the user changes the value inside the text field, we want to take in this event and set the text variable to the latest value. We'll do that using set text dot target dot value. And we'll go ahead and save that. Now if we go to the text field on the right-hand side and write down something. It's the same as it was when we started out. Now to see the value inside the text variable, Let's print it out. Once we press the Add button over here. To do that, we'll create a new function called const handle submit will take in the event of pressing the button as a parameter, and we'll say E dot prevent default. This should stop the page from refreshing whenever we press the button as it does right now. We'll go ahead into the form and say whenever the onsubmit function is called, call the handle submit method. Then we'll go inside the function and console.log the value inside the text variable and will also reset it to empty. So we'll say set text and we'll put an empty string over there. Now, if we go to the right-hand side and write down something and click on Add. You can see that the value has been printed to the console. So in this lesson, we learned how to convert a component which was uncontrolled and did not have stayed into a component that was controlled by us and they'd have state. The next lesson we'll be learning how to add state to our entire application and how to keep a track of all of our tasks. 8. Adding state to our app and using props: In this lesson, we'll be learning how to keep a track of all of our tasks using state. And we'll also be taking a look at how we can pass down functions as props so we can add our latest item to our to-do list using the phone component will begin by going back into app.js. What we want to do is keep track of all of our to-do list items. To do that we can use US state as we did before. We can go to the top over here and write down import. You state from React. We can go inside that app component and say const to do's and set to do's, which is our variable and are functioning to change that variable. And we can give it a value of an empty list. Now, we have our variable which has been declared. Now we need a function which when given an item, updates the list so that it contains the newest item, will create a new function called const add to do, which will add a new to-do to our existing list. The spirit taken a parameter which will be new todo, which will be just some texts. Then we'll create the arrow function. Then we'll say set to do's. Since we want to update the value of to-dos, we'll add some square brackets and then we'll say use the existing to-dos by using the spread operator, but also add the new todo that we are getting. Now this function should append the latest item to our to do list. Now what we want to do is run this function and pass in the new value whenever the Add button is pressed. And to do this, we'll need to pass this function as a prop to this component, which is the form component. Props allow us to pass variables and functions from a parent component to a child component. We can pass in a prop called Add to do, and we can set its value to the Add to do function which we just created. Now, we'll go inside the form component and we'll accept this prop and use it whenever the Add button is clicked. Let's go back to form dot js. Over here in the parameter, we'll add some curly braces and we'll accept the Add to do prop. Instead of doing a console.log over here. We'll delete that and instead we'll say Add to do. And we'll pass in the latest value inside the text variable, since this will contain whatever it takes we want to add to our to-do list. Now to see the latest value of our to-do list, what we'll do is we'll just console.log it out over here. And we'll go ahead and save that. Now we can go down here and open up the console. And we can see that it starts out with an empty list. Let's write down item one. And when we click on Add, we see that it's been added to our list. Let's add item two as well. We can see that item has been added. In this lesson, we learned how to keep a track of our entire to-do list. And we also learned how to pass in functions as props to child components. 9. List UI using reusable components: Welcome back. In the previous lesson, we learned how to keep a track of our entire to-do list. In this lesson, we'll be creating the to-do list and the list item Components. And we'd also be seeing how components can be reused, which is what makes them so great. We'll begin by removing this console.log over here. And then we'll create some JavaScript and CSS files. Let's make the files for the to-do list component. So we'll say to-do list dot js. We also want to make the stylesheet for that. So we'll go and say To Do list dot CSS. Then we want to make list item dot js. We want to make list item dot css. Inside list item dot js will create a functional component. So we'll say const list item is equal to, we won't take in any parameters as of now. And we'll just return a div for now. And we'll also export that. For the list item. We'll take an approach of the text which we want to show in the list item. And inside the div we'll add some paragraph tags to show the texts that we want. We also want the feature of being able to complete a task. So for that, we'll add a button over here. Now what we want to do is we want to go into the to-do list dot js component. Over here will be importing the list item component because we'll be rendering the list item through our to-do list component. We'll say import list item from dot slash list item dot js. Then we'll go ahead and create the component will say export, const to do list. We won't take any props as of now. We will just return a new div. And inside the div, we'll add a few list items. We'll create a new instance of a list item component. Closer down. Then for the text we'll just say item one will be connecting this to our state in the next lesson. But for now, we'll just be using some dummy values. We made one. Let's add a few more. So we'll say item two, item three. Now that we have the to-do list component, all we have to do is go into app.js imported and render it. So we'll say import to-do list from dot slash components slash to-do list. We'll go ahead and render it below our form. Once we save that, we can see that the entire list has been rendered. So we saw that we had it to do list component and we had multiple nested list item components inside of that, which we're rendering the list items. Now what we'll do is we'll add some styling to our components. Let's begin by adding some styling to our to do list. We'll start by importing our style sheets. So at the top we'll say import dot slash, to-do list note CSS. Save that. Go into to-do list dot CSS. For the class of to-do list will be adding the styles. Before that we need to add the class name to the development. We'll say div, class name is equal to two do dash list. Save that. And now let's add the styles. We want to display it as a column. So we'll say display flex and flexor direction will be column. We want to align the items to the center horizontally. So we'll say align items center. We also wanted to do list to be at the center of the page. So we'll say width of 60% and we'll give it a margin of one rem and auto horizontally. We'll save that. Now it doesn't look too different, but let's add some styling to our list item as well. So firstly, we'll import list item dot css. Then we'll add the class names. So we'll call this a list item. Will give the button a class name of checkbox. Now let's go ahead and add the styles for this inside list item dot CSS. To begin with, let's add the styles for the list item itself. We'll say list item. We want to display it as a row. So we'll begin by saying flex will set the flex direction to row. We want to align the items vertically, so we'll say align items center. We want to justify the content space between so that the text is on the left and the button is on the right. So we'll say justify content and set that to space between. Then we'll add a margin vertically so that all the cards on stock together. So we'll put that as five pixels vertically and 0 pixels horizontally. We'll add some padding to the horizontal edges. So we'd say 02 EM. We'll give it a width of 90% and a background color of white so that it's easily visible. We give it a rounded border. So we can say border dash radius. We'll give it a value of 0.5 of them. And lastly, we'll give it a shadow. So 0 pixels, five pixels, ten pixels. And we'll give it an RGB value of 10992 out. We will save that. Now once we hovered over the card, we want it to look slightly different. So we'll say dot list item and use the hover selector. We'll change the box-shadow slightly. We'll say box shadow. We'll say 0 pixels, three pixels, seven pixels, and give it an RGB value of 205 throughout. Then we will save that. Now if we hover over the items, we can see that they look slightly different. Now finally, let's give some styling to the checkbox as well. So we'll say dot checkbox, which is the button on the right-hand side. We'll give it a background color of white, will also give it a border. So we'll make it 3.5 pixels. It will be solid, and we want it to be blue. So we will say RGB 1993255 will remove any shadow it has. So we'll say box-shadow none. We'll give it a height of 20 pixels and a width of 20 pixels. Then we want it to be completely circular, so we'll say body radius and put that as a 100 per cent. Lastly, when we hover over it, we want the cursor to be a pointer. So we'll say dot checkbox on hover, turn the cursor into a pointer. There we go. We have our list items inside our to-do list, and they have the checkboxes and then as well. So in this lesson we learned about nested components and we saw how to reuse competence as we did with the list items. Now in this lesson we use dummy values, but in the next lesson we'll be taking a look at how to render the competence based on the actual data. 10. Mapping state to components: Welcome back everyone. In the previous lesson, we use dummy values to represent our to-do list. In this lesson, we'll be taking a look at how we can map our data to the list item components. To get started, we will go inside the to-do list component and we'll remove the dummy values we have over here. Now what we want to do is we want to render our to-dos variable, which we have in our app.js file. What we'll do is we'll pass on this variable to our to-do list component as a prop will save two dues and we'll assign the to-dos state variable to this. Now since we're passing it as a problem, we can go to the to-do list component and accepted by putting some curly braces and taking in the to-dos prop. Now we have to find a way of mapping this list of text into a list of components. Thankfully, ES6 has the perfect function for this, which is called the map function. If you want to use some JavaScript inside our HTML, will put some curly braces. What we say is take this to-dos list of texts and map it to a list of list item components. For each value inside, take the text value, which is the to-do, and the current index, which were then using an arrow function. We say, return me for each item, a list item component and the text should be the To-do, will give each list item a unique key, which will be the index, since that's just good characters. And we will go ahead and save that. Now you'll see that it's empty. But once we go ahead and add an item, we can see that it's added down here and we can keep going. So we can say item two, item three, and it keeps getting added to our list. In this lesson, we learned how we can map a list of variables to a list of components. This shows us the power of components and the reusability. And this is the reason why React is so popular and so powerful. In the next lesson, we'll be adding the Complete Task functionality, and we'll take a look at how to pass props along multiple levels. And a more complex use case of US state. 11. Adding the delete task feature: Welcome back everyone. Now we have the functionality of being able to add a new item to our list. In this lesson, we'll be adding the feature to mark an item has complete. What we'll be doing in this lesson is learning how to create a function which takes in an item's index and removes it from our list. To get started, we'll create a new function and we'll call it const, remove to do. And it will take in the index of the item which we want to remove and we'll make it into an arrow function. What do we need to do is to create a copy of our to-dos state. So what we'll do is say const to do is copy. And we'll use the spread operator to create a copy. So we'll just write dot, dot, dot to-dos. Then to remove the item will write to-dos copy dot splice, and then right down to do index comma one. Now we have a variable which contains the updated list without the item which we wanted to remove. Now we'll save this by saying set to-dos and passing in the to-dos copy. Now that we have a function which can remove an item from the list, we need to pass it down as a prop to the list item so that once the button is pressed, it can invoke this function and remove itself from the list. So we'll pass it in into our to-do list by saying remove two du is equal to the Remove to do function, which we just mean. Then we'll go inside the to-do list component. Will take in this prop over here. We will write down remove to do. Then since we already know the index based on the variable over here, we can pass in a function to the list item, which will be a modified version of the removed to do function. We'll pass down a prop called removed to do to the list item. And whenever the list item calls this prop, we will call the remove to do function which we got from app.js. We'll pass in the index of the current list item. We need to do now is we have to go inside the list item component. We need to take in the Remove to do function. We need to write down that whenever onclick is called over here, we should just invoke the remove to do prop. Because the to-do list component will take care of the index at which it has to be deleted. So now that we've saved that, if we click on the button, it deletes the item. Let's add a few more items that we can see that the correct one is being deleted. And if we try to delete item number three by clicking the button, it gets removed. In this lesson, we added the functionality to delete a task. We learned how to pass props through multiple levels. And we also saw a more complex use case of the US state function. 12. Conclusion: Congratulations, you just made an entire React project from scratch. It's no small feat. So pat yourself on the back. While working on this project, we learned how to create new competence. Us state, pass props to different components, reuse components, and render components based on state. Now it's not over yet. Do check out the projects and resources section down below and work on adding more features to our to-do list. Make sure to post your project in the project gallery. I'd love to check it out. If you've reached this far in the course, please consider leaving a review and giving me a follow on skillshare. That's all for now folks, best of luck with your react journey.