Building a TodoMVC Application in Vue, React and Angular
4.4 (66 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
11,873 students enrolled

Building a TodoMVC Application in Vue, React and Angular

One Course, One Course to Rule Them All
4.4 (66 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
11,873 students enrolled
Created by Daniel Stern
Last updated 11/2017
Current price: $16.99 Original price: $24.99 Discount: 32% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build an application in Angular@5.0.2
  • Build an application in React
  • Build an application in Vue
  • Differentiate between Vue, Angular and React apps
  • Scaffold Node applications for a variety of purposes
Course content
Expand all 15 lectures 02:25:50
+ Introduction
1 lecture 07:24

What This Course IS About

  • Code along for three different projects
  • Develop tangible results
  • High-learning, high-density
  • Be able to work with React, Vue and Angular in a practical sense
  • Understand the differences between the three libraries 
  • Good for beginners
  • Newest available version of each library

Why This Course?

  • Low cost, short duration, high density
  • Angular, React and Vue are three most popular MVC libraries
  • In the workplace, you’re equally likely to run into any of them
  • Building TodoMVC in any will teach you to use it
  • Building TodoMVC in ALL of them will teach you the differences between them
  • Zero fluff, zero opinions, all action

Course Roadmap

  • Build a different TodoMVC app in each of the following chapters…
    • Angular@5.02
    • React@16.1.1
    • Vue@2.5.7
  • The applications are equivalent – the end result for each framework is exactly the same
  • Watch in any order, skipping any chapter you like - but chronological is recommended
  • Each chapter will feature me (the CODE WHISPERER!) building a TodoMVC app from scratch
  • By coding along with me, you will learn how to use the frameworks
Preview 07:24
+ Vue TodoMVC
4 lectures 38:03

We scaffold our Vue Application with Webpack, Babel and NPM.

Scaffolding a Vue TodoMVC Application

In this clip, we pair-program a Vue Application including a Vue.js file, Vue Template and Vue Class.

Programming a Vue TodoMVC Application

We add styles to our CSS application to make it apptastic!

Styling a Vue TodoMVC Application

We summarize what we learned making a Vue application.

  • Vue Apps use a proprietary file type with the “.vue” extension 
  • .vue files combine JavaScript, HTML and CSS into one file but are otherwise unremarkable
  • View is updated magically in response to changing state
  • New Vue-specific directives (v-bind, v-model) must be learned
  • Easy to read and understand

Vue TodoMVC Application Summary

Cement that vue knowledge with a good old-fashioned quiz!

Vue Quiz
5 questions
+ React TodoMVC
4 lectures 45:33

In this clip, we set up Webpack, Babel and the other server components necessary to make a React App.

Scaffolding a React TodoMVC Application

In this clip we...

  • Create React components
  • Write React Redux with mapStateToProps
  • Composite React components
  • Render React Applications
Programming a React TodoMVC Application's Views

In this clip we...

  • Use mapDispatchToProps
  • Write a Redux reducer
  • Modify Redux application state
  • Practice non-mutational object modification
  • Make a fully functional TodoMVC!
Adding Interactivity to a React TodoMVC Application

Here, we summarize the things. The things we have learned.

React TodoMVC Summary
+ Angular TodoMVC
4 lectures 51:55

In this video, we use Angular-CLI and TypeScript to scaffold an Angular application and get to "Hello, World!"

Scaffolding an Angular TodoMVC Application

In this clip, we use decorators, components and composition to display the contents of an array as a list within a dynamic, Angular 2 application.

Free Preview Note: This video picks up in the middle of a TodoMVC. So you can see the style, but trying to code along would be pointless, since the scaffold is missing! Sign up to get the full course!!

Preview 10:38

We use the @output decorator and more composition to add interactivity to checkboxes and text inputs, and let users update our Angular Todo list.

Adding Interactivity to an Angular TodoMVC Application

We summarize building an Angular App, including pros and cons of using the framework.

Angular TodoMVC Summ-A-ry
+ Conclusion
2 lectures 02:55

Just a video to say THANK YOU! For watching

Thank YOU!

In this bonus and optional video, we discuss my other courses and some great deals you can get.

Bonus Lecture: Continue Your Learning with the Code Whisperer's Other Courses
Choose your favorite application: Vue, React and Angular, then, add the following feature to it: Add a button labeled "Undo" which reverses the last action the user took. So, if they added a new todo item, then checked it "done", pressing undo twice would uncheck it, then make it disappear.
Upgrade That App - Undo Button
1 question
  • You should be familiar with plain JavaScript
  • You should be able to use a text editor
  • You should have or be able to install Node

In today’s work-a-day world, virtually all web development positions come with the same requirement: be able to use React, Angular or Vue.js.

This course teaches you the practical skills to use not one, not two, but ALL of those libraries, all in the shortest amount of time possible, all backed by an incredible, 100% Money Back Guarantee.

Over three code along chapters, will code, from scratch, a Vue App, a React App, or an Angular App. Code along with all three in one sitting, or do each chapter at your own pace!

By the end of it, you’ll have

  • Three structurally different apps that YOU built, which you can customize, show off, and add to your portfolio
  • A solid understanding of how to scaffold an application with Webpack and Babel
  • Knowledge of all the foundational aspects of React, Vue and Angular
  • The ability to style React, Angular and Vue apps with CSS
  • Understanding of React, Angular and Vue components
  • Know-how to manage state in each of the three different apps
  • Update and filter lists fast and in real time
  • The ability to confidently say you can build an app in any of Vue, Angular and React.

The frameworks we use in this course are all the latest versions, as of January 2018. Don’t waste your time learning outdated technology, when THIS course can teach you the latest, most relevant information.

You have nothing to lose because of the 100% Money Back guarantee. If you don’t like this course (and I’m sure you WILL like it!) your money is returned to you, no questions asked.

Start NOW with the first the lecture (it’s FREE!)

Who this course is for:
  • Beginner students who want to learn more about any of the following : React, Angular or Vue (Frameworks are separated by module so the learner can proceed at their own pace)
  • Intermediate developers who want to fill in the gaps in their programming knowledge