In this tutorial, we will create a React Todo Progressive Web App. A progressive web app refers to an enhanced web application having the same capabilities as a native platform-specific application by utilizing the emerging browser APIs. The Progressive Web Apps are intended to be fast, reliable, and engaging.
Prerequisites Knowledge of the JavaScript programming language.
Basics of React library. Check documentation here.
A code editor. I will be using VS Code.
Node.js installed on your computer. You can download the latest version here.
Getting started
Let’s start by creating a new React application using create-react-app command-line utility. On your terminal, execute the following command:
npx create-react-app react-pwa --template cra-template-pwa
This will create a folder named react-pwa. The argument --template cra-template-pwa is added to create an app with a service worker for Progressive Web App functionality since version 4 or later will not provide a built-in service worker.
You can now open the project in your favorite code editor.
The folder structure will initially look similar to this:
node_modules/
public/
|--- favicon.ico
|--- index.html
|--- logo192.png
|--- manifest.json
|--- robots.txt
src/
|--- App.js
|--- App.css
|--- App.test.js
|--- index.js
|--- index.css
|--- service-worker.js
|--- serviceWorkerRegistration.js
|--- setupTest.js
|--- logo.svg
.eslintcache
.gitignore
package.json
package-lock.json
README.md
Our React code will be in the src folder. Inside this folder, delete the logo.svg and remove everything in both App.css and App.js files before we start to build the application.
Creating UI components We will have to break our application into components that represent the logical parts of the application.
We’ll have four components:
The App component.
The Form component.
The TodoList component.
The Todo component.
In a moment ... This project will be hosted on my Github Repo. For more, check the full article here.