In the process of rendering a web page the static files, such as fonts, HTML, CSS, JavaScript files become a vital blocking resource, it stops downloading the rest of the resource until these critical files are processed. This results in slow web apps due to the entire rendering process being on hold.
These critical resources file impacts a lot on the performance of your web applications, there are several ways to eliminate rendering blocking resources, we can reduce the number of render-blocking resources, or we can shorten the critical rendering path and reduce page load times for improving the user's experience. …
Even after being one of the oldest libraries, it's still being actively maintained. It's localizable and mobile-friendly, built with accessibility, also relies on Moment.js for working with dates which makes it a bit heavy compared to other lightweight libraries.
But lacks in having proper documentation with usage examples, you will only find a Storybook and a few examples on the GitHub repo.
Features:
To Install:
npm install react-dates --save
A very simple and reusable date picker component, you will easily find its documentation with a certain number of examples with all the use cases you can think of. …
Has a very minimalistic approach with a classic and straightforward framework. It doesn't require you to go deeper into the learning curve, all you need is a basic understanding of the Node.js environment.
In every React Native project, you absolutely need to work with a number of colors, but using color names or naming your colors # (eg #f4f5f7) everywhere makes it so harder to manage the project as it gets bigger with time. To solve this issue developers use a different approach, which is making color palettes in the project, and whenever there is a need to apply the same color to the project, you can simply import that palette and use it easily.
For Example:
Here is how to implement this in your React Native Application.
Note: All the Packages have over 10,000+ Github Stars
A great alternative for the Select Component in React.js.
Represents a whole new way of developing powerful React.js components that just work out of the box while being fully customizable.
Highlighted Features
To Install:
npm i react-select
Drap and Drop for React
A set of React utilities to help you build complex drag and drop interfaces while keeping the components decoupled. …
Flux Architecture is simply an architecture for building user interfaces in React. To understand the Flux Architecture we need to first start whats is one-directional data flow pattern in React which will lead us to Flux. You need to understand two key points here, and that is how to separate the code and how to split an application into parts using Flux. These pattern connected together is responsible for everything in modern mobile applications.
To understand Flux Architecture we need to know why we even need it. Observing Facebook who switched to Flux from the Model-View-Controller (MVC) pattern, where we decouple the business model from the view markup and coded logic. …
A fully working audio module created for music apps and provides audio feedback, external media, Chromecast support, and more stuff like background mode.
To Install: npm i react-native-track-player
A React-Native link module for audio recorder and player, it not s playlist audio module and supports simple recorder and player functionality for both (Android & iOS). …
Comparing React to other frameworks the best thing about React is how exposed you are while working with it, as there is no template DSL (JSX compiles to sensible JavaScript), the component API has always been simpler with the addition of React Hooks and the framework offers a very little abstraction outside the core UI elements
Template Literal are enclosed by the backtick (` `) character instead of double or single quotes.
They can contain placeholder and these are indicated by the dollar sign and curly braces (${}) and the expression in the placeholder and the text between the backticks get passed to the function. …
All modern and quality mobile apps prefer the feature of QR code scanning in their mobile apps, you can use this feature in your React-Native easily using this package to add the functionality of scanning QR code.
To Install: npm i react-native-qrcode-scanner
This package is quite handy if you want to add a feature of initiating an immediate phone call feature without any further steps in your apps.
To Install: npm i react-native-immediate-phone-call
You do basic image greyscaling using this package in your apps. Each filter supports all the view props and if you need to combine several filters it is more performant than the corresponding stack of filter components. …
The DOMContentLoaded event, which is triggered at the moment when the browser is done loading and parsing HTML to the unload event, triggered just before the user leaves your site. Events are almost everywhere in a Web App. These events help in determining what just happened in an application & what the user’s state was specific at that time and more.
But the available JavaScript events are not adequate for describing the state of an application.
For example, when a user login fails and you want the parent component to know about the failure, there is no such login- failed event. …
About