Transform a React Application into a Progressive Web App (PWA) Training Course
React is a JavaScript library used to create front-end web applications. Progressive Web Apps are web applications that function and appear like native applications on Android, Windows, and more. Transforming a React application integrates native features such as offline usability, push notifications, etc.
This instructor-led, live training (online or onsite) is aimed at developers who wish to transform a React application into a Progressive Web App.
By the end of this training, participants will be able to:
- Set up the necessary development environment to start transforming a React application.
- Cache using Service Worker to make a React application work offline.
- Create and style a push notification.
- Install the progressive web app into a mobile device.
Format of the Course
- Interactive lecture and discussion.
- Lots of exercises and practice.
- Hands-on implementation in a live-lab environment.
Course Customization Options
- To request a customized training for this course, please contact us to arrange.
Course Outline
Introduction
React and JavaScript Libraries
- Processes used in JavaScript libraries to develop web applications
Overview of the Web Application Development Cycle
- Native applications versus progressive applications
- Javascript logic, CSS templates, and HTML templates
React Goes Native with Progressive Web Apps
- Cross-platform
- Backward compatibility
- Feature parity
Progressive Web Apps and Push Notifications
- Push API
- Notification API
Preparing the Development Environment
- Installing and configuring Node.Js
- Installing and configuring NPM
Programming and Optimizing the React Application
- Creating a new boilerplate React application
- Installing dom routers to navigate and save in the React application
- Coding a todo list
- Updating the default styles
- Registering Service Worker
Configuring Icons and Push Notifications
- Creating and styling push notification
- Creating and styling icons
Deploying the Application
- Runnng the React application on a mobile simulator or on a mobile device
Testing the Application
- Proof checking the React application with Lighthouse to determine if it meets the PWA standard
Summary and Conclusion
Requirements
- Experience with React
Audience
- Developers
Need help picking the right course?
Transform a React Application into a Progressive Web App (PWA) Training Course - Booking
Transform a React Application into a Progressive Web App (PWA) Training Course - Enquiry
Transform a React Application into a Progressive Web App (PWA) - Consultancy Enquiry
Testimonials (1)
The general knowledge sharing by Narendra and all the dev resources shared
Pako Diale
Course - Transform a React Application into a Progressive Web App (PWA)
Upcoming Courses
Related Courses
React with Next.js
14 HoursThis instructor-led, live training in the UAE (online or onsite) is aimed at web developers who wish to use Next.js to create React applications.
By the end of this training, participants will be able to:
- Develop server-side web applications and static sites in Next.js.
- Handle and store data with MongoDB.
- Secure a web application with AuthO authentication.
Next.js 14 Advanced Development
21 HoursThis instructor-led, live training in the UAE (online or onsite) is aimed at intermediate-level to advanced-level web developers and technical architects who wish to explore the advancements of Next.js 14 and gain the knowledge to build cutting-edge web applications.
By the end of this training, participants will be able to:
- Leverage the full potential of Next.js 14 for building complex applications.
- Utilize the latest features such as Middleware, React Server Components, and Edge Functions.
- Implement best practices for performance, scalability, and SEO.
- Troubleshoot common issues in Next.js applications effectively.
Managing React State with MobX
14 HoursThis instructor-led, live training in the UAE is aimed at developers who wish to use MobX in their React applications to more effectively manage state.
By the end of this training, participants will be able to:
- Set up MobX in React.
- Understand the uses cases for MobX, as compared to Redux (e.g., MobX's "classical paradigm" vs Redux's "functional paradigm").
- Use MobX as an advanced state layer for React applications.
Material UI
7 HoursThis instructor-led, live training in the UAE (online or onsite) is aimed at developers who wish to use Material UI to speed up the development of well-designed UIs for React applications.
By the end of this training, participants will be able to implement Material UI's React components to develop beautiful enterprise-class web applications.
Ant Design
7 HoursThis instructor-led, live training in the UAE (online or onsite) is aimed at developers who wish to use Ant Design to enhance the User Experience for their React application.
By the end of this training, participants will be able to implement Ant Design's React components to develop beautiful enterprise-class web applications.
Progressive Web Apps (PWA)
14 HoursIn this instructor-led, live training the UAE (onsite or remote), participants will learn how to develop their first Progressive Web App as they step through a series of hands-on exercises culminating in the creation and deployment of a functional PWA.
Advanced Progressive Web App (PWA)
14 HoursThis instructor-led, live training the UAE (onsite or remote) is aimed at developers who wish to create advanced Progressive Web Apps that perform exclusive functions related to push notifications and offline availability.
By the end of this training, participants will be able to:
- Set up the necessary development environment to start developing an advanced Progressive Web App.
- Create push notifications that enable subscriptions.
- Cache with Service Worker to make a web application work offline.
- Create push notifications that prompt frequent visitors to install the application.
Transform a Drupal Website into a Progressive Web App (PWA)
14 HoursThis instructor-led, live training in the UAE (onsite or remote) is aimed at developers who wish to transform a Drupal website or web application into a Progressive Web App.
By the end of this training, participants will be able to:
- Set up the necessary development environment to start transforming a Drupal website into a Progressive Web App.
- Create and style push notifications.
- Cache with Service Worker to make a Drupal website work offline.
React: Build Highly Interactive Web Applications
21 HoursIn this instructor-led, live training in the UAE, we demonstrate React's power and flexibility, compare it to alternative frameworks, and walk participants step-by-step through the creation of their own React application.
By the end of this course, participants will be able to:
- Understand React's design philosophy.
- Decide when and where it makes sense to use React, and when to rethink the conventional MVC model.
- Understand React concepts such as components, props, state, and lifecycle.
- Implement related technologies such as Babel, Webpack, and JSX.
- Build, test and deploy an interactive web application.
Relay: Efficiently Fetch Data in React Applications
14 HoursRelay is a JavaScript framework for building data-driven React applications. GraphQL is a data querying language for describing complex, nested data dependencies in modern applications. Together they allow an application's components to be moved anywhere in a render hierarchy without having to apply a cascade of modifications to parent components or to the server code which prepares the data payload. Relay is being used by Facebook in various mobile app projects.
In this instructor-led, live training, participants will learn how to apply key Relay concepts such as declarative specification of data dependencies, collocation and mutation to build a React application using Relay and GraphQL.
By the end of this training, participants will be able to:
- Use Relay to compose data queries into efficient batches, provide each component with exactly the data that it requested, update the components when the data changes, and maintain a client-side store (cache) of all data.
- Collocate queries and the view's code to more easily reason about a components functionality
- Use GraphQL to declare data requirements while allowing Relay to fetch the data on its own
- Understand the concept of mutating data on the client and server using GraphQL mutations
- Understand the differences between Relay and Flux, in particular how "mutations" implement the concept of actions and modifications
- Use routes to determine which data to fetch to render a given component
- Make changes in relative isolation, even in large team projects
- Create correct, high-performance applications in a straightforward and obvious way
Audience
- Developers
Format of the course
- Part lecture, part discussion, exercises and heavy hands-on practice
Building Interactive Applications with React, Redux and GraphQL
28 HoursIn this instructor-led, live training in the UAE, participants will learn how to build React applications using Flux and GraphQL. The course covers installation, setup, integration, testing, deployment and best practices as it walks participants through the creation of a series of sample applications that demonstrate how to add additional levels of complexity and "coolness" to an application using the most advanced toolkits and techniques.
Developing applications with React requires a different kind of thinking, compared to what some developers are accustomed to, especially when coming from the mindset of other MVC frameworks such as AngularJS and Bootstrap.
This training covers the fundamentals behind of the technologies used each step of the way so that participants are not only able to build a functional application, but also understand why a particular approach is used. This lays the groundwork for thinking independently and creatively about the design and the desired results for building their own applications in the future.
React, Redux and TypeScript
21 HoursReact is a widely-used library for creating single page applications in JavaScript and HTML. It is used by companies such as Facebook, Instagram, Netflix or the New York Times.
This course will introduce the foundations on which React and other libraries (like Angular and Vue.js) are based on and highlight the sepecifics of React. It will also cover technologies that are commonly used with React, like Redux and React-Router.
By the end of this course participants will be able to build applications of various complexity with React while adhering to best practices.
React Patterns
14 HoursThis instructor-led, live training (online or onsite) is aimed at developers with React skills who wish to optimize and improve their creation of React applications by understanding and applying React's component patterns.
By the end of this training, participants will be able to:
- Understand the different types of React Patterns
- Use React Context API for web applications
Format of the Course
- Interactive lecture and discussion.
- Lots of exercises and practice.
- Hands-on implementation in a live-lab environment.
Course Customization Options
- To request a customized training for this course, please contact us to arrange.
- To learn more about React, please visit: https://reactjs.org
Testing React Apps with Jest
14 HoursThis instructor-led, live training in the UAE (onsite or remote) is aimed at engineers who wish to use Jest to test React applications and components.
By the end of this training, participants will be able to:
- Install and configure a proper testing environment.
- Write asynchronous tests for React apps and components.
- Run Jest advanced tests that include mocking, spies and stubs.
Advanced React
14 HoursThis instructor-led, live training in the UAE (online or onsite) is aimed at developers who wish to build React components and design complex applications.
By the end of this training, participants will be able to:
- Understand React's advanced concepts, including context APIs, HOCs, external state, asynchronous APIs, etc.
- Build composable components with React.
- Enable server side and client side authentication.
- Implement React and Redux libraries to manage complex stateful applications.
- Reduce code and optimize an application's performance.
- Test and deploy an application.