React JS, Angular & Vue JS - Quickstart & Comparison

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

There are two different ways of using JavaScript frameworks. Let's have a look at the first one: Embedding them 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.

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.

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.

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

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

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

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

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

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

We built our first (or second) app, let's now analyze 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.

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.

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

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.

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

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

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

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

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.

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

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

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

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.

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.

Time to practice what we learned.

Your chance to compare your solution to mine.

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.

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

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

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

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

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

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

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

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

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.

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

Having routes is great but having a way of getting there is even better, time to learn more about 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.

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

In this lecture you'll find useful module resources

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

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

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

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?

Webpack is a core tool of modern JavaScript development. Learn the basics about it, starting with entry and 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.

Let me wrap up this module.

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

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

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

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

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

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

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

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.

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

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.

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

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

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

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

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

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

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

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

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

Time to practice what we learned about React.js.

Your chance to compare your solution with mine.

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

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

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

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

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

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

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

Let me wrap this module up.

In this lecture you'll find useful module resources.

Let me introduce you to this module.

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.

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

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

This lecture gives a very brief introduction to TypeScript.

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.

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

Time to practice what we learned thus far.

Your chance to compare my solution with mine!

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

Learn how you may nest multiple components in this lecture.

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

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

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

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

Let me wrap this module up for you.

This lecture holds useful module resources.

Let me introduce you to this course module.

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

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

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

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

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

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

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

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

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

This lecture provides useful module resources