React JS, Angular & Vue JS - Quickstart & Comparison
4.8 (404 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,763 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React JS, Angular & Vue JS - Quickstart & Comparison to your Wishlist.

Add to Wishlist

React JS, Angular & Vue JS - Quickstart & Comparison

Angular (Angular 2 or 4), React or Vue? Get a Crash Course on each of them and a detailed comparison!
4.8 (404 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,763 students enrolled
Last updated 5/2017
Current price: $12 Original price: $160 Discount: 92% off
30-Day Money-Back Guarantee
  • 8 hours on-demand video
  • 10 Articles
  • 30 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Choose their favorite JavaScript framework and dive deeper into it
  • Understand the JavaScript world and its many packages and tools better
  • Take their JavaScript apps to the next level
View Curriculum
  • Basic JavaScript knowledge is a must
  • Advanced JavaScript knowledge is a plus but not required
  • No prior JavaScript framework or library experience is required

After learning the basics about JavaScript, the JavaScript world can be very intimidating. There are lots of different frameworks like Angular, React or Vue, libraries and other packages (like webpack). 

You’ll quickly see yourself ask these questions:

  • What do all these packages, tools, libraries and frameworks do?
  • What IS a library and what's the difference to a framework?
  • Which framework should you learn? Angular, React.js or Vue.js?
  • What about jQuery?

This course will help you with that! 

You’ll get an introduction into the three most important JavaScript frameworks (Angular, React.js and Vue.js) and you’ll also get a detailed comparison! This will then allow you to pick other resources or courses to dive super-deep into your chosen framework whilst having a solid foundation already.

Throughout the course, we’ll dive into the basics of these frameworks but we’ll also have a look at why we use them to begin with. The role of jQuery and how these frameworks differ from jQuery will be clarified, too!

Which framework should you learn?

Not only are we going to dive into the basics of the three most popular JavaScript frameworks, this course will also draw a detailed comparison. A couple of different dimensions will be considered to find out which framework might be the perfect tool for the job you have at hand!

This course won’t stop at this point though!

We’ll also have a look at Webpack and “Build workflows” in general. You’ll learn which role these (and the respective packages like Webpack) play and why we need them. You will also understand which role ES6 and TypeScript play.

Here’s a detailed overview over what you’ll get!

  • An introduction to today’s JavaScript world and an immediate overview over the different roles of the individual pieces
  • A practical example showing you why vanilla JavaScript (=without any libraries or frameworks) might NOT be all you need
  • An overview what JavaScript frameworks are and where to use them
  • Detailed introductions to the three most relevant JavaScript frameworks as of today: Angular (2, 4), React.js and Vue.js
  • An introduction to Webpack and why we use it (and build workflows in general)
  • A detailed comparison of the three frameworks shown in this course – when could you pick which?
  • A detailed understanding of the JavaScript world as it is today

Is this course for you?

Now that you learned what this course offers, let's find out if it's the right choice for you. It's definitely the right choice if you can answer at least one of the following questions with "YES":

  • You have basic JavaScript experience and want to learn how to use libraries or frameworks to "do more with JavaScript"
  • You're not sure which JavaScript (frontend) framework you should learn
  • You already know something about JavaScript frameworks but want to get a basic introduction to the three most important ones
  • You already know either Angular, React.js or Vue.js but also want to get an overview over the other two frameworks
  • You're totally confused by the many terms the JavaScript world throws at you

I'd be very happy to welcome you on board of this course!

Who is the target audience?
  • Everyone who's interested in diving deeper into JavaScript and wants to learn a JavaScript framework
  • Anyone who isn't sure which JavaScript framework to choose
  • Anyone confused by the many options, packages and tools JavaScript development offers
Curriculum For This Course
142 Lectures
Getting Started
18 Lectures 01:03:59

Let me introduce to this course and its content.

Preview 01:18

What's the goal of this course and what are you going to learn? This lecture takes a closer look.

Preview 02:31

JavaScript is a super important language when it comes to web development, especially frontend development. Let's take a closer look at it.

Preview 03:48

Let's take a look at some of the most important pieces of the world of JavaScript.

Preview 01:36

To understand what we need this course for, we need to understand how we use vanilla JavaScript and why we might face some limitations when sticking only to it.

Preview 05:17

Let's continue with our JavaScript app and see how we can build a at least a little bit more complex app with vanilla JavaScript.

Preview 02:12

Time to conclude our JavaScript app - look at what we built!

Preview 04:40

Now that the vanilla JavaScript solution is finished, let's analyze it and see how we might improve it.

Analyzing the Vanilla JavaScript Solution

Vanilla JavaScript doesn't do the trick, jQuery to the rescue!

Improving the App with jQuery

jQuery is not everything the JavaScript library world has to offer. Let's have a look at another popular framework.

More JavaScript Libraries: Adding Lodash

We had a look at jQuery and Lodash - time to summarize the role JavaScript libraries play.

The Role of JavaScript Libraries

You might've heard about Frameworks, too. What's the difference between Libraries and Frameworks then?

Libraries vs Frameworks

We can even improve the jQuery solution - by using a JavaScript framework. Time to introduce Vue.js.

Using Vue.js (A JavaScript Framework)

There's more to the JavaScript world than just libraries and frameworks like jQuery and Vue.js. What about ES6, TypeScript and Webpack?

Understand other Parts of the JavaScript World

You might've heard about ES6 and TypeScript. What's the role of these languages, how are they connected to JavaScript.

JavaScript Versions and Languages - ES6 and TypeScript

Now that we got started and understand why you might want to learn more about JavaScript, let's have a look at the course structure in detail.

Course Structure

Learn where to find the course source code in this lecture.

Where to Find the Course Source Code

Useful resources for this module.

Module Resources
Understanding JavaScript Frameworks in General
9 Lectures 24:29

Let me introduce you to this module and explain what you can expect from it.

Module Introduction

There are two different ways of using JavaScript frameworks. Let's have a look at the first one: Embedding them in fullstack applications.

JS Frameworks in Fullstack Applications

The other way of using JavaScript frameworks is to use them in Single-Page-Applications. Let's have a look at what this is.

JS Frameworks in Single-Page-Applications

Better than learning it in theory is seeing a framework being used in a real fullstack app. Let's have a look at the Udemy page.

An Example for a Framework in a Fullstack Application

Now that we saw a page using a framework in a fullstack app context, let's now view an example running a SPA with a JS framework.

An Example for a Framework running a Single-Page-Application

What are the pros and cons about using a JS framework in a fullstack environment? Let's find out.

Fullstack Approach - Pros and Cons

What are the pros and cons about using a JS framework for running a SPA? Let's find out.

Single-Page-Application - Pros and Cons

What do you need to know if you really want to dive deeper into the individual JS frameworks?

Prerequisites for the Different JS Frameworks

In this lecture, you'll find useful module resources.

Module Resources
Vue.js - An Introduction
34 Lectures 01:39:11

Let me introduce you to this course module and to Vue.js.

Module Introduction

Time to create our first (well, actually second) Vue.js application and see how it works.

Creating a Basic Vue.js Application

We built our first (or second) app, let's now analyze how Vue.js works.

In a Nutshell: How Vue.js Works

We had a look at how to output data but how can we react to use events and how is the DOM updated?Let's have a look.

Handling Events and Updating the DOM

Sometimes, you don't want to render certain pieces of the DOM all the time. You might prefer to have a condition controlling the displaying of that content. Welcome to v-if.

Rendering Content Conditionally

Just as you could output content conditionally, you can also easily output lists of content. This lecture explores how that works.

Outputting Lists

We learned how to output data with interpolation and how to react to events. What if you want to manipulate some HTML attributes or properties? It's super easy to do, too.

Binding HTML Attributes & Properties to Data

Vue.js makes the dynamic styling of elements very easy, too. Learn how to adjust styles at runtime with ease in this lectures.

Styling Elements Dynamically

Besides assigning styles dynamically, you can also set CSS classes dynamically. This lecture shows how.

Setting CSS Classes Dynamically

Tired of typing v-bind and v-on all the time? There is a shorter way!

Using Shorthands for v-bind and v-on

You're not limited to one Vue instance as this lecture will show - learn how to easily use multiple ones.

Using Multiple Vue Instances

When using multiple Vue instances, you might not be able to achieve what you maybe planned to achieve. Let's take a look at the problem you might face.

Limitations of Multiple Vue Instances

Components to the rescue! There's an easy way of creating re-usable code pieces and this lecture shows you how it works.

Creating and Using Components

Many components require data from outside to work correctly. This lecture shows how to easily pass such data.

Passing Data into Components

You're not limited to passing data into components, you can also emit your own events to which the parent component can listen.

Emitting Custom Events in Components

As you learned, a Vue instance or component has a template - the HTML code which is rendered to the screen in the end. Certain restrictions apply for normal templates. Learn more about these in this lecture.

Template Restrictions

So far we only considered unidirectional data flow. You're not limited to that though. Let's dive into two-way-binding in this lecture.

Two-Way-Binding to Input Fields

Time to practice what we learned.

Time to Practice - Vue.js - Problem

Your chance to compare your solution to mine.

Time to Practice - Vue.js - Solution

For more complex projects and especially for SPAs, you may need more complex development environments and build workflows. You can easily create these by using the Vue CLI. Learn more about it in this lecture.

Creating Vue.js Projects with the Vue CLI

For the CLI, we installed Node.js and the Node package manager (NPM). Why do we need these tools?

Why do we need Node.js and NPM?

Learn how to use the Vue CLI to create projects locally on your machine.

Using the Vue CLI to Create Projects

The Vue CLI created a project folder for us - time to understand the content of that folder.

Understanding the Project Folder

Remember the template restrictions? .vue files are there to save the day. Learn more about them in this lecture.

Understanding .vue Files

With all these files and folders - how does the app actually get rendered?

How the Application Gets Rendered

Now that we understood how to use .vue files, let's use them to create global components.

Creating Global Components with .vue Files

We're not limited to global components - let's learn how to create local ones in this lecture.

Creating Local Components

Components and CSS - that goes together very well as it turns out. Let's explore how to scope styles to components in this lecture.

Scoping Styles to Components

So far, we didn't really create a Single Page Application. Let's now learn how to use the Vue Router to do just that.

Creating a Single Page Application (SPA)

Routing is an integral part of most applications. Learn how to add it to serve multiple pages in a SPA. Crazy, huh?

Adding Routing to the Application

Having routes is great but having a way of getting there is even better, time to learn more about router-link.

Linking with router-link

Of course your SPA needs to be hosted by server and since servers tend to also handle routing, it's important to understand how to make your SPA work together with the server harmonically.

Routing and the Server-Side

We learned a lot about Vue.js, time to wrap this module up.

Wrap Up

In this lecture you'll find useful module resources

Module Resources & Further Resources
Understanding Workflows & Webpack
7 Lectures 19:15

Let me introduce you to this module and the goal of it.

Module Introduction

What are all these workflows and tools about, why might you want (or need) to use them? This lecture explores this question.

The Big Picture

We installed and use Node.js and NPM - why? This lecture takes a closer look.

The Role of Node.js and NPM

In the last course module, we also started using a development server? Why do we need one when working with client-side technologies like JavaScript?

Why do we need a Development Server?

Webpack is a core tool of modern JavaScript development. Learn the basics about it, starting with entry and output.

How Webpack Works: Entry & Output

Whilst entry and output files are the core feature and definitely required, having rules to work with all these files is also important. Let's take a closer look in this module.

How Webpack Works: Modules, Rules & Plugins

Let me wrap up this module.

Wrap Up
React.js - An Introduction
30 Lectures 01:43:06

Let me introduce you to this module and explain what we're going to cover.

Module Introduction

Let's dive into React.js by creating a basic app with it.

Using React.js to Create a Basic App

We created a basic app, that's great! But how does React.js actually work and which role does this strange JSX-thing play?

Understanding How React.js Works and JSX

With the very basics set, let's dive into outputting dynamic content with React.js. How does that actually work?

Outputting Dynamic Content

Outputting data is great but how can we listen to events? This lecture takes a closer look.

Handling Events and Updating the DOM

React.js is all about components, it really embraces them. Learn more about components and how to create one in this lecture.

Creating a First Component

Components often require data being passed into them from the outside. Learn how to do that using the concept of Props in this lecture.

Passing Data into Components (Props)

The way we created a component actually isn't the standard way of doing so. Instead, you often times use ES6 classes - learn how to do that in this lecture.

Creating Components using ES6 Classes

When learning React.js, it's strongly recommended to also learn ES6. More about that in this lecture.

More about ES6

So far, we used props to pass data into components but what if you actually want to change something about the content of the component? Let me introduce the concept of "state" to you.

Using State in React.js Components

Time to also have a look at what's happening behind the scenes.

What Happens Behind the Scenes

What if you want to render some content conditionally? React.js makes that easy - this lecture explores how it works.

Rendering Conditional Content

What if you have a list of data and want to output it? This lecture explores how to do that the React.js way.

Outputting Lists

Often times, the styles of your elements need to be adjusted at runtime. Learn how to do that using React.js in this lecture.

Setting Styles Dynamically

Just like styles, you can also set CSS classes dynamically with React.js. This lectures dives into how to do that.

Setting CSS Classes Dynamically

Learn how to handle user input with two-way-binding in this lecture.

User Input & Two-Way-Binding

So far, we only used one component. Of course you're not limited to that. Learn how to use multiple components in this lecture.

Using Multiple Components

There's this concept called "Dump Components" in React.js - this lecture explores what it's all about.

Dumb Components

What if you don't want to pass data into a component but back to the parent instead? This lecture answers this question.

Passing Data from Child to Parent

Time to practice what we learned about React.js.

Time to Practice - React.js - Problem

Your chance to compare your solution with mine.

Time to Practice - React.js - Solution

Time to leave JSFiddle and also dive into creating SPAs with React.js.

Switching to a Local Setup & SPA

There's a quick and easy way of creating new React.js projects (for SPAs). This lectures shows which way that is.

Using the "create-react-app" Package

Let's take a closer look at the project structure the "create-react-app" package created for us.

Understanding the Created Project

We created the local setup and we analyzed the project structure, time to use the project.

Using the Local Setup

In most SPAs, you probably need routes. Learn how to use the React router to create such routes in this lecture.

Adding React Router and Routes for the App

Having routes is nice but you certainly also need links. Learn how to connect your routes to links in this lecture.

Adding Links

How does the React router work together with a server? This lecture answers this question.

The React Router and a Server

Let me wrap this module up.

Wrap Up

In this lecture you'll find useful module resources.

Module Resources & Further Resources
Angular (2 & 4) - An Introduction
32 Lectures 01:36:08

Let me introduce you to this module.

Module Introduction

Angular is a great framework and great at doing a couple of things. But there also are some things where it's not great at. Let's take a closer look.

What It's Good at and What It's Not Good At

Angular Versioning can be confusing - this lecture should clear up some of the confusion.

Understanding Angular Versioning

Angular uses TypeScript - this lecture explores what that is and why it uses it.


This lecture gives a very brief introduction to TypeScript.

TypeScript - A Brief Introduction

We won't use JSFiddle for Angular because it requires a little bit of a more complex setup. Thankfully, there is a tool which makes setting up an Angular project real easy though.

Creating an Angular Project with the CLI

The CLI created a project for us, now it's time to understand the project structure. This lecture dives into this.

Understanding the Project Structure

Angular is all about components, you build your complete app with a lot of components. This lecture explains the basics about them.

Understanding the Role of Components and the App Component

Understanding components is great but it's also important to understand how an Angular app starts. This lecture takes a closer look.

How the App Starts

We're soon done with the basics about the Angular app and its startup process but it's key to also understand the role of the AppModule.

Understanding the App Module

Of course you want to output dynamic content, with string interpolation that's easy to do. This lecture takes a closer look.

Outputting Data with String Interpolation

Outputting data alone rarely makes up for a great app. Let's have a look at event binding, too.

Handling Events

Not all template content should be visible all the time. Learn how to output content dynamically in an Angular app in this lecture.

Rendering Content Conditionally

Learn how to output a list of data in this lecture.

Outputting Lists

String interpolation isn't your only way of outputting data - let me introduce property binding in this module.

Binding Data to (HTML and other) Properties

As the other frameworks, Angular allows you to set and change your element styles dynamically. Learn how it works in this lecture.

Adding Dynamic Styles to Elements

Of course, you may also set CSS classes dynamically. This lecture explores how that works.

Adding CSS Classes Dynamically

Did you notice that strange "*" we used from time to time? This lecture explains what it's all about.

When to use the * Syntax

Angular is all about components and yet we only used one so far? Time to change that!

Using Multiple Components

Many components require data which should be passed into them from outside. Learn how that works in this lecture.

Passing Data Into Components

Some components also need to pass data back to the holding parent component. Learn how that works in this lecture.

Emitting Custom Events From Components

We learned about a lot of ways of binding data. Let me introduce the last way (two-way-binding) in this lecture.

Using Two-Way-Binding

Time to practice what we learned thus far.

Time to Practice - Angular - Problem

Your chance to compare my solution with mine!

Time to Practice - Angular - Solution

So far, we created components manually. There is an easier way though. Learn how to use the CLI in this lecture.

Using the CLI to Generate Components

Learn how you may nest multiple components in this lecture.

Nesting Multiple Components

A great feature offered by Angular is the feature of style encapsulation. Learn how it works in this lecture.

Scoping Styles to Components

In a lot of applications, you'll actually need routes. This lecture explains how to use the Angular router.

Adding Routing & Routes

Routes alone won't do the trick - this lecture explains how to add fitting links, too.

Adding Links

Learn how to make the Angular Router work with your server in this lecture.

The Angular Router and the Server

Let me wrap this module up for you.

Wrap Up

This lecture holds useful module resources.

Module Resources & Further Resources
Comparing the Frameworks
11 Lectures 01:04:29

Let me introduce you to this course module.

Module Introduction

This lecture shows some possible dimensions you may use for comparing the different frameworks with each other.

Possible Comparison Dimensions

Let's have a look at the first dimension - the learning curve.

Dimension 1: The Learning Curve

How may you use the framework on individual pages of fullstack apps? Let's take a closer look in this lecture.

Dimension 2: Downscaling & Fullstack Applications

How well is the framework suited for bigger apps and creating SPAs? This lecture explores this question.

Dimension 3: Upscaling & SPAs

How's the framework performance? This lecture answers this question.

Dimension 4: Performance

How easy or complex is it to get your app published? This lecture explores this question.

Dimension 5: Ease of Deployment (The Way from Dev to Production)

Of course getting support and a job is very important. This lecture explores how the frameworks compare regarding this dimension.

Dimension 6: Popularity & Job Market

After using a couple of dimensions for comparing the frameworks, how's the final verdict?

The Verdict

Where did jQuery go? Let me take a look at it.

...What About jQuery?

This lecture provides useful module resources

Module Resources
Course Roundup
1 Lecture 01:43

Let me summarize the course.

Course Roundup
About the Instructor
Maximilian Schwarzmüller
4.7 Average rating
42,895 Reviews
131,649 Students
15 Courses
Professional Web Developer and Instructor

Experience as Web Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS) I also became more and more of a frontend developer using modern frameworks like Angular or VueJS 2 in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 100.000 students on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.