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
English
English
Current price: $12 Original price: $160 Discount: 92% off
30-Day Money-Back Guarantee
Includes:
  • 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
Requirements
  • Basic JavaScript knowledge is a must
  • Advanced JavaScript knowledge is a plus but not required
  • No prior JavaScript framework or library experience is required
Description

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
07:52:10
+
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
02:28

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

Improving the App with jQuery
07:01

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
02:56

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

The Role of JavaScript Libraries
01:20

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

Libraries vs Frameworks
02:50

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

Using Vue.js (A JavaScript Framework)
15:02

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
03:55

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
03:56

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
02:59

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

Where to Find the Course Source Code
00:03

Useful resources for this module.

Module Resources
00:06
+
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
00:34

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
02:37

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
02:45

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
04:29

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
01:50

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

Fullstack Approach - Pros and Cons
04:07

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
04:28

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

Prerequisites for the Different JS Frameworks
03:37

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

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

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

Module Introduction
01:33

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

Creating a Basic Vue.js Application
03:23

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

In a Nutshell: How Vue.js Works
02:06

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
03:57

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
03:15

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

Outputting Lists
03:27

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
03:38

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
03:24

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

Setting CSS Classes Dynamically
01:45

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

Using Shorthands for v-bind and v-on
00:14

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

Using Multiple Vue Instances
01:39

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
01:55

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
04:30

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

Passing Data into Components
01:42

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
03:15

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
01:37

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
01:55

Time to practice what we learned.

Time to Practice - Vue.js - Problem
02:20

Your chance to compare your solution to mine.

Time to Practice - Vue.js - Solution
15:33

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
03:16

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?
01:32

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

Using the Vue CLI to Create Projects
03:11

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

Understanding the Project Folder
04:50

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

Understanding .vue Files
03:06

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

How the Application Gets Rendered
02:26

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

Creating Global Components with .vue Files
03:42

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

Creating Local Components
02:25

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
01:18

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)
01:08

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
05:57

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
01:31

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
02:15

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

Wrap Up
01:10

In this lecture you'll find useful module resources

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

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

Module Introduction
00:58

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
02:47

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

The Role of Node.js and NPM
03:38

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?
02:30

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

How Webpack Works: Entry & Output
04:00

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
04:24

Let me wrap up this module.

Wrap Up
00:58
+
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
01:14

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

Using React.js to Create a Basic App
04:22

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
03:45

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

Outputting Dynamic Content
01:20

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

Handling Events and Updating the DOM
04:22

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
02:48

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)
01:51

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
02:36

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

More about ES6
00:46

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
05:02

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

What Happens Behind the Scenes
02:18

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

Rendering Conditional Content
03:18

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
05:18

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
03:11

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
02:05

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

User Input & Two-Way-Binding
03:23

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
02:45

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

Dumb Components
01:13

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
04:11

Time to practice what we learned about React.js.

Time to Practice - React.js - Problem
02:35

Your chance to compare your solution with mine.

Time to Practice - React.js - Solution
23:59

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

Switching to a Local Setup & SPA
01:23

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
02:34

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

Understanding the Created Project
02:48

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

Using the Local Setup
02:38

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
06:36

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

Adding Links
01:46

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

The React Router and a Server
01:20

Let me wrap this module up.

Wrap Up
01:23

In this lecture you'll find useful module resources.

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

Let me introduce you to this module.

Module Introduction
01:07

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
01:45

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

Understanding Angular Versioning
00:48

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

TypeScript
03:00

This lecture gives a very brief introduction to TypeScript.

TypeScript - A Brief Introduction
00:13

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
03:47

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
03:31

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
03:01

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
05:16

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
02:04

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
01:31

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

Handling Events
02:41

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
03:26

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

Outputting Lists
04:02

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
02:57

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
04:23

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

Adding CSS Classes Dynamically
02:45

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

When to use the * Syntax
01:00

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

Using Multiple Components
06:09

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

Passing Data Into Components
02:04

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
05:39

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
03:04

Time to practice what we learned thus far.

Time to Practice - Angular - Problem
01:53

Your chance to compare my solution with mine!

Time to Practice - Angular - Solution
15:10

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
01:58

Learn how you may nest multiple components in this lecture.

Nesting Multiple Components
01:56

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

Scoping Styles to Components
01:17

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

Adding Routing & Routes
04:52

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

Adding Links
01:56

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

The Angular Router and the Server
01:08

Let me wrap this module up for you.

Wrap Up
01:31

This lecture holds useful module resources.

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

Let me introduce you to this course module.

Module Introduction
01:12

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

Possible Comparison Dimensions
03:43

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

Dimension 1: The Learning Curve
07:54

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
06:53

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

Dimension 3: Upscaling & SPAs
10:40

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

Dimension 4: Performance
09:00

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)
08:13

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
12:36

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

The Verdict
02:31

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

...What About jQuery?
01:41

This lecture provides useful module resources

Module Resources
00:06
+
Course Roundup
1 Lecture 01:43

Let me summarize the course.

Course Roundup
01:43
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.