React JS, Angular & Vue JS - Quickstart & Comparison

Angular (Angular 2+), React or Vue? Get a Crash Course on each of them and a detailed comparison!

4.51 (3066 reviews)
Udemy
platform
English
language
Web Development
category
16,922
students
8 hours
content
Nov 2022
last update
$84.99
regular price

What you will 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

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 questions like: 

  • 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!

Content

Getting Started

Introduction
The Goal of this Course
Understanding the Role of JavaScript
The World of JavaScript
Join our Online Learning Community
Using Vanilla JavaScript & Understanding Its Limitations (1/3)
Using Vanilla JavaScript & Understanding Its Limitations (2/3)
Using Vanilla JavaScript & Understanding Its Limitations (3/3)
Analyzing the Vanilla JavaScript Solution
Improving the App with jQuery
More JavaScript Libraries: Adding Lodash
The Role of JavaScript Libraries
Libraries vs Frameworks
Using Vue.js (A JavaScript Framework)
Understand other Parts of the JavaScript World
JavaScript Versions and Languages - ES6 and TypeScript
Course Structure
Where to Find the Course Source Code
Module Resources

Understanding JavaScript Frameworks in General

Module Introduction
JS Frameworks in Fullstack Applications
JS Frameworks in Single-Page-Applications
An Example for a Framework in a Fullstack Application
An Example for a Framework running a Single-Page-Application
Fullstack Approach - Pros and Cons
Single-Page-Application - Pros and Cons
Prerequisites for the Different JS Frameworks
Module Resources

Vue.js - An Introduction

Module Introduction
Creating a Basic Vue.js Application
In a Nutshell: How Vue.js Works
Handling Events and Updating the DOM
Rendering Content Conditionally
Outputting Lists
Binding HTML Attributes & Properties to Data
Styling Elements Dynamically
Setting CSS Classes Dynamically
Using Shorthands for v-bind and v-on
Using Multiple Vue Instances
Limitations of Multiple Vue Instances
Creating and Using Components
Passing Data into Components
Emitting Custom Events in Components
Template Restrictions
Two-Way-Binding to Input Fields
Time to Practice - Vue.js - Problem
Time to Practice - Vue.js - Solution
Creating Vue.js Projects with the Vue CLI
Why do we need Node.js and NPM?
Using the Vue CLI to Create Projects
Understanding the Project Folder
Understanding .vue Files
How the Application Gets Rendered
Creating Global Components with .vue Files
Creating Local Components
Scoping Styles to Components
Creating a Single Page Application (SPA)
Adding Routing to the Application
Linking with router-link
Routing and the Server-Side
Wrap Up
Module Resources & Further Resources

Understanding Workflows & Webpack

Module Introduction
The Big Picture
The Role of Node.js and NPM
Why do we need a Development Server?
How Webpack Works: Entry & Output
How Webpack Works: Modules, Rules & Plugins
Wrap Up

React.js - An Introduction

Module Introduction
Using React.js to Create a Basic App
Understanding How React.js Works and JSX
Outputting Dynamic Content
Handling Events and Updating the DOM
Creating a First Component
Passing Data into Components (Props)
Creating Components using ES6 Classes
More about ES6
Using State in React.js Components
What Happens Behind the Scenes
Rendering Conditional Content
Outputting Lists
Setting Styles Dynamically
Setting CSS Classes Dynamically
User Input & Two-Way-Binding
Using Multiple Components
Dumb Components
Passing Data from Child to Parent
Time to Practice - React.js - Problem
Time to Practice - React.js - Solution
Switching to a Local Setup & SPA
Using the "create-react-app" Package
Understanding the Created Project
Using the Local Setup
Adding React Router and Routes for the App
Adding Links
The React Router and a Server
Wrap Up
Module Resources & Further Resources

Angular - An Introduction

Module Introduction
What It's Good at and What It's Not Good At
Understanding Angular Versioning
TypeScript
TypeScript - A Brief Introduction
Creating an Angular Project with the CLI
Understanding the Project Structure
Understanding the Role of Components and the App Component
How the App Starts
Understanding the App Module
Outputting Data with String Interpolation
Handling Events
Rendering Content Conditionally
Outputting Lists
Binding Data to (HTML and other) Properties
Adding Dynamic Styles to Elements
Adding CSS Classes Dynamically
When to use the * Syntax
Using Multiple Components
Passing Data Into Components
Emitting Custom Events From Components
Using Two-Way-Binding
Time to Practice - Angular - Problem
Time to Practice - Angular - Solution
Using the CLI to Generate Components
Nesting Multiple Components
Scoping Styles to Components
Adding Routing & Routes
Adding Links
The Angular Router and the Server
Wrap Up
Module Resources & Further Resources

