Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
React Project for Beginners: Building a Todo List App
Rating: 4.8 out of 5(7 ratings)
16 students

React Project for Beginners: Building a Todo List App

The perfect course for React beginners! Apply React concepts to a real-world project while building a todo list app!
Created byCode Complete
Last updated 6/2022
English
English [Auto],

What you'll learn

  • Create a React project from scratch
  • How React concepts are applied to a real-life project
  • Use functional components, useState, and props to create a todo list app
  • Design a React project and break it down into components, state, and props

Course content

3 sections • 12 lectures • 34m total length

  • Introduction0:44

    Lukasz guides beginners to build a simple react todo list app from scratch, covering HTML, CSS, and JavaScript, and showing how to enter, add, and complete tasks.

  • The course project0:40

    For the class project, you will be adding more features to our todo list application. Some ideas which you can try out:

    1. Instead of deleting completed tasks, just show them as done by crossing them out, greying them out, etc.

    2. Add a clear all button to delete all tasks

    3. Add a complete all button to mark all as completed

    And anything else that you can think of!

    If you do not have a finished copy of the project, you can fork it from CodeSandbox linked the Resources section.

  • Planning our components and states0:56

    Plan your React todo app by identifying components and states. Build a form with a text field and button, and a list of items with text and a right-side button.

  • Our development environment1:46

    Explore the development environment by setting up a React project in Code Sandbox IO, log in, create a new sandbox, and view live updates across files, code, and browser.

Requirements

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

Description

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. How to use CodeSandbox for faster development

  2. How to structure a React project

  3. How to create functional components

  4. How to add state using useState

  5. How to use props and pass props across multiple levels

  6. How to reuse components and its benefits

  7. How to create 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!

This course is perfect if you want to get started with React or have watched a few tutorials and want to understand how to apply the concepts you've learnt into an actual project.

This course also includes a class project which you can complete once you are done with the course. This will help strengthen your concepts and you can share what you have made with the community!

Who this course is for:

  • Beginner React developers who want to apply React concepts to a real-life project

Report abuse