<![CDATA[ Soham De Roy - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Soham De Roy - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Sun, 24 May 2026 16:30:00 +0000 60 <![CDATA[ What is Tailwind CSS? A Beginner's Guide ]]> https://www.freecodecamp.org/news/what-is-tailwind-css-a-beginners-guide/ 66ba5d4b4b814a3715945384 Mon, 12 Sep 2022 15:38:34 +0000 Writing CSS can be really difficult. Period. And I get it – it can be frustrating to nail down your own ideas or the designs you get from your design team.

I'm sure many of you have gone through the same pain at least a few times in your development careers.

Well not anymore. Because it's time to learn an interesting tool that takes away a lot of the burden from us. And no it's not Bootstrap – it's called Tailwind CSS.

While Tailwind has been around for a while now, you may not have come across it yet. Perhaps you just haven't heard about it, or you don't really know whether learning a new piece of tech related to CSS will really make your life easier.

And indeed there are a lot of ways to write CSS out there – like Vanilla CSS3, LESS, SCSS, Bootstrap, styled-components, Windi CSS, and more...phew. Quite a list isn't it?

spongebob-long-list

I hope this short guide will help you understand Tailwind CSS and its benefits so that you can say "This is it. This is the one".

Well enough of the chit chat. Let's dive straight in.

What is Atomic CSS?

Before jumping into Tailwind CSS, let's understand what Atomic CSS is. According to CSS Tricks

"Atomic CSS is the approach to CSS architecture that favours small, single-purpose classes with names based on visual function."

It's kinda like making classes that are supposed to achieve a single purpose. For example, let's make a bg-blue class with the following CSS:

.bg-blue {
  background-color: rgb(81, 191, 255);
}

Now if we add this class to a <h1> tag, it will get a background of blue with the colour being rgb(81, 191, 255) as you can see in the code above.

And here's the HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div><h1 class="bg-blue">Hello world!</h1></div>
  </body>
</html>

So this HTML will result in something like this:

img2-1

Now imagine writing such useful single-purpose CSS rules and keeping them all in a global CSS file. I know it's a one-time investment but think of this – you can now use these single-purpose helper classes from anywhere you want.

You just need your HTML file to consume that global CSS file, and that's it. You can now also use combinations of these helper classes in a single HTML tag.

Let's see another example shall we?

Let's create a CSS file with the following rules:

.bg-blue {
  background-color: rgb(81, 191, 255);
}
.bg-green {
  background-color: rgb(81, 255, 90);
}
.text-underline {
  text-decoration: underline;
}
.text-center {
  text-align: center;
}
.font-weight-400 {
  font-weight: 400;
}

and then consume it in our HTML file as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div><h1 class="bg-blue">Hello world 1</h1></div>
    <div><h1 class="text-underline">Hello world 2</h1></div>
    <div class="text-center">
      <h1 class="bg-green font-weight-400 text-underline">Hello world 3</h1>
    </div>
  </body>
</html>

Well now this will generate the following result:

img3-1

🗒️ Points to note here:

  • Combining multiple helper classes: Look how I have combined multiple helper classes in line 14 in the <h1> tag, namely bg-green, font-weight-400 and text-underline. It all took effect in my Hello world 3 text.
  • Reusability of helper classes: In the above example look at how the text-underline helper class is used multiple times in lines 12 and 14.

See how we were able to add different styles without even leaving the HTML page. Well, you might say, "Hey we did have to write those helper or utility classes in the global CSS file... what about that?" Well, I get it. That definitely was the initial investment we had to make to start with.

And of course, who knows how many of these single-purpose helper or utility classes we would have to make if we wanted to follow this Atomic CSS architecture.

And that's where Tailwind CSS comes in. The concept of Atomic CSS is not new but Tailwind CSS takes it to another level.

Tailwind CSS – A Utility First CSS Framework

Tailwind CSS, as per their own website is a "utility-first CSS framework" which provides several of these opinionated, single-purpose utility classes that you can use directly inside your markup to design an element.

Some of the utility classes that I frequently use these days are:

  • flex: Used to apply Flexbox to a <div>
  • items-center: to apply the CSS property align-items: center; to a <div>
  • rounded-full: to make an image circular, and so on

Seriously, it's not possible for me to list all of them because there are so many of these utility classes. But the best part is, we do not have to write these utility classes ourselves and keep them in any global CSS file. We directly get them from Tailwind.

You can get a list of all the utility classes Tailwind has to offer from the documentation page. Also if you are working in VS Code, you can install an extension called Tailwind CSS IntelliSense and it will give you auto-suggestions as you keep typing the utility classes, as shown in the image below.

img4-1

How to Set Up Tailwind CSS

There are multiple ways you can set up Tailwind CSS in your project, all of which are mentioned in their documentation.

Tailwind CSS works smoothly with a plethora of frameworks like Next, React, Angular, and more – and even our OG HTML.

For the below hands-on demo I am using Tailwind CSS with a Next application. To set up a Next app with Tailwind CSS directly, use the following command:

With npx

npx create-next-app --example with-tailwindcss with-tailwindcss-app

or with yarn

yarn create next-app --example with-tailwindcss with-tailwindcss-app

Once the project has been set up, you can dive into the next step to create a basic card component

Hands-on Demo

Let's build a card component in a Next project.

// Card.js file
// to be rendered in index.js

import React from "react";

const Card = () => {
  return (
    <div className="relative w-96 m-3 cursor-pointer border-2 shadow-lg rounded-xl items-center">
      {/* Image */}
      <div className="flex h-28 bg-blue-700 rounded-xl items-center justify-center">
        <h1 className="absolute mx-auto text-center right text-2xl text-white">
          Image goes here
        </h1>
      </div>

      {/* Description */}
      <div className="p-2 border-b-2">
        <h6>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
          beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
          beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
        </h6>
      </div>

      {/* Tech stack used */}
      <div className="flex flex-wrap items-center m-2">
        <span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
          #React
        </span>
        <span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
          #Redux
        </span>
        <span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
          #Javascript
        </span>
      </div>

      {/* Links */}
      <div className="flex flex-wrap items-center rounded-b-xl border-t-2 bg-white">
        <button className="border rounded-2xl bg-blue-600 text-white shadow-sm p-1 px-2 m-2">
          Go to Project
        </button>
        <button className="border-2 border-blue-600 rounded-2xl text-blue-600 shadow-sm p-1 px-2 m-2">
          Github
        </button>
      </div>
    </div>
  );
};

export default Card;

This results in the following card that gets rendered in the UI:

img5-1

Look how easily I am able to style the card component without even leaving the Card.js file. No need to write any extra CSS files.

Using flex with a <div> applies display: flex; CSS rule to it. Want to add position: relative; to a <div>? Just add relative in the className and you are done.

We can also add different modifiers like hover, active, focus and so on to conditionally render utility classes. It is possible to apply complex CSS rules like this:

.some-class-name {
          --tw-space-x-reverse: 0;
          margin-right: calc(0.5rem * var(--tw-space-x-reverse));
          margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

by just mentioning space-x-2 in the <div> tag. Neat, isn't it?

And do we have to mention these styles explicitly anywhere in some sort of a global CSS file? Absolutely not! Tailwind automagically does it for us. That's the beauty of Tailwind.

We are not done yet... there's a lot of other advantages. Let's look at them now.

Advantages of Tailwind CSS

Just-In-Time (JIT) mode provides lightning-fast build times

Prior to Tailwind v3, it used to purge through all the styles to remove any unused styles, so that the production build remained as small as possible.

According to Tailwind, the production build used to be between 5-10 kB. But that's the story in production. In a development environment, CSS might get really big especially if we use a lot of personalized configuration.

With v3 and above, Tailwind released a new feature called the Just-in-Time compiler. The JIT compiler avoids compiling all the CSS upfront and compiles only the CSS as and when we need it.

This results in lightning-fast build times in all the environments. And as the styles are generated as and when we need them, there is no need to purge unused styles. This means that the CSS in all the environments will be the same. This helps us get rid of the fear of any important CSS getting purged in production.

It's opinionated and flexible at the same time

Tailwind CSS is opinionated. It does specify some constraints when it comes to styling, and if you ask me this is good as it helps us keep the design part to those who actually understand it.

Just look at one of the utility classes to add a box-shadow to your <div> (source):

img6-1

As you can see, there are only 8 variants of shadow that Tailwind provides. There are preset values for vertical and horizontal offset, blur, spread, colour and opacity. That is why Tailwind is opinionated.

It tries to give an opinion about what property values to choose from on almost all the styling properties out there. And believe me, for most of the cases, these 8 variants (for box-shadow) will be more than sufficient to come up with a great UI.

For example in the above hands-on example, I have used shadow-lg in the main parent <div> to get that nice outer box-shadow.

Using the same variant of a particular utility class at different areas in the UI also ensures uniformity across the whole application and results in a better UX.

But in case you need some really customised value for any particular style, you can get that by adding a customized theme in the tailwind.config.js. For example to get a shadow-3xl (Tailwind does not provide shadow-3xl out of the box) you can add the following lines in the module.exports in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

And now with the advent of JIT, you can also use an arbitrary value inside square brackets [] like the following:

<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
  // Rest of your code goes here
</div>

Using arbitrary values may be useful when you need a specific style at only a few places. And in this case, creating a theme for it in the tailwind.config.js might seem unnecessary.

My Thoughts

I really hope that I was able to make you understand what Tailwind CSS is and what you can do with it.

Tailwind is a CSS framework that provides us with single-purpose utility classes which are opinionated for the most part, and which help us design our web pages from right inside our markup or .js/.jsx/.ts/.tsx files.

In my opinion, Tailwind is simple and easy to understand. It's true that it might take some time to get the hang of all the utility class names, but don't worry – you can refer to their documentation whenever you get stuck.

And to all the beginners out there who are just starting their journey with web development, it is very important to know what CSS3 is before you even explore Tailwind (or for that matter any other CSS framework like Bootstrap, Windi CSS, and so on).

Wrapping Up

Thanks for reading! I really hope you enjoyed reading about Tailwind CSS in this article and found it useful.

Do consider sharing it with your friends, I'd really appreciate that. Follow me on LinkedIn and Twitter (see below) and stay tuned for more amazing content. Peace out! 🖖

]]> <![CDATA[ How to Google like a Pro – 10 Tips for More Effective Googling ]]> https://www.freecodecamp.org/news/how-to-google-like-a-pro-10-tips-for-effective-googling/ 66ba5d46e5ad5bacb410af20 Fri, 12 Aug 2022 18:19:11 +0000 Pretty much everything is available on the internet, and Google is one of the main ways people search for information.

And while you might think it's obvious, many internet users don't know how to use Google search efficiently and effectively.

In truth, Googling is an art.

To get the right answers, you need to ask the right questions. And to get the right answers quickly, you must know how to ask the right questions.

Everyone should learn the how part, and that's what this tutorial is all about. Below are some helpful tips and tricks you can use to find correct answers to your questions effectively and efficiently.

How to Search Google Effectively

1. Use quotes to get an "EXACT" match

Generally, when we do a regular search on Google, it makes a shallow search. This may result in pages that may or may not contain all the words you mentioned in your search query.

But if you wrap your search query or question (either a term or a phrase) in quotes like this: "your question goes here" then Google will do a deep search. This means that all the results will include pages that contain all the terms in your question that you put within quotes.

This is helpful when you absolutely want a particular term or phrase to be there in your search results.

img1

2. Search within a specific site with site:

If you want Google to return results from within a particular website, just add site: before the question you are searching.

This is also helpful when you want to search for something within a website that doesn't have an internal search option or perhaps doesn't have a very effective one.

For example, searching for site:freecodecamp.org react will populate search results only from the www.freecodecamp.org website on the topic of React.

img2

3. Exclude a term from search results with -

If you don't want a term or phrase to appear in your search results, then just add - in front of that word.

For e.g. a search on => how to write components in React -class will return all the search results that don't have the term "class" in them. So, (if you know a bit of React) it'll give you only ways to write functional components in React.

img3

4. Search images of a particular size with imagesize:

If you want to search images of a particular size, then use the tag imagesize: in your search query along with the width and height in pixels.

Dimension should be in pixels only – for example, imagesize:500x500 will populate image results which have a dimension of 500px x 500px. So a search on => "cute dog images imagesize:500x600" (coz why not) will result in pictures of cute dogs with an image size of 500px x 600px.

img4

5. Search for a particular filetype with filetype:

If you want to get search results that contain a particular file type such as PDF or PPT, then add filetype:<extension> (without the angular brackets). For example, react tutorial filetype:pdf will generate results that contains PDF in them, as seen in the following image:

img5

6. Use wildcard * to make searches

If you are unsure about or have forgotten any term in your search query/ question, then use the wildcard * charachter. Google will replace it for you with relevant terms.

For example, a search on => the of money will populate the following results. It will be a bunch of pages that include the phrase such as "the exchange of money", "the use of money", "the role of money", "the psychology* of money", and so on.

img6

7. Combine searches with OR, AND logic

If you want your search results to contain two terms, then put the AND keyword in between them. For example, the search on => React AND Angular will fetch results that have both the terms react and angular in it.

Similarly, if you want either of the terms in your search results, then use the OR keyword in between them. For example, the search on => React OR Angular will fetch results that have either of the terms or even both.

img7

8. Filter out searches with AFTER:, BEFORE: or .. between two numbers

If you want Google to populate search results that were published after a particular year, then use the tag AFTER:. For example, the search on => React tutorials AFTER:2020 will populate search results published after 2020.

Similarly adding the tag BEFORE: will return results published before a particular year.

You can also search for results published in a certain year range, or for that matter between any numbers. Just add .. between the two numbers you want to search between along with the units, if any.

img8

If you want to know what all other websites are available on the internet that are similar to a particular website, then use the related: tag.

For example, a search on related:google.com will fetch all the websites that are similar to Google like Bing, Yahoo, DuckDuckGo, and so on.

img9

10. Use cache: to see Google's cached version of a website

Google stores a cached version of websites to provide search results quickly. To see if Google has cached any site or not, just use the tag cache: in front of the website's URL.

This is especially helpful for web developers if they want to check if they are currently viewing a cached site or the latest version of a website after they have pushed some changes to the website. For example, a search for => cache:www.sohamderoy.dev on the day of writing this tutorial (that is, 4th Aug 2022) returns the following result:

img10a

As you see, even though I am searching for the site on 4th August 2022, I still see a copy of the site from 3rd August 2022, as that is when Google has cached the website.

It is important to note that "Not all search operators return exhaustive results." as mentioned by Google itself.

Still, I believe that these are some really handy tips that help you make an effective and efficient Google search. I hope I've explained them properly and have encouraged you to use them in your regular Google search.

Wrapping Up

Thanks for reading! I really hope you enjoyed reading this short article about how to google efficeiently and effectively and found this tutorial useful.

Do consider sharing it with your friends – I'd really appreciate that. Follow me on LinkedIn and Twitter and stay tuned for more amazing content! Peace out! 🖖

]]> <![CDATA[ How to Build a Redux-Powered React App ]]> https://www.freecodecamp.org/news/how-to-build-a-redux-powered-react-app/ 66ba5d40968a8cd3b478a8ea Wed, 03 Aug 2022 21:51:56 +0000 The Problem We're Solving

In many cases when we want to create a small application, we might have some components that declare and use their own state. And in a few cases, a component might want to share the state with its immediate children.

We can handle these situations just by declaring states locally within a component – and maybe pass the state to its children in the form of props if needed (which is also known as prop drilling).

But if your application grows in size, you might need to pass state to a child which might be several steps down the hierarchy. You might also need to use a common state between sibling components.

Sure, in the case of state sharing between sibling components we can declare the state in their parents and then pass the state down to their children by prop drilling. But that may not always be feasible and has its own disadvantages that we will see in a bit.

Just consider the following diagram:

Group-49

This is a schematic representation of a component file structure in a typical React application.

Let's say we need to share a common state between Child 5 and Child 6. In that case we can very well declare a state in their parent (that is, Child 2) and pass the state down to the two children (5 and 6).

All good as of now. But what if we need to have the same piece of state in Child 3? In that case we would need to declare the state in the common parent/grandparent of Children 5, 6, and 3 – that is, the App component.

Similarly what if we want to share a state between Children 4, 11, and 10 which are far away from each other in the tree? We would again need to create the state in the App component and then do multiple levels of prop drilling to pass the state from App to these components.

And as time passes and our app grows in size, it will start making our App component or any other such common parent component cluttered with unnecessary state declarations. These declarations aren't used directly by these components but are used by some of their far-down children.

Disadvantages of Multi-Step Prop Drilling

There are primarily two disadvantages with multi level prop drilling. They are:

  • Unnecessary bloating of components: As discussed above, as our app grows in size, some common parent components might get bloated with unnecessary state declarations. And these components might not directly use those declarations, but they might be used by some of their distant children. Some other components might also get bloated which are just acting as prop passers to a child component. This will also negatively affect code readability.
  • Unnecessary re-rendering: Unnecessary re-rendering is a big no no for a client-side application. Unnecessary re-renders can make an app slow, laggy, unresponsive and give a bad user experience. In React, re-renderings are caused by state or prop changes, among other reasons. So if a component is not actually using a state and is only acting as a passage from parent to child for the props, then it might also get re-rendered unnecessarily when the state/ props changes. See the below picture to understand it better

Group-52-1

The Solution to this Problem

This is why we use a state management app like Redux or MobX to handle the above scenarios of state management in a more uniform and efficient way.

In these kind of state management solutions like Redux, we can create a global state and put it in a store. Whichever component requires any state from that store can easily get it by subscribing to the store. This way we can get rid of both the above disadvantages.

  • Decluttering of components: Getting state on demand from the component which is "actually" using it can declutter many of our components to a large extent by removing all unnecessary prop drilling.
  • No more unnecessary re-renders: As we do not have components that just act as a prop passer, we also avoid unnecessary re-rendering of those components. Only the components that uses a piece of the global state re-render when the state changes which is a desired behavior.

What You'll Learn Here

In this tutorial, you will learn how to set up your own Redux-powered React application. We will create a react application and setup up redux to be able to manage state globally so that any component can access any part of the state (hence the name redux powered react app). Some of the other alternative of redux that one can try are MobX, Zustand etc, but for this article we will be using redux.

We will go through how to create the store and connect it to the application. We'll also see how to write actions and dispatch them on user interactions. Then we'll see how to make reducers and update the store, read the store from other components which are children of App, and much more.

I'll also provide all the important code snippets along the way so that you can quickly spin up the application as you read and code along.

To give you a glimpse in the beginning, this is what we will build by the end:

Image

We will be creating a basic application where we can add and remove items in a cart. We will manage the state changes in the Redux store and display the information in the UI.

Before We Start

Before proceeding with this tutorial, you should be familiar with the Redux store, actions, and reducers.

If you're not, you can go through my last article that I wrote on Redux (if you haven't yet): What is Redux? Store, Actions, and Reducers Explained for Beginners.