Comparing the Frameworks

Module Introduction
Possible Comparison Dimensions
Dimension 1: The Learning Curve
Dimension 2: Downscaling & Fullstack Applications
Dimension 3: Upscaling & SPAs
Dimension 4: Performance
Dimension 5: Ease of Deployment (The Way from Dev to Production)
Dimension 6: Popularity & Job Market
The Verdict
...What About jQuery?
Module Resources

Course Roundup

Course Roundup
Bonus: More Content!

Screenshots

React JS, Angular & Vue JS - Quickstart & Comparison - Screenshot_01React JS, Angular & Vue JS - Quickstart & Comparison - Screenshot_02React JS, Angular & Vue JS - Quickstart & Comparison - Screenshot_03React JS, Angular & Vue JS - Quickstart & Comparison - Screenshot_04

Reviews

Roman
October 26, 2023
The course was excellent. It was presented in a simple and clear manner, making it easy to understand, and it moved at a good pace. I found it to be very efficient and beneficial.
Jim
July 24, 2023
For what this course is specifically trying to accomplish, the organization and presentation of content is superb.
Paul
February 15, 2023
Excellent course and presentation by a polished and obviously highly experienced practitioner. The course provided a good comparison of popular javascript frameworks with step by step examples of each framework.
Elkasp
January 12, 2023
Straightforward and simple demonstration of basic concepts, gives instantly a comparative feeling between the different technologies.
Jayesh
November 11, 2022
Well arranged course. Really enjoyed this journey from 1st video to last. But so many things are evolved now. Few of the concept looked deprecated. So I think it's high time to update this course with latest versions of Frameworks.
Jelena
August 12, 2022
Lecturers have a natural flow. The author is explaining thing is very understandable manner. Recommend.
Hannes
August 7, 2022
Amazing! Still relevant in 2022. Needed to choose which framework to dive deeper in (after working with Angular previously) and it totally made the decision easy!
Laurent
July 5, 2022
Excellent introduction to the "big three". It's not completely up-to-date with the latest changes in Vue.js and React.js (as of July 2022).
Francisca
June 4, 2022
I am loving it. The teacher explains crystal clear, it is not a 60 hours bootcamp-like course, but it has helped to clarify concepts and, finally, to choose.
Sergei
April 16, 2022
Impressive course that fully fits my need. It covers all topics I needed. The main drawback of this course - it was recorded in 2017, hence some details changed. For high-level overview it might be not that highly important but predicting part of this course has decreased. But in general I got answers for al my questions.
Saswat
January 29, 2022
Such well-explained course that solidifies the foundation for a UI developer.. Throughly enjoyed the teaching style.I am totally looking forward to play with these tools and make cool stuff.
Henrique
December 7, 2021
Very good delivery by Max, as usual! The final chart with the comparison might be personal taste, but he also explains deep enough for each one of us do our own take on it. Recommended!
Haylee
October 2, 2021
I learned MERN stack throughout the college bootcamps I was in and always thought React was the way to go. This course helped me change my mind and really decide what I like working in. I will also be talking about this course to my colleges at a coffee and learn session because the comparison rocked.
Douglas
September 2, 2021
Great overview of where frameworks fit into the JavaScript universe, why they are useful and how they differ from each other.
Alan
August 31, 2021
Max is exceptional and very likeable; you know within a few minutes that this is his passion, not just another lecturer. I highly recommend this class as it is insightful, a lot of fun, and to the point. Max encourages critical thinking and weighs the use case of these three frameworks in context.

Coupons

DateDiscountStatus
6/26/201993% OFF
expired
7/19/201993% OFF
expired

Charts

Price

React JS, Angular & Vue JS - Quickstart & Comparison - Price chart

Rating

React JS, Angular & Vue JS - Quickstart & Comparison - Ratings chart

Enrollment distribution

React JS, Angular & Vue JS - Quickstart & Comparison - Distribution chart

Related Topics

1208638
udemy ID
5/8/2017
course created date
6/26/2019
course indexed date
Bot
course submited by