React vs Angular vs Vue.js by Example

Decide for yourself which you like the best.

Created byGary Simon

Last updated 6/2017

English

What you'll learn

Create a React App
Create an Angular App
Create a Vue.js App
Create an Adobe XD Prototype Mockup
Understand the core differences between React, Angular and Vue.js

Course content

4 sections • 30 lectures • 3h 26m total length

Project Introduction & Resource Files1:45
In this video, we will do a quick overview of the course purpose, as well as a quick look at the project we will be focusing on.
Navigation Design10:48
In this lesson, we will get started by designing the navigation in Adobe XD, and ensuring it's consistent with the Bulma CSS framework.
Hero Section9:28
Let's design a hero section of our web app's home page. This will feature a heading, subheading and a call to action button.
Supporting Content10:37
In this video, we will design secondary content, which will include some more text content and 3 testimonials.
Footer Design4:15
Let's add a real quick footer design to our web app with Adobe XD. It will feature 2 columns; one for a simple text-based content, and the other for social icons.
FAQ Page6:45
For the purpose of showing how to create secondary pages using Angular, React and Vue, we will create a simple FAQ page design here in Adobe XD.
Mobile Home Page9:50
In this video, we're going to copy the content into a new mobile artboard in Adobe XD, and make adjustments so that it fits the design of a mobile viewport.
Mobile Navigation5:17
When a user clicks on the hamburger icon menu in our prototype, we want to show what the dropdown menu will look like. That's what we will design now using Adobe XD.
Mobile FAQ Page4:52
Now, let's create a mobile-version of our FAQ page using Adobe XD. This will simply include modifying the desktop card-containers for the FAQ page and adjusting them to fit within the mobile viewport.

Installing Vue.js6:10
Now we're going to get started with the Vue.js section of this course, where we will install Vuejs with the Vue CLI.
Vue Components7:37
Initially, we will take a look at how Vue is structured, and then we will create the necessary Vue components for our project.
Integrating a CSS Framework6:11
For this project, we will use the Bulma CSS framework. As such, we will need to integrate it within our Vue.js project, which will utilize the power of Sass.
Vue.js Navigation11:03
Learn how to write HTML, CSS/SASS, that is consistent with the Bulma Nav component.
Making the Navigation Function5:17
Next, we're going to use Vue directives to make the responsive navigation work once clicked. This will involve toggling classes with v-on and v-bind.
Footer Integration3:38
In this video, we will integrate a very simple, 2-column footer for our layout.
Hero Section7:24
The hero section is a common element on most landing pages. In this video, we will integrate one based on the Hero documentation of the Bulma CSS framework.
Supporting Content7:17
In this video, we will write the necessary HTML and CSS for our secondary/supporting content section based on the Adobe XD prototype we created.
FAQ Page7:56
In the final lesson a part of this Vue.js section, we will create the FAQ page, which will involve using Axios to connect to a REST API.

Installing React4:13
In this lesson, learn how to use the React CLI to start a new React project.
React Components11:44
In this lesson, we will cover the basic project structure of a React app and also React components.
Integrating a CSS Framework6:55
In this video, we will install the bulma css package with npm, and then integrate it within React.
Header & Routing11:29
In this lesson, we will configure the routing for our components and get started with the header HTML and CSS.
Footer & Navigation7:19
In this video, we will establish the HTML/Sass for the footer, and ensure the navigation works on mobile.
Home Page4:24
In this video, we will establish the HTML & Sass for the home page content.
FAQ Page5:26
In this video, we will structure the FAQ page and use Axios to fetch data from an API.

Installing Angular4:07
We will use the Angular CLI (Command Line Interface) to start a new Angular project.
Angular Components5:02
In this video, you will learn how Angular is structured, and also how to generate your own Angular components with the Angular CLI.
Routing & CSS Framework Integration4:35
In this video, we will first set up our routing for the FAQ and Home components, and then integrate the Bulma CSS framework.
Header & Footer Integration6:02
In this video, we will establish the HTML and Sass for our project's header and footer.
Home & FAQ Page8:42
In this video, we will finalize our Angular project and the course by establishing the code for the home and FAQ components. I hope you enjoyed the course!

Requirements

HTML
CSS
Basic Javascript
Adobe XD (Experience Design) for Mockup Process (Optional)

Description

With all of the various javascript libraries and frameworks, you might be a little bit confused as to where to begin. Right now, the three powerhouses in the javascript world are React, Angular and Vue.js.

Sometimes, the best course of action is to make up your own mind based on your own experiences.

And that's exactly what this course will aim to do. We're going to design and develop a single app in React, Angular and Vue.js.

The goal here is to help you determine which workflow you like best based on your own needs and preferences.

The following is the basic flow of what we're going to learn in React, Angular, and Vue.js:

Installing & Getting Started with a Project
Component Structure
Templating
Styling
Integrating CSS Frameworks
Working with API's

This will help you get a solid start with each of these javascript technologies, to the point at which you will walk away with your own opinions.

So, if you're ready to learn, let's get started!

Who this course is for:

Intermediate Designer / Developer

React vs Angular vs Vue.js by Example

What you'll learn

Explore related topics

Course content

Project Design9 lectures • 1hr 4min

Vue.js9 lectures • 1hr 3min

React7 lectures • 52min

Angular5 lectures • 28min

Requirements

Description

Who this course is for: