How to create Todo App in React.js

How to create Todo App in React.js

  • English
  • Programming
  • React.jsReact.js
  • (872)
  • Project length: 6h 10m

This tutorial will cover basics of developing a React.js application while creating Todo application. It will include all the details involved during React.js app creation, including tools like Babel, Webpack, libraries like Immutable.js and others.

Overview

Project Introduction:

This tutorial will cover basics of developing a React.js application while creating Todo application. It will include all the details involved during React.js app creation, including tools like Babel, Webpack, libraries like Immutable.js and others.

We will go through the process of creation of a simple Todo app, covering all the steps, starting from how to set up the tools, and finishing with a fully working application.

What are the requirements?

  • Basic JavaScript knowledge
  • HTML/CSS
  • Desire to learn

What is the target audience?

This tutorial will be useful for people who want to learn React.js basics.

When are the streaming sessions (streaming schedule)?

Weekly 2:00-3:00 PM PDT (9:00-10:00 PM UTC) Tuesday, and Thursday

Your feedback

I value my audience very much, and would love to hear your feedback. This would help me to make your watching experience better and make more useful content. Please share your thoughts and feedback using this Google Form

Thank you!

Project Outline

Session 1: Setting up the environment and initializing the project

  • Installing Node.js and npm
  • Initializing the project structure
  • Installing and configuring Webpack 2, Babel
  • Recap

Session 2: Understanding React.js principles

  • Create first full React.js component. AppContainer
  • Getting to know React.js states
  • Adding state to AppContainer
  • Recap

Session 3: React.js component lifecycles and Functional components

  • Getting to know React.js lifecycles
  • Intro to functional React.js components
  • Props and states. Developing Todo Input
  • Recap

Session 4: Mutability and how to avoid it

  • Array.reduce and ES6 spread to the rescue
  • Adding Immutable.js to the app
  • Recap

Session 5: CSS and CSS modules

  • Adding a completion checkbox
  • Adding CSS to Webpack configuration
  • Concept of CSS modules
  • Styling of the application
  • Recap

Session 6: BONUS session

  • Slight refactoring
  • Making our app look pretty
  • Create a production build
  • Summarize what we've learned during the tutorial

Reviews

Average rating

5(872 Reviews)
  • Avatar

    charlizelea

    2 months ago

    I enjoy watching professional videos like this. It is very well structured and ogranized, nice.

  • Avatar

    francescototti12341

    2 months ago

    Feels like this guy has some real teaching experience, I found it informing.

  • Avatar

    henryhue

    2 months ago

    One of the better videos on the site.