Udemy

Platform

English

Language

Web Development

Category

Learn React by building a Progressive Web App (PWA)

Build and deploy - Real world Movie Browser Progressive Web Application (PWA) using the latest version (17.0.2) of React

4.65 (21 reviews)

Students

3 hours

Content

May 2021

Last Update
Regular Price

EXCLUSIVE OFFER
Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

React fundamentals

Creating Stateful and Stateless components

Create Single-Page-Application (SPA) using React-Router-DOM

Access RESTful services from 3rd party service providers (Open Movie Database API)

Make the React application a PWA using ServiceWorker

Build a production version of our app

Deploy our app on Google's Firebase hosting service


Description

A Progressive Web App or PWA is a web application that has a set of capabilities (similar to native apps) which provide an app-like experience to users. PWAs need to meet a set of essential requirements that we'll see next. PWAs are similar to native apps but are deployed and accessible from web servers via URLs, so we don't need to go through app stores.


A PWA needs to be:

  • Progressive: Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.

  • Responsive: Fit any form factor, desktop, mobile, tablet, or whatever is next.

  • Connectivity independent: Enhanced with service workers to work offline or on low-quality networks.

  • App-like: Use the app-shell model to provide app-style navigation and interactions.

  • Fresh: Always up-to-date thanks to the service worker update process.

  • Safe: Served via HTTPS to prevent snooping and ensure content has not been tampered with.

  • Discoverable: Are identifiable as "applications" thanks to W3C manifests and service worker registration scope allowing search engines to find them.

  • Re-engageable: Make re-engagement easy through features like push notifications.

  • Installable: Allow users to "keep" apps they find most useful on their home screen without the hassle of an app store.

  • Linkable: Easily share via URL and not require complex installation.


In detail, this course will cover everything you need to build amazing PWAs - leading to a score of 100 (out of 100) in Google's PWA auditing tool "Lighthouse".


For a long time, JavaScript has been the key element of the world wide web. Historically, it's been used for front end validations, dynamic menus, making some AJAX requests etc.


But things have changed since the introduction of Single Page Applications (SPAs). React JS makes it very easy for us to create such SPAs.


Developers at Facebook reased a completely different kind of framework called React (or ReactJS), which uses a combination of plain JavaScript and HTML elements (in XML syntax), called JSX. Unlike the Angular framework, this one simply addresses the View part of MVC. The main goal of a React application is to breakdown the entire web application into a bunch HTML-like elements called Components. A component defines the visual appearance of your UI, while converting the data it holds into user interface elements.


Using these components, you can quickly develop amazing and powerful web apps. These components are completely reusable.


By the end of the course, you can build amazing React (single page) applications!


Who's teaching you in this course?


My name is Vinod Kumar Kayartaya, I'm a freelance web developer, consultant and a full time professional software trainer. All of my Udemy courses have received a very warm appreciation with very good ratings.


Since I have an enormous experience in the I.T. teaching industry, I know exactly what a student is looking for when learning a new technology. This way, I would have answered your question, even before you ask them.


For all of my courses, I start from the very basic installation of softwares and tools, and get you started with coding.


NO advanced JavaScript knowledge is required, though you'll be able to move even quicker through the course if you know next-gen JavaScript features like ES6 Arrow functions. Whatever the necessary ES 6/7/8 features that we will be using in React applications, are covered before that (Refer Appendix-A)

This is completely a hands-on training, bringing all the best practices that a developer should follow in his/her projects.


Here are some of the feedbacks given by my students:

-----

Best instructor and best trainer on Udemy. Quick Response and very friendly .i have been checked out many angularJS courses (very long tutorials) around 30 hours on Udemy. but vinod Sir within 5 & 6 hours who taught every things very simple.he has good knowledge and good experience on Teaching method.i recommend this course .?? (Sithat iffazer)

-----

This is a great and simple course for beginners. Wish the Author build more courses like this for angular 7. With a real DB, auth etc... Thanks and ThumbUp

-----

The Course was clear and concise and touches upon the important Angular features. (Harsh Kedia)

-----

Step by step learning,explain everything easy and clear. Perfect for beginners! (Dragan Stevanovic)

-----

I have not yet completed the course. But I am very much confident, after completing this course, it would be wonderful experience. So far it's going very well. This course is simply superb. The tutor - Vinod, is simply great. He explained difficult concepts in a simplest way. He knows how to make a teaching session an interesting and informative one. Thanks to you Udemy for this opportunity and special thanks to Vinod. (Venkatesh)

-----

Very helpful. I like the way trainer Vinod makes things so simple to understand. (Robinet Gimlet)

-----

Very detail oriented. Explained all possible ways in each section i.e. environment setup(eclipse, tomcat, h2 DB), application development to deployment, testing with postman, error handling, eclipse shortcuts. (Hemalatha Bhimavarapu)

-----

I got to learn so many new things from this course and very well explained, Thank you! (Tushar Patil)

-----

It is very well and detailed any one can understand and learn the course. I would recommend it to others. (Ashwini Iyer)

-----

Great Course, the instructor was easy to follow and help me understand the subject better. Thank u. (Aida Hailu)


------------------------------------------------------------------

So, see you inside the course,

Vinod.


Screenshots

Learn React by building a Progressive Web App (PWA)
Learn React by building a Progressive Web App (PWA)
Learn React by building a Progressive Web App (PWA)
Learn React by building a Progressive Web App (PWA)

Content

Introduction

Course intro

A quick intro to React

Software setup

Download the finished project

React basics

Create a new React application

Clean up and refactor our application

Adding Bootstrap CSS library

The Header component

The Home component

The open movie database

The OMDB Api

Get the OMDB API-Key

More components

The MovieCard component

The MovieList component

Using 'props'

Getting data from OMDB API for MovieList component

Routing and Single-Page-Application (SPA)

Setting up the Routes

Handling query string parameters

Changing route paths programatically

Using the 'Link' to switch components

The MovieDetails component

Build and deploy

Creating a production build

Create a Google Firebase Project

Install Firebase CLI (firebase-tools)

Initialize the Firebase project

Deploy the production build on Firebase hosting

Progressive Web Application (PWA)

Chrome's Lighthouse auditing tool

What is a Progressive Web App?

Creating icons for our app

A closer look at manifest.json

Enabling ServiceWorker

Redeploy and re-evaluate our App on Lighthouse

Finally...

Thank you note and a bonus lecture


Reviews

S
Shaun1 February 2021

Great kick-start into React, particularly if you are already proficient with another front-end UI framework or library (Angular 2+ here). I really liked the Firebase addition, something I definitely plan to use for personal projects.

E
ERICK14 June 2020

Well you will build a very basic PWA and is pretty much focused on React than PWA. Consider this before buying this course.


2871224

Udemy ID

3/14/2020

Course created date

4/3/2020

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram