Core Concepts of the Project

Before getting started with the actual implementation of the character counter application, let’s look into the necessary concepts you need to know. In this lesson, we will look into the basic concept behind the actual working of the character counter application in JavaScript.

Components

Components play an important role in the React JS framework. Components are based on the ‘break it down to build it’ concept, which means each component is developed individually and then assembled to build a complete user interface. It provides:

• Component reusability across different parts of the application to reduce writing repeated codes.
• The efficient way to test each component, rectify the errors and modify only the specific component.
• Consistent user interface to ensure a uniform look and feel throughout the application.

Functions

The main logic of the character counter application can be written in the form of functions using JavaScript. This defines logic for dynamically calculating the number of characters and words in the application whenever the user inputs the text. Let’s look into five main functions we used for this application.

useState()

• It allows you to add state to functional components.
• It's used to store and update dynamic values in the component.
• Syntax:

replace()

• It allows you to replace part of a string with another string.
• It's used to substitute specified characters or substrings in a string.
• Syntax:

trim()

• It allows you to remove whitespace from both ends of a string.
• It's used to clean up strings by removing extra spaces at the start and end.
• Syntax:

split()

• It allows you to divide a string into an array of substrings.
• It's used to break a string into parts using a specified separator.
• Syntax:

Method for calculations

To calculate the number of characters (with and without spaces) and words, we use different combinations of methods. Let’s look into the methods we used in this project.

// To calculate the character count including spaces
const characterCount = text.length;
// To calculate the character count excluding spaces
const characterCountWithoutSpaces = text.replace(/\s/g, "").length;
// To calculate the word count by using space as a separator
const wordCount = text.trim() === "" ? 0 : text.trim().split(/\s+/).length;

In the next lesson, we will get into the actual implementation and styling of the application.