199
Lectures
26
Hours
Watch Intro Video

Understand basics and difficult parts of the 3 most popular frameworks - React, Angular and Vue. 

What is Vue JS, React JS, Angular ?

They are javascript frameworks. React is a library.

What is Framework(FW)/ Library ?

Environment, set of tools and guide lines build on top of the programming language(JS in case of this course). FW exposes functionalities, handles lifecycle of the application and defines set of rules how application should be written in order to follow best FW practices.

Every framework is different, but there is one thing they have in common. They are builded on top of JS so if you are familiar with JS you can learn any fro-tend(FE) FW very fast!

Angular -> Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

React -> A JavaScript library for building user interfaces

Vue -> (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.


What are you going to build ?

In this course you are going to create application for keeping track of the resources. Resource can be anything on the internet(blog, video, book etc.). 

You are going to build one application in 3 Frameworks so you will understand and memorize the differences in web application development.

This application will have functionalities to create, update and delete the resource. Through the process of creating these features you will learn core concepts of each framework.

In first section we will work on most basics concepts by creating simple counter application.

Later I will explain you how FW works under the hood and how the application is rendered in your browser. You will learn it on wireframes and real examples from FW code it self. 

Next, you are going to integrate very simple layout backed by Bootstrap. You will learn how to manipulate data, how to keep track of them and how to reflect data changes in your application. Every handles data in different fashion.

In next sections you will learn how to make an API request to remote server. We will explain what is a proxy and why we need to use a proxy. You will fetch a data from a remote database and use them in your application.

In last sections we will talk about the routing. You will create multiple pages and navigation between them. Every framework has a different routing system. I will be explaining more advanced and newest concepts of each FW. 

In the end you will implement search functionality and I will be explaining patterns how to propagate data to entire application. It will be explained on a feature that can change the application settings.

As the last thing we will deploy each application on Heroku platform so you can share your application on internet.

Requirements

  • Basic/Mid understanding of JS(ES6) & React JS required!

Course curriculum

  • 1

    Introduction

  • 2

    [React] - Basics

    • React Setup

    • Hello World App

    • JSX Introduction

    • Functional Component

    • Class Component

    • State in Class Component

    • State Debuggin in Class

    • Arrow Functions

    • State in Functional Component

    • Props

    • Lifecycle function

    • Clean and Recap
  • 3

    [React] - Under the hood

    • Append Child

    • How Application is Loaded
  • 4

    [React] - Application getting shape

    • Initial Layout + Bootstrap

    • Movin layout to components

    • Initial Resource List

    • Add New Resource

    • Toggle Detail View

    • Toggling Refactoring

    • Select Resource

    • Active Item

    • Active Item Improvements
  • 5

    [React] - Working with real data

    • Api Server

    • Api Request

    • Proxy Request

    • Get Resources from API

    • Provide resource to Update

    • Change input value

    • Select Input

    • Resource Form Component

    • Update Resource API Request

    • Update Resource List

    • Set Resource when changing update view

    • Starting with Alert

    • Display Error Function

    • Reset Alert

    • Clear Set Timout

    • Small Alert Issues

    • withAlert

    • Alert Is Done

    • Delete Resource Api

    • Delete Resource From State

    • Delete resource updates
  • 6

    [React] - Routing & Search

    • Routing

    • Links

    • Resource Detail Page

    • Create new resource

    • Create resource - more use cases

    • useGetResources

    • useGetResources fix

    • Resource Detail page

    • Resource Detail Fixes

    • Search resources

    • Refetch Resources

    • Debounce

    • Resource Form Fix
  • 7

    [React] - Prod changes & Deploy

    • Modal React

    • Settings Form

    • Context Start

    • Context Provider

    • Settings Provider

    • Theme styles

    • Heroku and Git Cli

    • Production Server

    • Node + Api Server

    • React testing + End
  • 8

    [Vue] - Basics

    • Vue Init

    • Folder Structure

    • Vue Component

    • Counter

    • Counter View

    • Props

    • Custom Events

    • Event Warning + Scss
  • 9

    [Vue] - Under the hood

    • Insert Before

    • How Vue JS is Loaded
  • 10

    [Vue] - Application getting shape

    • Initial Layout + Bootstrap

    • Moving to components

    • Resources Data

    • V-for Iteration

    • Computed vs method

    • Toggle the view

    • Add Resource

    • Ux Improvements

    • Select Resource

    • Active Item
  • 11

    [Vue] - Working with real data

    • Setup Node API

    • Send a Request

    • Proxy request

    • Set Resources

    • Pass Item to Resource Update

    • Watchers

    • Select Input

    • Updating Resource on Server

    • Update the view

    • Alert Feature

    • Set Alert

    • Get actual error message + timeout

    • Clear Timeout

    • Mixins

    • Delete Resource

    • Resource Delete , View Updates

    • Handle edge cases after delete
  • 12

    [Vue] - Routing + Search feature

    • Router Intro

    • Children Routes

    • Simple Navigation

    • Update Resource Refactor

    • Create resource

    • Resource Detail Page

    • Fetch resource By Id

    • Slots

    • Named Slots

    • Search Resources

    • Search Fixes
  • 13

    [Vue] - Production Changes & Deploy

    • Composition Start

    • Computed composition

    • Hydrate Resources in Composition

    • useSearch

    • Suspense

    • Teleport

    • Modal

    • Settings Form

    • Settings Forms Improvements, storing settings

    • Provide Inject

    • Heroku and Git Cli

    • Production Server

    • Node + Api Server

    • Deployment + Ending
  • 14

    [Ng] - Basics

    • Angular Init Project

    • Files and Folders

    • Creating app component and modules

    • Styles + Binding

    • Decorators

    • Counter Component

    • Counter Components

    • Property Binding

    • Event Binding
  • 15

    [Ng] - Under the hood

    • Append Child Angular

    • How Application is Served
  • 16

    [Ng] - Application getting shape

    • Initial Layout

    • Separating Components

    • Resource Module

    • Resources Data

    • Resource Model

    • NgFor Directive

    • Add Resource

    • More about types

    • Styling resource list

    • NgIF Directive Detail View

    • UX Improvements, changing the view

    • Handle Resource Select

    • Display Selected Resorce

    • Active Resource

    • Selected Item stylings
  • 17

    [Ng] - Working with real data

    • Api Server

    • Get resources http

    • Proxy Request

    • Interfaces

    • Services

    • Template Forms

    • Copy by reference

    • Select Input

    • Update Resource on Server

    • Hydrate Resources

    • Display Alerts

    • Handle Errors

    • Clear timeout

    • Delete Resource Confirmation

    • Delete Resource Done

    • Delete Corner Cases
  • 18

    [Ng] - Routing + Search

    • Base Routing

    • Resource Routing

    • Navigation Links

    • Refactoring of Resource Update

    • Alert Super Class

    • Resource Create Form

    • Resource Create

    • Resource Detail Page

    • Extract Params

    • Get Resource By Id

    • Resource Detail Button

    • Get Searched Value Clasical

    • Search from Event rxjs

    • Search Resources

    • Debounce Search
  • 19

    [Ng] - Prod changes & deploy

    • Modal Ng

    • Settings Form Ng

    • Setting Service Ng

    • Theme Styles

    • Heroku and Git Cli

    • Dist Output path

    • Production Server

    • Node + Api Server

    • Angular Testing + End

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    Of course not! Every lecture is committed (explained in introduction section). You can start watching at any lecture, just download correct version of project attached to lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Vue JS 3, React JS & Angular - Guide to Popular Frameworks"

    $29.00

    Access to this course only.

    Get started now

  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now

  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now