Use Cases

As a web developer you should be comfortable manipulating the DOM and performing other side effects now and then. With React’s useEffect hook, you can easily manage and perform side effects in function components. Examples of side effects in React include:

• Data fetching
• Setting up a subscription
• Manually changing the DOM
• Other mutations, timers, logging, etc.

How Does it Work?

useEffect accepts a function, and runs this function after every completed render. It also accepts an optional second argument, a dependency array. If a dependency array is passed in, React will know to re-run the effect only when values (state/props) inside the dependency array change. …

What are Hooks?

With the introduction of Hooks in React 16.8 (released February 16, 2019), you can now use state in a functional component. These built-in functions “hook” into React’s state and lifecycle methods — no more complicated “this”, binding, passing state around in class components!

The 3 basic built-in hooks are useState, useEffect, and useContext. You can also write your own custom hooks to use state. In this post we’ll be focusing on the most useful hook, useState that will greatly simplify reading and writing code in React.

Use cases:

• An array of items you want to buy in an e-commerce store
• A string containing a color value that updates the background…

JavaScript is comprised of 9 fundamental types of values. Of the 9 types, 7 are primitive. My last article covered the importance of understanding primitive values here. The remaining 2 types are Objects and Functions, and I will go into detail about them here.

• Objects ({}, []) used to group related data and code.
• Functions (x => x * 2), used to refer to code.

Objects

When you think about objects, you typically think curly braces {} but arrays, dates, regular expressions and any other non-primitive values are objects as well. You can check using the typeof() operator.

typeof({}); // “object”
typeof([]); // “object” 
typeof(new Date()); // “object” 
typeof(/(water|soda)); // “object”
typeof(Math)); //…

Increment Operator ++

If you have a basic understanding of any programming language then you’re likely familiar with for loops and have probably used the ‘++’ operator. The increment operator written as ‘++’ adds one to its operand and the decrement operator ‘ — — ’ subtracts one from its operand.

Languages that support the ++/ — — increment/decrement operators include: C++, C#, Go, Java, JavaScript, PHP and more.

for (var i = 0; i < 3; i++) {
  console.log(i);
}Output: 
0     // i = 0, increment by 1 => i = 1
1     // i = 1, increment by 1 => i = 2
2     // i = 2, increment by 1 => i = 3, i is not < 3, loop…

What is a Function and What is its Purpose?

A function is a type of procedure or routine used to perform a specific task. Imagine you needed to convert measurements of baking ingredients every time you needed a new ingredient or used a new recipe. If you could simply plug in your measurement into a conversion table that has already done the work for you, wouldn’t you? Functions are useful when you need to do the same task over and over again.

How Do You Read it? (JS Function Syntax)

A function is declared with the function keyword “function”, followed by the identifier — what you choose to name the function and a set of parentheses (). …

Looking to be productive and build a project during this downturn but don’t know where to start? I’ve broken down the thought process of how to drill down and decide on a project idea that you would be both passionate about and proud of!

Find your Passion [Project]

To decide on a project that you would be passionate about, you need to first find your passion. If you’re passionate about your project, you’ll be excited and naturally driven to put in the energy and effort needed to make an awesome app that you would be proud of. …

How to host images on Cloudinary with React SDK, for free and directly transform your images without additional photo-editing tools.

So, you added the super cool functionality for users to upload their own images to your app (using local Storage if you built your app with Ruby on Rails) and it no longer works on Heroku? At first glance, it may seem to work but those images won’t persist and will not be there the next time you access your app, so you now need a different storage solution. Cloudinary to the rescue!

A note on SDKs

A software development kit (SDK) is a collection of tools compiled into one installable package. Think of a model airplane kit — the pieces, tools and instructions included to build the model plane. In the same way, an SDK provides the tools, libraries and guides for a software developer to create applications on a specific platform. …

Using Git and the Heroku CLI for macOS, including continuous delivery with pipelines.

The most exciting part of a project by far is seeing it come to life, live, online, for the world to see. That feeling of accomplishment after weeks on end of frustration as each new feature breaks and wrestling with debugging day after day finally comes to a close (..for the time being). But most importantly, being able to share and interact virtually in times like these is a gift, and the new way of life. …