This will help you understand the current article. In this previous tutorial, I tried to explain the fundamental principles/ concepts of Redux. I covered what the store is, what actions are, and how reducers work. I also discuss what makes Redux predictable along with an example.

Image

Initial Code Setup

Let's get everything we need setup for our project. Just follow these steps and you'll be up and running in no time.

1. Create a React app with the create-react-app command

npx create-react-app react-app-with-redux

2. Go to the newly created folder

Just type this command to navigate to the new folder:

cd react-app-with-redux

3. Install Redux and the react-redux libraries

You can install Redux and react-redux like this:

npm install redux react-redux

4. Run the application

You can run your new app with the following command:

npm start

How to Build the Main App

5. How to create the Reducer

To create a reducer, first create a folder inside src named actionTypes. Then create a file inside it named actionTypes.js. This file will contain all the actions the application will be dealing with.

Add the following lines in actionTypes.js:

export const ADD_ITEM = "ADD_ITEM";
export const DELETE_ITEM = "DELETE_ITEM";

Since our app will have the functionality of adding and deleting items, we need the above two action types.

Next create a folder inside the src called reducers and create a new file in it named cartReducer.js. This file will contain all the reducer logic related to the cart component.

Note: We will create the view/ UI in step 8, so hold on for that.

Add the following lines in cartReducer.js:

