React JS vs Angular vs Vue JS – Quickstart & Comparison

React JS vs Angular vs Vue JS – Quickstart & Comparison
React JS vs Angular vs Vue JS – Quickstart & Comparison

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 8 Hours | 1.53 GB
eLearning | Skill level: All Levels

part 1 part 1
part 2 part 2
part 3 part 3

Angular, React or Vue? What’s Webpack and why does React use it? Get detailed answers to these questions!

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
+ Table of Contents

1 – Introduction
2 – The Goal of this Course
3 – Understanding the Role of JavaScript
4 – The World of JavaScript
5 – Using Vanilla JavaScript & Understanding Its Limitations (1 3)
6 – Using Vanilla JavaScript & Understanding Its Limitations (2 3)
7 – Using Vanilla JavaScript & Understanding Its Limitations (3 3)
8 – Analyzing the Vanilla JavaScript Solution
9 – Improving the App with jQuery
10 – More JavaScript Libraries Adding Lodash
11 – The Role of JavaScript Libraries
12 – Libraries vs Frameworks
13 – Using Vue.js (A JavaScript Framework)
14 – Understand other Parts of the JavaScript World
15 – JavaScript Versions and Languages – ES6 and TypeScript
16 – Course Structure
17 – Module Introduction
18 – JS Frameworks in Fullstack Applications
19 – JS Frameworks in Single-Page-Applications
20 – An Example for a Framework in a Fullstack Application
21 – An Example for a Framework running a Single-Page-Application
22 – Fullstack Approach – Pros and Cons
23 – Single-Page-Application – Pros and Cons
24 – Prerequisites for the Different JS Frameworks
25 – Module Introduction
26 – Creating a Basic Vue.js Application
27 – In a Nutshell How Vue.js Works
28 – Handling Events and Updating the DOM
29 – Rendering Content Conditionally
30 – Outputting Lists
31 – Binding HTML Attributes & Properties to Data
32 – Styling Elements Dynamically
33 – Setting CSS Classes Dynamically
34 – Using Multiple Vue Instances
35 – Limitations of Multiple Vue Instances
36 – Creating and Using Components
37 – Passing Data into Components
38 – Emitting Custom Events in Components
39 – Template Restrictions
40 – Two-Way-Binding to Input Fields
41 – Time to Practice – Vue.js – Problem
42 – Time to Practice – Vue.js – Solution
43 – Creating Vue.js Projects with the Vue CLI
44 – Why do we need Node.js and NPM
45 – Using the Vue CLI to Create Projects
46 – Understanding the Project Folder
47 – Understanding .vue Files
48 – How the Application Gets Rendered
49 – Creating Global Components with .vue Files
50 – Creating Local Components
51 – Scoping Styles to Components
52 – Creating a Single Page Application (SPA)
53 – Adding Routing to the Application
54 – Linking with router-link
55 – Routing and the Server-Side
56 – Wrap Up
57 – Module Introduction
58 – The Big Picture
59 – The Role of Node.js and NPM
60 – Why do we need a Development Server
61 – How Webpack Works Entry & Output
62 – How Webpack Works Modules, Rules & Plugins
63 – Wrap Up
64 – Module Introduction
65 – Using React.js to Create a Basic App
66 – Understanding How React.js Works and JSX
67 – Outputting Dynamic Content
68 – Handling Events and Updating the DOM
69 – Creating a First Component
70 – Passing Data into Components (Props)
71 – Creating Components using ES6 Classes
72 – Using State in React.js Components
73 – What Happens Behind the Scenes
74 – Rendering Conditional Content
75 – Outputting Lists
76 – Setting Styles Dynamically
77 – Setting CSS Classes Dynamically
78 – User Input & Two-Way-Binding
79 – Using Multiple Components
80 – Dumb Components
81 – Passing Data from Child to Parent
82 – Time to Practice – React.js – Problem
83 – Time to Practice – React.js – Solution
84 – Switching to a Local Setup & SPA
85 – Using the create-react-app Package
86 – Understanding the Created Project
87 – Using the Local Setup
88 – Adding React Router and Routes for the App
89 – Adding Links
90 – The React Router and a Server
91 – Wrap Up
92 – Module Introduction
93 – What It’s Good at and What It’s Not Good At
94 – Understanding Angular Versioning
95 – TypeScript
96 – Creating an Angular Project with the CLI
97 – Understanding the Project Structure
98 – Understanding the Role of Components and the App Component
99 – How the App Starts
100 – Understanding the App Module
101 – Outputting Data with String Interpolation
102 – Handling Events
103 – Rendering Content Conditionally
104 – Outputting Lists
105 – Binding Data to (HTML and other) Properties
106 – Adding Dynamic Styles to Elements
107 – Adding CSS Classes Dynamically
108 – When to use the Syntax
109 – Using Multiple Components
110 – Passing Data Into Components
111 – Emitting Custom Events From Components
112 – Using Two-Way-Binding
113 – Time to Practice – Angular – Problem
114 – Time to Practice – Angular – Solution
115 – Using the CLI to Generate Components
116 – Nesting Multiple Components
117 – Scoping Styles to Components
118 – Adding Routing & Routes
119 – Adding Links
120 – The Angular Router and the Server
121 – Wrap Up
122 – Module Introduction
123 – Possible Comparison Dimensions
124 – Dimension 1 The Learning Curve
125 – Dimension 2 Downscaling & Fullstack Applications
126 – Dimension 3 Upscaling & SPAs
127 – Dimension 4 Performance
128 – Dimension 5 Ease of Deployment (The Way from Dev to Production)
129 – Dimension 6 Popularity & Job Market
130 – The Verdict
131 – …What About jQuery
132 – Course Roundup