React JS, Angular & Vue JS - Quickstart & Comparison

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

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

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

Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!

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.

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.

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

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

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

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

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

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

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

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

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

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.

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

Useful resources for this module.

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.