import { ADD_ITEM, DELETE_ITEM } from "../actionTypes/actionTypes";

const initialState = {
  numOfItems: 0,
};

export default const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_ITEM:
      return {
        ...state,
        numOfItems: state.numOfItems + 1,
      };

    case DELETE_ITEM:
      return {
        ...state,
        numOfItems: state.numOfItems - 1,
      };
    default:
      return state;
  }
};

As we discussed it in my previous tutorial, we created an initial state for the app and assigned it to the default parameter of state in the cartReducer function.

This function switches on the type of action dispatched. Then depending on whichever case matches with the action type, it makes necessary changes in the state and returns a fresh new instance of the updated state.

If none of the action types matche, then the state is returned as it is.

Finally we make a default export of the cakeReducer function to use it in the store creation process.

6. How to create the store and provide it to the app

Create a file inside src with the name store.js and create the store using this command:

const store = createStore()

Add the following lines in store.js:

import { createStore } from "redux";
import { cartReducer } from "./reducers/cartReducer";

const store = createStore(cartReducer);

export default store;

Now it's time to provide this store to the App component. For this we'll use the <Provider> tag that we get from the react-redux library.

We wrap the whole App component inside the <Provider> tag using the following syntax:

// rest of the code ...

<Provider store={store}>
        <div>App Component</div>
        // child components of App/ other logic
