Transform a React Application into a Progressive Web App (PWA) Training Course
React is a JavaScript library designed for building front-end web applications. Progressive Web Apps are web-based applications that behave and look like native apps on Android, Windows, and other platforms. Converting a React application allows you to integrate native features such as offline access and push notifications.
This instructor-led, live training (available online or onsite) is targeted at developers who want to convert their React applications into Progressive Web Apps.
Upon completion of this training, participants will be able to:
- Set up the required development environment to begin converting a React application.
- Use Service Worker caching to enable offline functionality for a React application.
- Create and style push notifications.
- Install the Progressive Web App on a mobile device.
Course Format
- Interactive lectures and discussions.
- Extensive exercises and practical sessions.
- Hands-on implementation in a live-lab environment.
Customization Options
- To request 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
Target Audience
- Developers
Need help picking the right course?
southafrica@nobleprog.co.za or +27 (0)10 005 5793
Transform a React Application into a Progressive Web App (PWA) Training Course - 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)
Related Courses
Advanced Progressive Web App (PWA)
14 HoursThis instructor-led, live training Nigeria (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.
Advanced React
21 HoursThis instructor-led, live training in Nigeria (online or onsite) targets developers who aim to build React components and design complex applications.
By the end of this training, participants will be able to:
- Understand advanced React concepts, such as 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.
FARM (FastAPI, React, and MongoDB) Full Stack Development
14 HoursThis instructor-led live training (available online or onsite) is tailored for developers who want to utilize the FARM (FastAPI, React, and MongoDB) stack to build dynamic, high-performance, and scalable web applications.
By the end of this training, participants will be able to:
- Set up the necessary development environment that integrates FastAPI, React, and MongoDB.
- Understand the key concepts, features, and benefits of the FARM stack.
- Learn how to build REST APIs with FastAPI.
- Learn how to design interactive applications with React.
- Develop, test, and deploy applications (front end and back end) using the FARM stack.
Choosing the Right JavaScript Framework
14 HoursThis instructor-led, live training in Nigeria (onsite or remote) is aimed at developers who need to decide which JavaScript framework to use to develop front-end applications.
By the end of this training, participants will be able to:
- Set up an optimal development environment to start developing front-end applications.
- Implement demo applications to test the limitations and benefits of a JavaScript framework.
- Decide on which JavaScript framework is the best fit.
JavaScript, Node JS and React Bootcamp (Beginner to Intermediate Level)
35 HoursThis instructor-led, live training in Nigeria (online or onsite) is aimed at beginner-level .NET developers who wish to gain proficiency in JavaScript, Node.js, and React to actively develop and migrate systems or platforms.
By the end of this training, participants will be able to:
- Write and debug JavaScript code effectively.
- Build and deploy server-side applications using Node.js.
- Develop dynamic and responsive user interfaces with React.
- Integrate front-end and back-end components to create full-stack applications.
- Understand best practices for migrating legacy systems to modern JavaScript-based platforms.
MERN Fullstack Development
14 HoursThis guided, live training in Nigeria (available online or on-site) is tailored for web developers who aim to utilize the MERN Stack for fullstack development.
Upon completion of this training, participants will be able to:
- Integrate React with MongoDB, Express, and Node.js.
- Develop a fullstack web application from the ground up.
- Enhance application security through effective authorization and authentication mechanisms.
Building Micro Frontends with React
21 HoursThis instructor-led, live training in Nigeria (online or onsite) is designed for developers who wish to use React to develop, test, and deploy micro-frontends for large web applications, ensuring they are highly scalable, technology-agnostic, and easier to maintain.
By the conclusion of this training, participants will be able to:
- Configure the essential development environment to begin building micro-frontends with React.
- Grasp the architecture, fundamental concepts, and benefits of micro-frontends.
- Master the processes of building, integrating, testing, and deploying micro-frontends using React.
- Implement micro-frontends via module federation.
- Apply production-grade CI/CD pipeline workflows.
- Identify common CSS challenges in micro-frontends and learn how to resolve them.
- Gain insights into integrating other frontend frameworks with React.
Building Microservices with NodeJS and React
21 HoursThis instructor-led, live training in Nigeria (online or onsite) is designed for experienced developers looking to build, deploy, and scale applications using microservices powered by NodeJS and React.
Upon completion of this training, participants will be able to:
- Develop, deploy, and scale applications using various microservices.
- Construct a server-side rendered React application.
- Deploy multi-service applications to the cloud utilizing Docker and Kubernetes.
- Conduct application testing on microservices.
Next.js 14 Advanced Development
21 HoursThis instructor-led, live training in Nigeria (online or onsite) is designed for intermediate to advanced 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.
Next.js 14 - Advanced
21 HoursThis instructor-led, live training in Nigeria (online or onsite) is tailored for advanced developers eager to master the latest features of Next.js 14, enhance performance, and apply modern React techniques.
Upon completing this training, participants will be equipped to:
- Implement advanced React hooks and concurrent features.
- Understand and effectively apply Next.js routing strategies.
- Utilise Server Components, Server Actions, and hybrid rendering approaches.
- Optimise data fetching, caching mechanisms, and incremental static regeneration.
- Leverage Next.js as a backend solution using Edge Functions and Edge Runtime.
- Manage state effectively with React Context, Redux, and atomic state libraries.
- Enhance application performance to meet Web Core Vitals standards.
- Test, monitor, and deploy Next.js applications efficiently.
Progressive Web Apps (PWA)
14 HoursIn this instructor-led live training Nigeria (onsite or remote), participants will learn how to develop their first Progressive Web App by working through a series of hands-on exercises, culminating in the creation and deployment of a functional PWA.
React: Build Highly Interactive Web Applications
21 HoursIn this instructor-led live training in Nigeria, we demonstrate React's power and flexibility, compare it to alternative frameworks, and guide 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.
Building Interactive Applications with React, Redux and GraphQL
28 HoursIn this instructor-led, live training in Nigeria, 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 with Next.js
14 HoursThis instructor-led, live training in Nigeria (online or onsite) is designed for 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.
React Patterns
14 HoursThis instructor-led live training (available online or on-site) is designed for developers with existing React expertise who want to enhance their React application development by understanding and implementing React's component patterns.
Upon completion of this training, participants will be able to:
- Comprehend the various types of React Patterns
- Utilize the React Context API for web applications
Course Format
- Interactive lectures and discussions.
- Extensive exercises and practical sessions.
- Hands-on implementation in a live lab environment.
Course Customization Options
- To request customized training for this course, please contact us to arrange.
- To learn more about React, please visit: https://reactjs.org