how-to-send-push-notifications-with-firebase-and-react
reactjs-master-class
how-to-send-push-notifications-with-firebase-and-react | reactjs-master-class | |
---|---|---|
1 | 6 | |
1 | 189 | |
- | - | |
0.0 | 3.5 | |
almost 2 years ago | 5 months ago | |
HTML | HTML | |
- | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
how-to-send-push-notifications-with-firebase-and-react
-
How to send push notifications with Firebase and React
import React, { useEffect } from 'react' import Box from '@mui/material/Box' import Button from '@mui/material/Button' import LinearProgress from '@mui/material/LinearProgress' import useFirebaseMessaging from '@useweb/use-firebase-messaging' import CopyToClipboard from '../../lib/components/CopyToClipboard/CopyToClipboard' import Text from '../../lib/components/Text/Text' import Header from '../../lib/components/_unique/Header/Header' import useSnackbar from '../../lib/components/Snackbar/Snackbar' export default function HomePage() { const snackbar = useSnackbar() const firebaseMessaging = useFirebaseMessaging({ onMessage: (message) => { console.log(`Received foreground message`, message) snackbar.show({ message: message?.notification?.title || message?.data?.title, }) }, }) useEffect(() => { firebaseMessaging.init() }, []) return ( {firebaseMessaging.initializing && ( <> )} {firebaseMessaging.error && ( )} {firebaseMessaging.fcmRegistrationToken && ( <> Copy )} ) }
reactjs-master-class
-
Learn React & Redux By Building Netflix
/** * Github: https://github.com/hieptl/netflix-clone. * Dev.to: https://dev.to/hieptl/learn-react-by-building-netflix-1127 */ // import react. import { useEffect, useState } from "react"; // import firebase database. import { firebaseDatabase } from "../../firebase/firebase"; // import use dispatch to dispatch action to the store. import { useDispatch } from "react-redux"; // import action types. import * as loadingActionTypes from "../../actions/LoadingActions"; /** * create Row component. * @param {*} props which are passed to the Row component. */ function Row(props) { // create "movies" state to store list of movies from Firebase. const [movies, setMovies] = useState([]); // get props. const { title, movieType } = props; // leafRoot to get data from Firebase. const leafRoot = "movies"; const dispatch = useDispatch(); /** * fetch movies from Firebase when getting "movieType" prop. */ useEffect(() => { fetchMovies(movieType); }, [movieType]); /** * fetch movies from Firebase. * @param {*} movieType which is used to get movies from Firebase. */ const fetchMovies = (movieType) => { dispatch({ type: loadingActionTypes.SHOW_LOADING }); const movieRef = firebaseDatabase.ref(`${leafRoot}/${movieType}`); movieRef.on("value", (snapshot) => { const movies = snapshot.val(); if (movies && movies.length !== 0) { // update "movies" state after getting movies from Firebase. setMovies(() => movies); dispatch({ type: loadingActionTypes.HIDE_LOADING }); } }); }; return (
{/* Title */}); } // export Row component. export default Row;{title}
{/* End Title */} {/* List of Movies */}{movies.map((movie) => ( ))}{/* End List of Movies */} -
Build Big Companies UI by Using HTML, CSS.
I also have a post about learn React by building Netflix: https://dev.to/hieptl/learn-react-by-building-netflix-1127
-
Learn Redux-Thunk By Building Netflix
Github link: https://github.com/hieptl/netflix-clone/tree/main/advanced/netflix-clone-with-redux-thunk
-
Learn Redux By Building Netflix
Dev.to: https://dev.to/hieptl/learn-react-by-building-netflix-1127
- Learn React By Building Netflix
What are some alternatives?
learn-to-send-email-via-google-script-html-no-server - :email: An Example of using an HTML form (e.g: "Contact Us" on a website) to send Email without a Backend Server (using a Google Script) perfect for static websites that need to collect data.
KyberSwap - Codebase for KyberSwap that helps users convert tokens instantly and directly from their own hardware wallets, metamask and so on. No setup, No deposit, no withdrawal needed. Try it out on https://kyberswap.com or join telegram for developers https://t.me/KyberDeveloper.
react-learning-course-short - This repo dedicated to the course "React for Beginners". The course was created to support Ukraine πΊπ¦ and Ukrainians in the war against russia. It's completely free and open-sourced.
master-javascript-design-patterns-by-building-real-projects - Please click :star: if you like the project. Pull requests are highly appreciated :heart:. This is my series about Design Patterns - Implemented by Javascript. My series will help you understand about design patterns by building real projects. For this reason, you can see the places in which each pattern could be applied.
dad-jokes - Simple Angular App for Dad Jokes: Angular + Progressive web Apps using PWAFIRE
env-variables-react - How to Use Environment Variables in React
upload-preview-image-react - How to Upload and Preview Image in React
starter-demo - Simple Vite app for devs to start tutorials
gapi-firebase - An example of how to use GAPI and Firebase Auth together to authenticate users and talk to Google APIs.
redux - A JS library for predictable global state management