</Provider>

// rest of the code ...

By wrapping the App component inside the <Provider> tag, all the children component of App will get access of the store. You can read my previous article on What is Redux? Store, Actions, and Reducers Explained for Beginners to know more.

Continuing with App.js, add the following lines to the file:

import "./App.css";
import { Provider } from "react-redux";
import store from "./store";

function App() {
  return (
    <Provider store={store}>
      <div>App Component</div>
    </Provider>
  );
}

export default App;

7. Create the Actions

Now create a folder inside src called actions and create a file inside it called cartAction.js. Here we will add all the actions to be dispatched on some user interactions.

Add the following lines in the cartAction.js:

import { ADD_ITEM, DELETE_ITEM } from "../actionTypes/actionTypes";

const addItem = () => {
  return {
    type: ADD_ITEM,
  };
};

const deleteItem = () => {
  return {
    type: DELETE_ITEM,
  };
};

export { addItem, deleteItem };

In the above code we created two action creators (pure JS functions that returns action object) called addItem() and deleteItem(). Both the action creators return action objects with a specific type.

Note: Each action object must have a unique type value. Along with it, any additional data passed with the action object is optional and will depend on the logic used for updating the state

8. How to create the view/UI

Now that we have created all the required entities such as the store, actions, and Reducers, it's time to create the UI elements.

Create a component folder inside src and a Cart.js file inside it. Add the following lines inside Cart.js:

import React from "react";

const Cart = () => {
  return (
    <div className="cart">
      <h2>Number of items in Cart:</h2>
      <button className="green">Add Item to Cart</button>
      <button className="red">Remove Item from Cart</button>
    </div>
  );
};

export default Cart;

Add this Cart component in the App.js file:

import "./App.css";
import { Provider } from "react-redux";
import store from "./store";
import Cart from "./component/Cart";

function App() {
  return (
    <Provider store={store}>
      <Cart />
    </Provider>
  );
}

export default App;

Just to make it a bit presentable, I have added a bit of basic styling in App.css as follows:

button {
  margin: 10px;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
  color: #fff;
  padding: 23px 50px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  border: 0px;
  cursor: pointer;
}
.green {
  background-color: rgb(6, 172, 0);
}
.red {
  background-color: rgb(221, 52, 66);
}
.red:disabled {
  background-color: rgb(193, 191, 191);
  cursor: not-allowed;
}
.cart {
  text-align: center;
}

This is how the UI looks as of now:

Image

9. How to read and access the store using the useSelector hook

useSelector is a hook provided by the react-redux library that helps us read the store and its content(s).

Import the hook from react-redux and use the following syntax to read the store with useSelector hook:

import { useSelector } from "react-redux";
// rest of the code
const state = useSelector((state) => state);

// rest of the code

After adding the useSelector hook, your Cart.js file will look something like this:

import React from "react";
import { useSelector } from "react-redux";

const Cart = () => {
  const state = useSelector((state) => state);
  console.log("store", state);
  return (
    <div className="cart">
      <h2>Number of items in Cart:</h2>
      <button className="green">Add Item to Cart</button>
      <button className="red">Remove Item from Cart</button>
    </div>
  );
};

export default Cart;

Console logging the state will give us the initial state that we set in the reducer file in step 5.

Image

10. How to dispatch an action on button click with the useDispatch hook

The react-redux library gives us another hook called the useDispatch hook. It helps us dispatch the actions or action creators which in turn return actions. The syntax is as follows:

const dispatch = useDispatch();

dispatch(actionObject or calling the action creator);

Thus adding a dispatcher into our Cart.js will finally make the file look something like this:

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { addItem, deleteItem } from "../actions/cartAction";

const Cart = () => {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
  return (
    <div className="cart">
      <h2>Number of items in Cart: {state.numOfItems}</h2>
      <button
        onClick={() => {
          dispatch(addItem());
        }}
      >
        Add Item to Cart
      </button>
      <button
        disabled={state.numOfItems > 0 ? false : true}
        onClick={() => {
          dispatch(deleteItem());
        }}
      >
        Remove Item to Cart
      </button>
    </div>
  );
};

export default Cart;

Note how on click of the Add Item to Cart button, we dispatch the action creator addItem() that we created in step no. 7.

Similarly on click on the Remove Item from Cart button, we dispatch the action creator with deleteItem().

The state variable stores the state of the app, which is basically an object with a key numOfItems. So state.numOfItems gives us the current number of items value in the store.

We display this information in the view in the line <h2>Number of items in Cart: {state.numOfItems}</h2>.

To dig a bit deeper, when a user clicks the Add Item to Cart button, it dispatches the addItem() action creator. This, in turn, returns an action object with type type: ADD_ITEM.

As mentioned in my previous tutorial, when an action is dispatched, all the reducers become active.

Currently in this example we have only one reducer – cartReducer. So it becomes active and listens to the action dispatched.

As shown in step 5, the reducer takes the state and the action as input, switches on the action type and returns the fresh new instance of the updated state.

In this example, when the action with type: ADD_ITEM matches the first switch case, it first makes a copy of the entire state using the spread operator ...state. Then it makes the necessary update – which in the case of adding items is numOfItems: state.numOfItems + 1 (that is increasing the numOfItems by 1).

Similarly, using the same logic, on clicking on the Remove Item from Cart button, an action with type type: DELETE_ITEM is dispatched which goes and decreases the numOfItems by 1.

Here is the demo of the working app:

Image

Notice how we were able to control the behavior of the Remove Item from Cart button based on the value of numOfItems in the Redux store. As a negative number of items does not makes sense, we disabled the Remove Item from Cart button if state.numOfItems <= 0.

This way we are able to prevent the user from decreasing the number of items in the cart if its already 0.

This was a basic example to show you how we can control the behavior of various DOM elements based on the internal state of the app.

And there you go! We just finished setting up our first Redux-powered React application. Now you can go ahead and create various other components based on your requirements and share a common global state among them.

GitHub Repo

Here's the GitHub repo of the project so you can examine the full source code if you like: GitHub repo

Summary

In this article, we learned how to quickly spin up a Redux-powered React application.

Along the way, we learned how to:

  • Create actions, action creators, reducers, and the store
  • Provide the store to the app using <Provider>
  • Read/ access the store from components using the useSelector hook and display the state information in the UI
  • Dispatch the actions on user events such as button clicks, using the useDispatch hook
  • Control the DOM elements' behavior with logic based on the state of the application
  • We learnt what are the disadvantages of in-efficient state management and multiple level of prop drilling

Additional Resources

Here are some additional resources that you can look into to learn more about Redux

Wrapping Up

Thanks for reading! I really hope you enjoyed reading about how to spin up a Redux-powered React application and found this tutorial useful.

Do consider sharing it with your friends, as I'd really appreciate that. Follow me on LinkedIn and Twitter and stay tuned for more amazing content! Peace out! 🖖

]]> <![CDATA[ What is Redux? Store, Actions, and Reducers Explained for Beginners ]]> https://www.freecodecamp.org/news/what-is-redux-store-actions-reducers-explained/ 66ba5d480013ba5d5012bcb5 Wed, 27 Jul 2022 15:48:39 +0000 Redux is a predictable state container for JavaScript apps. So what does that really mean?

