Let’s build a good looking notification system for React that has no dependencies and doesn’t need a state manager. There is a time (hopefully early on in the project) were the dev team must ditch the console.logs and inconsistent error labels and define a unified way to show notifications to users.
There is a time (hopefully early on in the project) were the dev team must ditch the console.logs and inconsistent error labels and define a unified way to show notifications to users.
Let’s build a hyper lightweight notification system that has no dependencies other than the standard react libraries and doesn’t need a state manager. Using a state manager will definitely improve the features we can add to the system, but let’s save that for a future post.
A functional demo can be found on Github: **[https://github.com/agustincastro/react-notifications**](https://github.com/agustincastro/react-notifications)
As the previous image shows I’ll use the popup’esque style of notifications sometimes called Snackbars. Everything about the style I presented can be easily changed, I just aim to present the approach.
Let’s begin adding our hook tab in the _index.html _of our public files.
We can create the Snackbar component, create a _SnackBar.js _file in your components folder of your react project and add the following content.
This component will look horrible without styles, let’s create a css file for the component or add them directly if you use styled components. The images and fonts used can be found in the sample Github project.
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Look at three different React code examples from a beginner, intermediate, and advanced web developer. How senior developers think. How to use React state properly. How to use React useEffect properly. What to think about when programming. The differences between senior and junior developers
Here is an update to my coding journey! I'm currently learning React now. Eventually, I'll learn some backend languages, but first I want to learn enough React so I can start building some projects.