In this tutorial, we will build an E-commerce App with React using ButterCMS and Snipcart. We will use Chakra UI, a modular and accessible component library, to style the app.
If you want to jump right into the code, check out the GitHub Repo here.
And here’s a link to the deployed version: https://yakscythe-49dgnn.stormkit.dev/.
Callback is a function that is passed as an argument to another function and its execution is delayed until that function in which it is passed is executed.
Meaning, if I pass a function, let’s say
function1 to another function, i.e.,
function1 will not be executed until
function2 is executed.
Callbacks are a fundamental part of Functional Programming, and you may be already using them without knowing; methods like…
Many developers struggle to understand topics like Callbacks, Promises, and Async/Await, one of the reasons may be not understanding the actual need and core logic behind them.
Having a good grasp of this topic can help you understand them more easily.
This can be better explained with the help of an example.
Imagine you gave your friend a set of tasks:
What your friend now…
In this article, we will be discussing what
dangerouslySetInnerHTML is, how it is used, what the differences are between
innerHTML, and a real project where it proves to be useful.
dangerouslySetInnerHTML is an attribute under DOM elements in React.
According to the official documentation,
dangerouslySetInnerHTML is React’s replacement for using
innerHTML in the browser DOM.
This means that if in React if you have to set HTML programmatically or from an external source, you would have to use
dangerouslySetInnerHTML instead of traditional
In simple words, using
dangerouslySetInnerHTML, you can set HTML directly from React.
The full version is deployed at https://poke-mon.now.sh/
This project is inspired by Chris on…
Object literal property values can be of any data type, including array literals, function literals, and nested object literals.
Consider a scenario in which you have to put different variables inside an object. One way of doing it is:
Before we start discussing what hoisting is, let us first look at a simple example:
Pretty straightforward: I declared a variable, initialized some value to it, and then logged it in the console.
Now let's look at the definition of hoisting:
Simply put, it means no…
Sets are a new object type included in ES6 that allow the creation of collections of unique values. The values in a set can be either simple primitives like strings and integers or more complex object types like object literals or arrays. Think of sets as an array with no repeated elements.
There are many instances where we have an array containing many elements that we want to convert to a unique array. While it can be done by brute force on the array, checking elements, using loops, distinct callback method, etc., the best method is using set().
This post discusses three different ways to define functions:
Probably the most common way to declare a function. Let’s look at its syntax:
Function Declaration comprises of…