If we dig deeper into this statement, we see that Redux is a state management library that you can use with any JS library or framework like React, Angular, or Vue.

Image

In this article, we'll be covering the fundamentals of Redux. We will learn what Redux is at its core along with its three key principles.

We will also see how some of its core building blocks work, such as store, actions, and reducers and how they all come together and make Redux the global state management library that it is.

As a prerequisite, I will be assuming that you're familiar with React.

Why Use Redux?

Well, an application has its state, which can be a combination of the states of its internal components.

Let's take an e-commerce website for example. An e-commerce website will have several components like the cart component, user profile component, previously viewed section component, and so on.

We'll take the cart component which displays the number of items in a user's cart. The state of the cart component will consist of all the items the user has added to the cart and the total number of those items. At all times the application is up and running, this component has to show the updated number of items in the user's cart.

Whenever a user adds an item to the cart, the application has to internally handle that action by adding that item to the cart object. It has to maintain its state internally and also show the user the total number of items in the cart in the UI.

Similarly, removing an item from the cart should decrease the number of items in the cart internally. It should remove the item from the cart object and also display the updated total number of items in the cart in the UI.

We may very well maintain the internal state of the components inside them, but as and when an application grows bigger, it may have to share some state between components. This is not just only to show them in the view, but also to manage or update them or perform some logic based on their value.

This task of handling multiple states from multiple components efficiently can become challenging when the application grows in size.

This is where Redux comes into the picture. Being a state management library, Redux will basically store and manage all the application's states.

It also provides us with some important APIs using which we can make changes to the existing state as well as fetch the current state of the application.

What Makes Redux Predictable?

State is Read-only in Redux. What makes Redux predictable is that to make a change in the state of the application, we need to dispatch an action which describes what changes we want to make in the state.

These actions are then consumed by something known as reducers, whose sole job is to accept two things (the action and the current state of the application) and return a new updated instance of the state.

We'll talk more about actions and reducers in the following sections.

Note that reducers do not change any part of the state. Rather a reducer produces a new instance of the state with all the necessary updates.

According to Dan Abramov (the creator of Redux) himself,

"Actions can be recorded and replayed later, so this makes state management predictable. With the same actions in the same order, you're going to end up in the same state."

So continuing with our above example of an e-commerce website, if the initial state of the cart is that it has 0 items, then an action of adding one item to the cart will increase the number of items in the cart by 1. And firing the action of adding one item to the cart again will increase the number of items in the cart to 2.

Given an initial state, with a specific list of actions in a specific order, it'll always provide us with the exact same final state of the entity. This is how Redux makes state management predictable.

In the following section, we will dive deep into the core concepts of Redux – the store, actions and reducers.

Core Principles of Redux

Image

1. What is the Redux Store?

The global state of an application is stored in an object tree within a single store – Redux docs

The Redux store is the main, central bucket which stores all the states of an application. It should be considered and maintained as a single source of truth for the state of the application.

If the store is provided to the App.js (by wrapping the App component within the <Provider> </Provider> tag) as shown in the code snippet below, then all its children (children components of App.js) can also access the state of the application from the store. This makes it act as a global state. 

// src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import { App } from './App'
import createStore from './createReduxStore'

const store = createStore()

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

Image

The state of the whole application is stored in the form of a JS object tree in a single store as shown below. 

// this is how the store object structure looks like
{
    noOfItemInCart: 2,
    cart: [
        {
            bookName: "Harry Potter and the Chamber of Secrets",
            noOfItem: 1,
        },
        {
            bookName: "Harry Potter and the Prisoner of Azkaban",
            noOfItem: 1
        }
    ]
}

2. What Are Actions in Redux?

The only way to change the state is to emit an action, which is an object describing what happened – Redux Docs

As mentioned above, state in Redux is read-only. This helps you restrict any part of the view or any network calls to write/update the state directly.

Instead, if anyone wants to change the state of the application, then they'll need to express their intention of doing so by emitting or dispatching an action.

Let's take the example of the above store example where we have 2 books in the store: "Harry Potter and the Chamber of Secrets" and "Harry Potter and the Prisoner of Azkaban". There's just one copy of each.

Now if the user wants to add another item to the cart, then they will have to click on the "Add to Cart" button next to the item.

On the click of the "Add to Cart" button, an action will be dispatched. This action is nothing but a JS object describing what changes need to be done in the store. Something like this:

// Rest of the code

const dispatch = useDispatch()

const addItemToCart = () => {
return {
    type: "ADD_ITEM_TO_CART"
    payload: {
        bookName: "Harry Potter and the Goblet of Fire",
        noOfItem: 1,
        }
    }
}

<button onClick = {() => dispatch(addItemToCart())}>Add to cart</button>

// Rest of the code

Note how in the above example, we dispatch an action on click of the button. Or rather, to be more specific, we dispatch something known as an action creator – that is, the function addItemToCart(). This in turn returns an action which is a plain JS object describing the purpose of the action denoted by the type key along with any other data required for the state change. In this case, it's the name of the book to be added to the cart denoted by the payload key.

Every action must have at least a type associated with it. Any other detail that needs to be passed is optional and will depend on the type of action we dispatch.

For example, the above code snippet dispatches the following action:

// Action that got created by the action creator addItemToCart()

{
    type: "ADD_ITEM_TO_CART" // Note: Every action must have a type key
    payload: {
        bookName: "Harry Potter and the Goblet of Fire",
        noOfItem: 1,
    }
}

3. What Are Reducers in Redux?

To specify how the state tree is transformed by actions, we write pure reducers – Redux docs

Image

Reducers, as the name suggests, take in two things: previous state and an action. Then they reduce it (read it return) to one entity: the new updated instance of state.

So reducers are basically pure JS functions which take in the previous state and an action and return the newly updated state.

There can either be one reducer if it is a simple app or multiple reducers taking care of different parts or slices of the global state in a bigger application.

For example, there can be a reducer handling the state of the cart in a shopping application, then there can be a reducer handling the user details part of the application, and so on.

Whenever an action is dispatched, all the reducers are activated. Each reducer filters out the action using a switch statement switching on the action type. Whenever the switch statement matches with the action passed, the corresponding reducers take the necessary action to make the update and return a fresh new instance of the global state.

Continuing with our above example, we can have a reducer as follows:


const initialCartState = {    
    noOfItemInCart: 0,          
    cart: []                              
}

// NOTE: 
// It is important to pass an initial state as default to 
// the state parameter to handle the case of calling 
// the reducers for the first time when the 
// state might be undefined

const cartReducer = (state = initialCartState, action) => {
    switch (action.type) {
        case "ADD_ITEM_TO_CART": 
            return {
                ...state,
                noOfItemInCart: state.noOfItemInCart + 1,
                cart : [
                    ...state.cart,
                    action.payload
                ]
            }
        case "DELETE_ITEM_FROM_CART":
            return {
                // Remaining logic
            }
        default: 
            return state  
    }       // Important to handle the default behaviour
}           // either by returning the whole state as it is 
            // or by performing any required logic

