Learn React by developing a Progressive Web App (PWA) by Vinod Kayartaya

Learn React by developing a Progressive Web App (PWA)

32 lectures - 3 hr 7 mins

What's included?

Video Icon 30 videos File Icon 1 file

Course content

Introduction
Introduction
5 mins
A quick intro to React
4 mins
Software setup
7 mins
Download the finished project
1.01 MB
React basics
Create a new React application
7 mins
Clean up and refactor our application
10 mins
Adding Bootstrap CSS library
4 mins
The Header component
10 mins
The Home component
6 mins
The open movie database
The OMDB Api
3 mins
Get the OMDB API-Key
3 mins
More components
The MovieCard component
9 mins
The MovieList component
6 mins
Using 'props'
6 mins
Getting data from OMDB API for MovieList component
10 mins
Routing and Single-Page-Application (SPA)
Setting up the Routes
6 mins
Handling query string parameters
6 mins
Changing route paths programatically
16 mins
Using the 'Link' to switch components
3 mins
The MovieDetails component
19 mins
Build and deploy
Creating a production build
4 mins
Create a Google Firebase Project
5 mins
Install Firebase CLI (firebase-tools)
4 mins
Initialize the Firebase project
4 mins
Deploy the production build to Firebase hosting
7 mins
Progressive Web Application (PWA)
Chrome's Lighthouse auditing tool
5 mins
What is a Progressive Web App?
11 mins
Creating icons for our app
7 mins
A closer look at manifest.json
3 mins
Enabling ServiceWorker
4 mins
Redeploy and re-evaluate our App on Lighthouse
6 mins

Requirements

  • Basic knowledge of HTML/CSS/JavaScript

What will you learn in this course?

  • 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!

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.

Hi. My name is Vinod

Hi, my name is Vinod, and I am a software trainer, consultant and freelance developer. I am the creator some of the highest rated courses on Udemy. In my professional career, I have trained hundreds of thousands of software engineers. Teaching is not only my profession, but also a passion. Creating online courses gives me the opportunity to reach and help students across the world.