2022 React Ecosystem Technology Stack
ReactNext.jsTypeScriptzustand (client-state)React Query (server-state); manages async operations between server and client; if you're dealing with a lot...
Redux-React Single File Example
The following code in a single file is meant to help you understand how to implement redux-react.
const redux = require('redux');
const logger = require('redux-logger').createLogger();
const...
Authentication vs Authorization
Authentication is the process of verifying an identity, e.g. you're actually michael
Authorization is the process of verifying what someone is allowed...
Most Popular Javascript Frameworks and Build-Tools
This website lists all the popular Javascript frameworks and build-tools.
...
How to Preview and Resize Images using React
Have you ever wanted to preview an image in React, but weren't sure how? How about resizing as well?
Here's the simplest example I could come up with...
Nivo: for Dataviz Components
Directly from the website: nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries.
...
React: How to Lazy Load Components
import React from 'react';
const Component = React.lazy(() => import('./Component'));
const preloadComponent = () => { import('./Component');}
export...
Node Versioning
If you'd like to run multiple versions of node on your OS, here's how you do it.
We're going to install the package "n" to do this.
n (for *nix)...
Package.json Semantic Versioning (SEMVER)
This is just a quick post to illustrate semantic versioning.
In your package.json file, what you installed will appear in this versioned format: major.minor.patch
^Major.minor.patch...
Javascript Prototypal Inheritance Model (with Examples)
The following are example javascript statements that make use of an object prototype.
const vehicle = { wheels: 4 }
Object.getPrototypeOf(vehicle)
const...
Alternatives to React Redux for Global State
ZustandMobXOvermindRecoil
For External Data
React QuerySWRApollo ClientURQL
...
What Is JWT and How Do You Use It?
You're probably aware that JWT stands for JSON Web Token, but what is it exactly? And how do you use it? Scroll down to the bottom of the article for...
What Is Webpack and What Problem Is It Solving?
As described in the below article, webpack exists to give us a feature of JavaScript that exists in most other languages by default - modularization.
This...
How to Use ES6 Imports in Node.js
You can learn how to Node.js's ES6 "import" statements at this Stack Overflow URL.
In short, there are two (2) ways:
Save the file with an...
In Browsers, the Object “window” Represents the Global Scope
Any variable or function that's available in the global scope is available from the window object. This is where they're sourced.
For instance, "console.log"...
JavaScript: the Core Elements of the Language
The following series by Alexander Zlatkov provide a deep understanding of the core elements of the JavaScript language. The material is well-researched...
Node.js Event Loop
Articles on the Javascript event loop:
Event Loop: Microtasks and MacrotasksHow Javascript Works Behind the Scenes
The below videos are the best...