In the above code snippet, we created a reducer called cartReducer which is a pure JS function. This function accepts two parameters: state and action.

Note that the state parameter is a default parameter which accepts an initial state. This is to handle the scenario when the reducer is called for the first time when the state value is undefined.

Also note that every reducer should handle the default case where, if none of the switch cases match with the passed action, then the reducer should return state as it is or perform any required logic on it before passing the state.

Whenever we dispatch an action with a certain type, we need to make sure to have appropriate reducers to handle that action.

In the above example, on clicking the button, we had dispatched an action with an action creator called addItemToCart(). This action creator has dispatched an action with the type ADD_ITEM_TO_CART.

Next, we have created a reducer called cartReducer which takes the state (with the default initial state) and the action as parameters. It switches on the action type, and then whichever case matches with the dispatched action type, it makes the necessary update and returns the fresh new version of the updated state.

Note here that state in redux is immutable. So, the reducers make a copy of the entire current state first, make the necessary changes, and then return a fresh new instance of the state – with all the necessary changes/ updates.

So in the above example, we first make a copy of the entire state using the spread operator ...state. Then we increment the noOfItemInCart by 1, update the cart array by adding the new object passed in the action.payload shown below, and then finally return the updated object.

{
    bookName: "Harry Potter and the Goblet of Fire",
    noOfItem: 1,
}

After the reducers have updated the state, if we go and console.log the state, then we would see the following result:

// Updated store

{
    noOfItemInCart: 3, // Incremented by 1
    cart: [
        {
            bookName: "Harry Potter and the Chamber of Secrets",
            noOfItem: 1,
        },
        {
            bookName: "Harry Potter and the Prisoner of Azkaban",
            noOfItem: 1
        },
        { // Newly added object
            bookName: "Harry Potter and the Goblet of Fire",
            noOfItem: 1,
        }
    ]
}

Summary

In short, the following three principles completely govern how Redux works:

  • The global state of an application is stored in an object tree within a single store
  • The only way to change the state is to emit an action, which is an object describing what happened
  • To specify how the state tree is transformed by actions, we write pure reducers

Wrapping Up

Thanks for reading! I really hope you enjoyed learning about Redux and its core principles and found this tutorial useful.

Do consider sharing it with your friends, I'd really appreciate that. Stay tuned for more amazing content. Peace out! 🖖

]]> <![CDATA[ How to Center a Div with CSS – 10 Different Ways ]]> https://www.freecodecamp.org/news/how-to-center-a-div-with-css-10-different-ways/ 66ba5d43e530197d3818e1a2 Wed, 20 Jul 2022 22:08:19 +0000 As a web developer, sometimes centering a div feels like one of the toughest jobs on planet Earth.

Well, not anymore. In this article, you'll learn 10 different ways to center a div. We will explore how to center divs using the CSS position property, CSS Flexbox, and CSS Grid.

After reading this whole article, I am confident that you will start centering divs like a pro.

How to Center a Div

For this tutorial, I will be using the same HTML for all 10 methods that we'll discuss below. The HTML just contains a parent div and a child div inside it.

The main aim of this article is to center the inner div with respect to its parent. I will only be changing the CSS files, but you'll be able to see all 10 different methods take effect.

The main HTML file goes like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Centering divs</title>
    <link rel="stylesheet" href="./basicStyle.css" />
    <!-- Change the link of CSS file here -->
    <link rel="stylesheet" href="" />
    <style>
      * {
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="parentContainer">
      <div id="childContainer"></div>
    </div>
  </body>
</html>

With just the basic styling as given in the following lines:

#parentContainer {
  width: 400px;
  height: 400px;
  background-color: #f55353;
}
#childContainer {
  width: 100px;
  height: 100px;
  background-color: #feb139;
}

We will get something like this:

Image What the basic HTML and CSS styling gives us.

We just make a parent div and give it a width and height of 400px, and a color of #f55353.

Similarly we create a child div inside it and give it a width and height of 100px and give it a color of #feb139.

The final goal of this article will be to make this transformation:

Image

How to Center a Div using the CSS position Property

1. How to use position: relative, absolute and top, left offset values

#parentContainer {
  position: relative;
}
#childContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

The position property in CSS sets how the element is positioned on the page. The default value of the position property is static. The other values that the position property takes are relative, absolute, fixed and sticky.

Now when we give a position: absolute to a DOM element, it becomes absolute with respect to the whole page. This would be useful if we wanted to center the div with respect to the whole page.

On the other hand, setting the parent element to position: relative, makes the children element (with position: absolute) absolute, relative to the parent element and not the whole page.

In the above example we do just that. We give the parent element a position: relative and child a position: absolute.

Along with the position property, we can specify four other properties viz. top, right, bottom and left which then determines the final location/ position of the element.

The top and bottom specify the vertical positioning of the element where as left and right specify the horizontal positioning.

2. How to use position: relative and absolute, top, left, right and bottom offset values and margin: auto

#parentContainer {
  position: relative;
}
#childContainer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

Continuing with our knowledge of positions from point 1 above, we use the margin property in CSS here. margin: auto lets the browser select a suitable margin for the child element.

In most of the cases it allows the child element to take its specified width and the browser distributes the remaining space equally between the left and right margin pair or top and bottom margin pair or amongst both pairs.

If we mention only top: 0, bottom: 0 and margin: auto, it centers the child element vertically.

Similarly if we mention only left: 0, right: 0 and margin: auto, then it will center the child horizontally.

And if we mention all the properties as shown in the code block above, then we get a perfectly centered div both horizontally and vertically.

How to Center a Div Using CSS Flexbox

3. How to use Flexbox, justify-content, and align-item

The above two methods are based on more of a classical method of aligning elements in the page. The modern approaches makes use of Flexbox (for one directional layout modeling) and Grid layout (for more complex two dimensional layout modeling) properties.

Let's see the Flexbox approach:

Flexbox is not just a single property, but it is a module which comprises of a set of properties. Some of these properties are meant to be for the container (that is, the parent container) and some for the child elements inside it.

The below diagram shows a list of properties that are meant for parent and child elements with respect to Flexbox. Group-42

Now it is not possible to cover all the properties in this article. Rather let's look into some of the properties we are using in this article.

As mentioned above, there are two different entities in the Flexbox model, the parent container and the children element.

The display: flex property defines a container as a flex container. flex-direction is another parent container property which can take in either of the four values row (default value), row-reverse, column and column-reverse.

When working with Flexbox, we need to take two different axes into consideration, that is the main axis and cross axis.

For the cases where flex-direction is row or row-reverse, the horizontal axis is the main axis and vertical axis is the cross axis.

Similarly, when the flex-direction is column or column-reverse, then the vertical axis is the main axis and horizontal axis is the cross axis. Refer to the below diagrams for visual clarity:

Group-43

Group-44

The justify-content property of the parent container defines the alignment of its children along the main axis. Thus justify-content: center sets the alignment of all its child elements at the center with respect to the main axis.

Similarly, the align-items property of the parent container defines the alignment of its children along the cross axis. Thus align-items: center sets the alignment of all its child elements at the center with respect to the cross axis.

So the below code block will perfectly align our child element at the center of the parent element both vertically and horizontally.

In this method, we do not need to specify anything explicitly for the child element. display: flex, justify-content and align-items handle everything from the parent component.

#parentContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. How to Use Flexbox, justify-content, and align-self

This method is just an alternative to the above method and is quite similar to it.

But in place of using the align-items property (in the parent container property), which sets the alignment for all the childern elements with respect to cross axis, we use align-self (in the child elements) which sets the alignment of individual flex items on the cross axis.

#parentContainer {
  display: flex;
  justify-content: center;
}
#childContainer {
  align-self: center;
}

5. How to Use Flexbox and margin: auto

Flexbox gives us very powerful alignment and space distribution capabilities. Also as mentioned above, margin: auto lets the browser select a suitable margin for the child element.

In most cases it allows the child element to take its specified width and the browser distributes the remaining space equally between the left and right margin pair or top and bottom margin pair or amongst both the pairs.

This means that setting the parent container as flex and giving the child a margin: auto alows the browser to evenly distribute the leftover space along both the vertical and horizontal directions.

#parentContainer {
  display: flex;
}
#childContainer {
  margin: auto;
}

How to Center a Div Using CSS Grid

6. How to Use Grid, justify-content, and align-items

CSS Grid or just Grid is used for two dimensional layout modeling compared to Flexbox which you use for one dimensional modeling.

Similar to Flexbox, we have the concept of a grid container or parent container and grid items or children items.

The below diagram lists down all the properties you can use for the parent and children. As CSS Grid is a huge topic in itself, it's not in the scope of this article to discuss about each and every property. So let's discuss the properties that we're using in this article.

Group-45

display: grid initiates an element to become a grid container.

justify-items and align-items align the items inside the grid along the inline (row) axis and block (column) axis respectively.

On the other hand, if the total size of the grid is less than the grid container (which can happen if all the grid items are sized with non-flexible units like px), then in that case we can control the alignment of the grid within the grid container using justify-content and align-content.

justify-content and align-content aligns the grid along the inline (row) axis and block (column) axis respectively.

You can find a comprehensive explanation of all these properties here: A Complete Guide to Grid

As for our case there is only one grid cell and only one child element inside it, so we can use justify-content or justify-items as well as align-content or align-items interchangeably and get the same result.

#parentContainer {
  display: grid;
  justify-content: center;
  align-items: center;
}

7. How to Use Grid and place-items

You can use place-items to set both align-items and justify-items properties in the same declaration. Similarly place-content sets both justify-content and align-content is the same declaration.

As mentioned above, in this use case we can use justify-content or justify-items as well as align-content or align-items interchangeably. In the same way we can also use place-items as well as place-content interchangeably and get the same result (specifically for this use case. For any other use case we need to analyse which property should be used).

#parentContainer {
  display: grid;
  place-items: center;
}

8. How to Use Grid, align-self, and justify-self

Similar to Flexbox, Grid also supports individual grid item alignment using the align-self and justify-self properties (properties to be specified in the children element).

justify-self aligns grid items inside a grid cell along the inline (row) axis whereas align-self aligns the grid items inside the grid cell along the block (column) axis.

#parentContainer {
  display: grid;
}
#childContainer {
  align-self: center;
  justify-self: center;
}

9. How to Use Grid and place-self

The place-self property sets both justify-self and align-self properties in a single declaration. So assigning a child element to place-self: center centers the child both vertically and horizontally.

#parentContainer {
  display: grid;
}
#childContainer {
  place-self: center;
}

10. How to Use Grid and margin: auto

Similar to Flexbox, Grid also gives us powerful alignment and space distribution capabilities.

As seen in point 5, we can do a similar process with Grid instead of using Flexbox and we'll get the same result if we asign margin: auto to the child element.

#parentContainer {
  display: grid;
}
#childContainer {
  margin: auto;
}

Here's The Result

Well as expected, following any of the above methods will result in this:

Image

Summary

In this article, we saw how to center a div using 10 different methods. Those methods were:

  1. Using position: relative, absolute and top, left offset values
  2. Using position: relative and absolute, top, left, right and bottom offset values and margin: auto
  3. Using flexbox, justify-content and align-item
  4. Using flexbox, justify-content and align-self
  5. Using flexbox and margin: auto
  6. Using grid, justify-content and align-items
  7. Using grid and place-items
  8. Using grid, align-self and justify-self
  9. Using grid and place-self
  10. Using grid and margin: auto

We also looked at what all these properties like justify-content, align-items, position and so on meant and how we can use some of them together to center our divs.

Some good resources

  1. A Complete Guide to Flexbox
  2. A Complete Guide to Grid
  3. Learn Flexbox and Grid by Building a Responsive Landing Page

You can find the GitHub link for all the files for all the methods mentioned above here: Github Link

Wrap Up

Thanks for reading! I hope you liked this article on 10 different methods to center a div and I hope that they come handy to you in the future.

Do consider sharing this article with your friends – I'd really appreciate that. Stay tuned for more amazing content. Peace out! 🖖

]]> <![CDATA[ Higher Order Functions in JavaScript – Beginner's Guide ]]> https://www.freecodecamp.org/news/higher-order-functions-in-javascript/ 66ba5d3de530197d3818e1a0 Thu, 09 Jun 2022 19:59:00 +0000 In JavaScript, functions are treated as first-class citizens. We can treat functions as values and assign them to another variable, pass them as arguments to another function, or even return them from another function.

This ability of functions to act as first-class functions is what powers higher order functions in JavaScript.

Basically, a function which takes another function as an argument or returns a function is known as a higher order function.

Image

Let's deep dive a bit to see both types of implementation, that is:

  • Passing a function as an argument to another function
  • Returning a function from another function

Image

How to Pass a Function as an Argument to Another Function

In this section, we will see how we can send a function as an argument and ultimately how it helps us write cleaner code.

Consider the following code in which we want to create a function which accepts an array as an argument. It filters out all the odd numbers from it and returns all the filtered numbers.

The function will look something like this:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

function filterOdd(arr) {
  const filteredArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 !== 0) {
      filteredArr.push(arr[i]);
    }
  }
  return filteredArr;
}
console.log(filterOdd(arr));

// Output:
// [ 1, 3, 5, 7, 9, 11 ]

The above function returns the filtered array [ 1, 3, 5, 7, 9, 11 ] where we have all the odd numbers, as expected.

Now let's say we also want to make a function that filters out and returns all the even numbers. We can very well go ahead and create the following function to achieve this:

function filterEven(arr) {
  const filteredArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 == 0) {
      filteredArr.push(arr[i]);
    }
  }
  return filteredArr;
}
console.log(filterEven(arr));

// Output:
// [ 2, 4, 6, 8, 10 ]

Again, as expected, we will get the desired output of an array with all even numbers in it – [ 2, 4, 6, 8, 10 ].

But notice that we are writing a lot of duplicate code in this approach. Both the above functions do a lot of common things, like accepting the original array, creating a new array to store the filtered array, looping through the whole main array, and finally returning the filtered array.

The only difference between both functions is the logic they use to filter out the original array.

For the function filterOdd we use the logic of arr[i] % 2 !== 0 whereas in the filterEven function we use the logic arr[i] % 2 == 0 to filter out the original array.

This is where we can benefit from using higher order functions. The main intention is to create a function to do all the common stuff we did in the above two functions and pass the logic part separately as an argument to this function. Let's see how we can implement this.

