Steps to Create a React App

Step 1: Create a React application using the following command:

npx create-react-app pwa-application

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd pwa-application

Step 3: Install the required dependencies in your project using the following command:

npm install axios

Project Structure:

The updated dependencies in your packge.json file is:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "axios": "^1.6.7",
},

CSS

/* App.css */

.app-container {
    padding: 20px;
}

.movie-list {
    list-style: none;
    padding: 0;
}

.movie-item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.movie-poster {
    margin-right: 10px;
    width: 100px;
    /* Set a fixed width for the poster images */
    height: auto;
    /* Maintain aspect ratio */
}

JavaScript

//App.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';

const API_KEY = 'paste your api key here';
const MOVIE_API_URL = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
const BASE_IMAGE_URL = 'https://image.tmdb.org/t/p/w200';

function App() {
    const [movies, setMovies] = useState([]);

    useEffect(() => {
        axios.get(MOVIE_API_URL)
            .then((response) => {
                setMovies(response.data.results);
            })
            .catch((error) => {
                console.error('Error fetching the movies:', error);
            });
    }, []);

    return (
        <div className="app-container">
            <h1>Popular Movies</h1>
            <ul className="movie-list">
                {movies.map((movie) => (
                    <li key={movie.id} className="movie-item">
                        <img
                            src={`${BASE_IMAGE_URL}${movie.poster_path}`}
                            alt={movie.title}
                            className="movie-poster"
                        />
                        <strong>{movie.title}</strong>
                        (Release Date: {movie.release_date})
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default App;

JavaScript

// serviceWorker.js

//STORAGE OF BROWSER
const CACHE_NAME = "version-1";
const urlsToCache = ["index.html", "offline.html"];
const self = this;

//installation
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log("Opened cache");

      return cache.addAll(urlsToCache);
    })
  );
});

// listen for request
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((res) => {
      return fetch(event.request).catch(() => caches.match("offline.html"));
    })
  );
});

// actitivate the service worker
self.addEventListener("activate", (event) => {
    const cacheWhitelist = [];
    cacheWhitelist.push(CACHE_NAME);
    event.waitUntil(
        caches.keys().then((cacheNames) => Promise.all(
            cacheNames.map((cacheName) => {
                if(!cacheWhitelist.includes(cacheName)){
                    return caches.delete(cacheName);
                }
            })
        ))
    )
});

Start your application using the following command:

npm start

Output:

Final output

How do you Make React App a PWA ?

Progressive Web Apps (PWAs) have emerged as a game-changer, offering a blend of website accessibility and native mobile app capabilities, thereby presenting the best of both worlds.

Table of Content

What is a Progressive Web App (PWA)?
Key Features of PWA
Steps to Transform Your React App into a PWA
Get TMDb API Key
Enable HTTPS
Add a Web App Manifest (WAM): (manifest.json)
Register a Service Worker:(optional, but recommended for core PWA features)
Implementing Offline Functionality
Register the Service Worker (index.js)
Enabling Push Notifications (Optional)
Conclusion

Steps to Create a React App

Project Structure:

How do you Make React App a PWA ?

Categories

Contact US

Steps to Create a React App

Project Structure:

How do you Make React App a PWA ?

Similar Reads

Categories

Contact US