Let's make the function which does all the common stuff we performed in the filterOdd and filterEven functions. This will go something like this:

function filterFunction(arr, callback) {
  const filteredArr = [];
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i]) ? filteredArr.push(arr[i]) : null;
  }
  return filteredArr;
}

Ignore the callback parameter for now. Notice how in the new filterFuntion we kept all the common steps, that is accepting the original array, creating a new array to store the filtered array, looping through the whole main array, and finally returning the filtered array that we were performing in the filterOdd and filterEven functions.

Now the callback parameter basically accepts the logic which will be nothing but another function containing the filtering logic. For filtering the odd and even numbers, respectively, here are the logic functions we need to write:

// Function containing logic for filtering out odd numbers

function isOdd(x) {
  return x % 2 != 0;
}

// Function containing logic for filtering out even numbers

function isEven(x) {
  return x % 2 === 0;
}

That's it! We now just need to pass the main array, along with the logic function to our filterFunction like this:

// For filtering out odd numbers

filterFunction(arr, isOdd)
// Output of console.log(filterFunction(arr, isOdd)):
// [ 1, 3, 5, 7, 9, 11 ]

// For filtering out even numbers

filterFunction(arr, isEven)
// Output of console.log(filterFunction(arr, isEven)):
// [ 2, 4, 6, 8, 10 ]

This way we are passing logic functions like isOdd or isEven as arguments to another function filterFunction.

We are basically abstracting out the main filtering logic from the main function. We can now pass any other filtering logic as we like to filterFunction without needing to change it.

For example, if we want to filter out a number greater than 5 then we just need to write the following filtering logic:

function isGreaterThanFive(x) {
  return x > 5;
}

and pass it as an argument to filterFunction:

filterFunction(arr, isGreaterThanFive)

// Output of console.log(filterFunction(arr, isGreaterThanFive)):
// [ 6, 7, 8, 9, 10, 11 ]

We can also pass the logic function as an arrow function and get the same result – that is, passing (x) => x > 5) in place of isGreaterThanFive will give us the same result.

filterFunction(arr, (x) => x > 5)

// Output of console.log(filterFunction(arr, (x) => x > 5)):
// [ 6, 7, 8, 9, 10, 11 ]

How to Create Polyfills

We know that JavaScript provides us with some inbuilt higher order functions like map(), filter(), reduce() and so on. Can we recreate our own implementation of these functions? Let's deep dive a little bit more.

We already created our filtering function in the above section. Let's create an array prototype of our filterFunction function so that we can use it with any array. This will look something like this:

Array.prototype.filterFunction = function (callback) {
  const filteredArr = [];
  for (let i = 0; i < this.length; i++) {
    callback(this[i]) ? filteredArr.push(this[i]) : null;
  }
  return filteredArr;
};

In the above code, this refers to the array the prototype is called upon. So if we write something like:

const arr = [1, 2, 3, 4, 5]
arr.filterFunction(callbackFn)

then this would refer to the array arr.

Now we can use the filterFunction just like we use the inbuilt filter() function in JS. We can write something like this:

arr.filterFunction(isEven)

which is similar to calling the inbuilt filter() function:

arr.filter(isEven)

Both the above function calls (that is arr.filterFunction(isEven) and arr.filter(isEven)) will give us same output, like [ 2, 4, 6, 8, 10 ].

Similarly, we can also pass an arrow function in our prototype implementation as we can pass in the inbuilt filter() function.

// I
arr.filterFunction((x) => x % 2 != 0)
arr.filter((x) => x % 2 != 0)
// both give the same output on console.log: [ 1, 3, 5, 7, 9, 11 ]

// II
arr.filterFunction((x) => x > 5)
arr.filter((x) => x > 5)
// both give the same output on console.log: [ 6, 7, 8, 9, 10, 11 ]

In a way, we have written a polyfill for the inbuilt filter() function.

Function Chaining

We can also implement function chaining with our prototype implementation like we can with the inbuilt filter() function. Let's first filter out all the numbers greater than 5. Then from the result, we'll filter out all the even numbers. It will look something like this:

// Using our own filterFunction() prototype implementation
arr.filterFunction((x) => x > 5).filterFunction((x) => x % 2 === 0)

//Using the inbuilt filter() implementation
arr.filter((x) => x > 5).filter((x) => x % 2 === 0)

// both give the same output on console.log: [ 6, 8, 10 ]

This is how we can use higher order functions in JS to write mode modular, cleaner and, more maintainable code.

Next, let's look at how we can return a function from another function.

Image

How to Return a Function from Another Function in JavaScript

We can return a function from another function because we treat functions in JavaScript as values. Let's see this through an example:

function calculate(operation) {
  switch (operation) {
    case "ADD":
      return function (a, b) {
        console.log(`${a} + ${b} = ${a + b}`);
      };
    case "SUBTRACT":
      return function (a, b) {
        console.log(`${a} - ${b} = ${a - b}`);
      };
  }
}

In the above code, when we invoke the function calculate with an argument, it switches on that argument and then finally returns an anonymous function. So if we call the function calculate() and store its result in a variable and console log it, we will get the following output:

const calculateAdd = calculate("ADD");
console.log(calculateAdd);

// Output: 
// [Function (anonymous)]

You can see that calculateAdd contains an anonymous function that the calculate() function returned.

There are two ways to call this inner function which we'll explore now.

Call the returned function using a variable

In this method, we stored the return function in a variable as shown above and then invoked the variable to in turn invoke the inner function.

Let's see it in code:

const calculateAdd = calculate("ADD");
calculateAdd(2, 3);
// Output: 2 + 3 = 5


const calculateSubtract = calculate("SUBTRACT");
calculateSubtract(2, 3);
// Output: 2 - 3 = -1

So what'd we do here?

  • We called the calculate() function and passed ADD as the argument
  • We stored the returned anonymous function in the calculateAdd variable, and
  • We invoked the inner returned function by calling calculateAdd() with the required arguments.

Call the returned function using double parentheses

This is a very sophisticated way of calling the inner returned function. We use double parentheses ()() in this method.

Let's see it in code:

calculate("ADD")(2, 3);
// Output: 2 + 3 = 5

calculate("SUBTRACT")(2, 3);
// Output: 2 - 3 = -1

You can thinks about this in a similar way to our chaining example above. It's just that instead of chaining functions, we chain the arguments.

The arguments in the first parentheses belong to the outer function, while the arguments in the second parentheses belong to the inner returned function.

The calculate() method returns a function as explained earlier, and it is that returned function which is immediately called using the second parentheses.

As I mentioned above, it's a very sophisticated way of calling a function. But once you get the hang of it, it becomes...well quite natural.

One place where we can see this kind of double parentheses notation is in the connect method in the redux state management library. You can read more about connect here.

Summary

In this article, we learned:

  • Why functions are called first class citizens in JS
  • What are higher order functions
  • How to pass a function as an argument to another function
  • How to create an array prototype, function chaining, writing our own polyfill for the inbuilt filter() method
  • How to return a function from another function and different ways to call the returned function

Wrapup

Thanks for reading! I really hope you found this article on higher order functions useful. Stay tuned for more amazing content. Peace out! 🖖

Image

]]>