Sufiyan Akbani, Author at Perficient Blogs

Exploring AngularJS Routing: A Practical Guide

Sufiyan Akbani — Fri, 05 Apr 2024 06:56:35 +0000

AngularJS is a widely adopted JavaScript framework, arming developers with a rich arsenal of tools to engineer dynamic and captivating web applications. Notably, its robust routing capabilities emerge as a key pillar for constructing Single Page Applications (SPAs). Effectively orchestrating navigation and dynamically presenting diverse content sans the need for complete page refreshes, AngularJS routing emerges as a cornerstone in contemporary web development.

In this comprehensive guide, we will embark on a detailed exploration of AngularJS routing, meticulously dissecting its foundational principles. Moreover, we will equip you with tangible instances to foster a more profound comprehension and proficiency in navigating this vital element. Nevertheless, before delving into the complexities of AngularJS routing, it’s crucial to take a moment to explore the benefits inherent in Single Page Applications (SPAs). Then, we’ll explore how to implement both an about route as dynamic content and a product route as a dynamic route with practical code examples.

Benefits of Building SPAs with AngularJS Routing

Building SPAs with AngularJS brings a myriad of benefits to both developers and end-users. Some of these include:

Enhanced User Experience

By requesting only necessary information and resources from the server, Single-Page Applications (SPAs) maximize performance by reducing latency and enhancing overall speed and efficiency. Our optimized Method guarantees quick loading times and improves user experience by prioritizing relevant content delivery.

Improved Performance

SPAs fetch just the vital records and assets from the server, reducing latency and enhancing performance.

Simplified Development

AngularJS streamlines development by supplying a modular, element-based design that makes large-scale applications easier to manipulate and preserve.

Cross-Platform Compatibility

SPAs built with AngularJS are inherently cell-pleasant and can be easily adapted for diverse devices and display sizes.

Now that we’ve covered the blessings of SPAs, let’s investigate AngularJS routing and how it improves dynamic and attractive internet apps.

Understanding AngularJS Routing

AngularJS routing is based on the concept of mapping URLs to different views or templates within the application. It enables developers to define routes and associate each route with a specific template and controller. When a user navigates to a particular URL, AngularJS loads the associated template and controller, updating the view dynamically without requiring a full page reload.

Understanding Dynamic Content

Dynamic content refers to website elements or data that can change dynamically without requiring a full page reload. This dynamism enables developers to create more engaging and personalized user experiences by updating content in real-time based on user interactions or other factors. In AngularJS, dynamic content is typically achieved through data binding and the manipulation of model data.

Understanding Dynamic Routes

However, dynamic routes allow developers to outline routes with dynamic parameters that could be exchanged primarily based on person entry or other situations. These dynamic parameters act as placeholders in the route path, capturing values from the URL and allowing for the dynamic rendering of content. Dynamic routes provide a flexible and powerful mechanism for handling different types of content within an application.

Key Concepts

1. ngRoute

ngRoute is a module provided by AngularJS that enables routing capabilities in an application. Including this module as a dependency when defining an AngularJS application that utilizes routing is essential.

2. $routeProvider

The $routeProvider service is a crucial component of critical routing. It allows developers to configure routes within an application by defining URL paths and associating them with specific templates and controllers.

3. ng-view Directive

The ng-view directive plays a crucial role in AngularJS, indicating precisely where within an HTML template AngularJS should inject the contents of the current route’s template. It is a placeholder for rendering dynamic perspectives based on the cutting-edge route.

4. Controllers

Controllers in AngularJS are JavaScript functions that are responsible for defining the behavior and data associated with a particular view.It plays a crucial role in separating concerns within an application by handling view logic and interactions.

5. Template

In AngularJS routing, a template denotes an HTML file representing a distinct view within the application. These templates are linked with routes and dynamically loaded and rendered based on the current accessed route.

6. otherwise Method

The otherwise() Method specifies a default route to navigate if the requested route doesn’t match any of the defined routes. It ensures users are redirected to a designated route when accessing unrecognized URLs.

Example AngularJS Routing Implementation

Let’s dive into a practical example to demonstrate AngularJS routing in action.

Setting Up AngularJS Routing

To use routing in an AngularJS application, you first need to include the AngularJS and ngRoute libraries for your undertaking (index.html). You can download them from the official website or include them via a CDN link in your HTML file.

You can also leverage package managers like NPM to manage your project dependencies more efficiently.

npm install angular angular-route

By going for walks with the above command, you may set up AngularJS and the angular-path module, which offers routing competencies, as dependencies in your project.

Once you’ve included AngularJS, you can define your application module and configure routing using the $routeProvider service provided by AngularJS.

routeProvider.js

var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix("");
  $routeProvider
    .when("/", {
      templateUrl: "views/home.html",
      controller: "HomeController",
    })
    .when("/about", {
      templateUrl: "views/about.html",
      controller: "AboutController",
    })
    .when("/product/:id", {
      templateUrl: "views/product.html",
      controller: "ProductController",
    })
    .otherwise({ redirectTo: "/" });
});

app.controller("MainController", function ($scope) {
  // MainController logic here
});

In the above code:

We define the application module `myApp` and specify the dependency on the `ngRoute` module, which provides routing capabilities.
We configure routes using the `$routeProvider.when()` Method. Each route definition consists of a URL path, a template URL, and, optionally, a controller.
We’ve added the $locationProvider.hashPrefix(”) configuration to remove the default hashbang (#!) from the URL.
The `otherwise()` Method specifies the default route to navigate if the requested route doesn’t match any defined routes.

Creating Views and Controllers

Now that we’ve configured routing let’s create the views and controllers for our routes.

Home View and Controller

Create a file named home.html inside a directory called views. This will be the template for the home route.

home.html


  Welcome to the Home Page
  This is the home page of our AngularJS application.

Next, create a controller named HomeController in the routeProvider.js file.

routeProvider.js

app.controller("HomeController", function ($scope) {
  //Home Controller logic here
});

Implementing Dynamic Content and Routes

Let’s now see how we can implement both an about route as dynamic content and a product route as a dynamic route in an AngularJS application.

About View and Controller as Dynamic Content

Let’s observe how we can enforce dynamic content in AngularJS. Similarly, create a report named about.html in the perspectives listing.

about.html


  {{ pageTitle }}
  {{ pageContent }}

In this about.html template:

We use AngularJS expressions ({{ }}) to dynamically render the page title and content, which are bound to the corresponding scope variables (pageTitle and pageContent) set in the AboutController.
When navigating the About page, users will see the dynamically populated title and content.

In the AboutController, we can dynamically set the page title and content based on route parameters or any other logic specific to the about page. Then, define the AboutController by adding the mentioned code in the routeProvider.js file.

routeProvider.js

app.controller("AboutController", function ($scope) {
  $scope.pageTitle = "About Us";
  $scope.pageContent = "Learn more about our company and mission here.";
});

Product View and Controller as Dynamic Route

Create the product view template (product.html) and define the corresponding controller (ProductController) to handle the dynamic product data.

product.html


  Product Details
  ID: {{ productId }}

In the above product.html template, we display the product details, including the product ID obtained from the $routeParams service.

Then, define the ‘ProductController’ by adding the mentioned code in the routeProvider.js file.

routeProvider.js

app.controller('ProductController', function($scope, $routeParams) {
  $scope.productId = $routeParams.id;
  // Fetch product data based on the ID and update the view
});

The ProductController extracts the product ID from the route parameters and can then use it to fetch the corresponding product data from the server or another data source.

Linking Routes to Navigation

For seamless navigation between various routes, leverage the ng-href directive within your HTML to establish links to different paths specified in your route definitions.

index.html


  
    Home
    About
    Product 1
    Product 2

Note: When implementing AngularJS routing, remember to add the ng-app= “myApp” attribute to the opening tag in your index.html file. Additionally, link the routeProvider.js file in your index.html to enable routing functionality.

The ng-view directive is a placeholder where AngularJS will inject the templates associated with the current route.

Output

Conclusion

AngularJS routing provides a powerful mechanism for building SPAs by enabling navigation between different views without page reloads. Developers can create dynamic and interactive web applications by configuring routes, defining templates, and linking them to controllers. With the examples and explanations provided in this guide, you should now understand AngularJS routing and be well-equipped to leverage it in your projects.

Remember to explore further documentation and best practices to enhance your routing implementation and create seamless user experiences in your AngularJS applications. Happy coding!

Exploring Basics of React’s useReducer and useRef Hooks

Sufiyan Akbani — Thu, 04 Apr 2024 10:00:56 +0000

In the vast landscape of React development, developers are armed with powerful tools to navigate challenges effortlessly: the useReducer and useRef hooks. This guide offers a deep dive into these hooks, unveiling their functionalities, adaptable use cases, and advanced methodologies.

What is `useReducer`?

The useReducer hook in React is a cornerstone for managing state, offering a more nuanced approach than its counterpart, useState. Its value shines brightest when grappling with intricate state logic, especially in scenarios where the state comprises multiple sub-values or the next state hinges on its predecessor.

Basic Usage

Let’s start with a basic example. Suppose we have a counter component. Instead of resorting to useState, developers can employ useReducer to orchestrate state management within their React applications.

Counter.js

import React, { useReducer } from "react";

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    
      Count: {state.count}
      
      
    
  );
}

export default Counter;

Within this demonstration, the reducer function operates as a pivotal entity responsible for processing both the current state and an action, ultimately yielding a fresh state contingent upon the nature of the action. Through the utilization of the useReducer hook, we seamlessly integrate this reducer function alongside the initial state. This amalgamation furnishes us with access to the current state and a potent dispatch function, empowering us to propagate actions directly to the reducer, thereby orchestrating state transformations with precision and efficiency.

Output

Advanced Usage

useReducer can handle more complex state objects. You can use it with objects, arrays, or any other data structure. Additionally, you can combine it with useContext for global state management or optimize performance with useMemo and useCallback.

Now, let’s explore an advanced usage scenario of useReducer with a more complex state object:

AdvancedCounter.js

// AdvancedCounter.js
import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  showText: false
};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'toggleText':
      return { ...state, showText: !state.showText };
    default:
      throw new Error();
  }
}

function AdvancedCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    
      
        Count: {state.count}
        
      
      
        
        {state.showText && This is a dynamic text!}
      
    
  );
}

export default AdvancedCounter;

In this example, our state object comprises both a counter and a Boolean value to toggle text visibility. The reducer function now handles both incrementing the count and toggling the text display.

Output

What is `useRef`?

The useRef hook is another essential hook in React. It is primarily used for accessing and manipulating DOM elements directly. Unlike useState or useReducer, changes to a ref don’t cause a re-render. Such versatility makes it apt for various tasks, ranging from overseeing focus management and instigating imperative animations to seamlessly integrating with third-party DOM libraries.

Basic Usage

Let’s create a simple instance to apprehend how useRef works. Suppose we have a form component that requires focusing on an input field when it mounts.

Form.js

import React, { useRef, useEffect } from 'react';

function Form() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    
      
      
    
  );
}

export default Form;

In the illustration provided, useRef emerges as the linchpin, facilitating the establishment of a reference to the input element within the component’s scope. Subsequently, leveraging the effect hook, we orchestrate the focus onto the input element upon the component’s initial rendering, meticulously ensuring that this operation occurs precisely once through the judicious utilization of an empty dependency array [].

Output

Advanced Usage

useRef is not limited to DOM elements, it can also persist mutable values across renders without causing re-renders. This property makes it useful for storing previous values, caching values between renders, or interacting with imperative APIs.

Now, let’s discover a complicated utilization scenario where useRef is hired to persist mutable values:

AdvancedForm.js

// AdvancedForm.js
import React, { useRef, useEffect } from "react";

function AdvancedForm() {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current++;
  });

  return (
    
      This component has rendered {renderCount.current} times.
    
  );
}

export default AdvancedForm;

Within this instance, useRef is ingeniously harnessed to maintain the tally of component renderings throughout successive re-renders, all the while circumventing the unnecessary triggering of additional renders. By employing this tactic, we ensure the seamless preservation of the render counts across iterations, thus exemplifying the versatile capabilities of the useRef hook in React development.

Output

Conclusion

In this guide, we’ve explored two effective hooks supplied by React: useReducer and useRef. useReducer is a versatile tool for dealing with complicated state logic, while useRef gives direct get entry to DOM elements and permits for staying power of mutable values. Understanding and mastering those hooks will notably enhance your React development skills, allowing you to construct greater green and robust packages. Start integrating them into your projects and explore their full potential!

Understanding JavaScript Web APIs: Part 3

Sufiyan Akbani — Tue, 26 Mar 2024 08:07:41 +0000

Welcome back to the third part of our series on essential Web APIs! If you haven’t had the opportunity to explore Part 2 yet, where we extensively covered the nuances of the Web History API and Web Storage API, I encourage you to catch up here to gain valuable insights into efficiently managing browser history and local data storage. And for newcomers, don’t overlook Part 1, where we thoroughly examined the fundamental principles of the Web Forms API, which you can access right here. In this segment, we’ll be venturing into additional Web APIs, including Web Workers, Web Fetch, and Web Geolocation, which elevate web development possibilities.

Let’s start our journey into understanding these fundamental tools for web development.

Web Workers API:

Web Workers provide the capability to execute JavaScript code independently in the background, distinct from the primary execution thread. This enables tasks to be performed without blocking the user interface. Let’s see an example:

Here’s a simple example demonstrating the usage of Web Workers API:

HTML:

JavaScript:

let worker;

function startWorker() {
  if (typeof Worker !== "undefined") {
    if (typeof worker == "undefined") {
      worker = new Worker("worker.js");
    }
    worker.onmessage = function (event) {
      console.log("Message received from worker: " + event.data);
    };
  } else {
    console.log("Web Workers not supported in this browser.");
  }
}

Explanation:

In HTML, a button is created to start the web worker. In JavaScript, the ‘startWorker()’ function checks if the browser supports web workers. If the capability is available, it establishes a fresh web worker and designates an ‘onmessage’ event handler to accept messages from the worker.

worker.js:

setInterval(() => {
  postMessage("Hello from the worker!");
}, 1000);

Explanation:

In the worker.js file, we define the background task the worker will perform. In this instance, the worker transmits a message “Hello from the worker!”. Subsequently, data is dispatched to the main script at one-second intervals via the postMessage() method. We use setInterval() to repeat this process every second.

Output:

Web Fetch API:

The Fetch API furnishes a means to asynchronously retrieve resources, such as JSON or HTML, from the network. Its capabilities surpass those of XMLHttpRequest, offering a more robust and adaptable approach to making HTTP requests. Below is a summary of its operational capabilities:

HTML:

JavaScript:

function fetchData() {
  fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error("Error fetching data:", error));
}

Explanation:

Clicking the button triggers the fetchData() function, which makes a GET request to the specified URL (in this case, a free API provided by JSONPlaceholder) using the fetch() function. The reply is transformed into JSON format through the utilization of the json() method. If successful, the data (in this case, details of a post) is logged into the console. Otherwise, any errors are caught and logged.

Output:

Web Geolocation API:

Web applications may obtain a user’s device’s geographical position by using the Web Geolocation API. It has features that allow the user to see changes in location over time, access their current position, and get data about latitude, longitude, altitude, direction, speed, and accuracy. With the help of this API, developers may build location-aware web apps like weather predictions, mapping services, and location-based alerts.

Let’s explore some of the key functions and properties along with code examples:

getCurrentPosition():

It fetches the user’s current geographical coordinates, offering details such as latitude, longitude, altitude, precision, direction, velocity, and timestamp.

Example:

//JavaScript
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function successCallback(position) {
  console.log("Latitude: " + position.coords.latitude);
  console.log("Longitude: " + position.coords.longitude);
}

function errorCallback(error) {
  console.error("Error:", error.message);
}

Output:

watchPosition():

Monitors changes in the user’s position over time, continuously updating as the user moves, allowing for real-time tracking in applications.

Example:

//JavaScript
let watchID = navigator.geolocation.watchPosition(
  successCallback,
  errorCallback
);

function successCallback(position) {
  console.log("Latitude: " + position.coords.latitude);
  console.log("Longitude: " + position.coords.longitude);
}

function errorCallback(error) {
  console.error("Error:", error.message);
}

Output:

clearWatch():

Stops watching the user’s position, terminating the ongoing monitoring initiated by ‘clear watch ().’

Example:

//JavaScript
navigator.geolocation.clearWatch(watchID)

coords.latitude and coords.longitude:

Express the user’s current position by showcasing latitude and longitude coordinates, offering precise geographical coordinates.

Example:

//JavaScript
console.log("Latitude: " + position.coords.latitude);
console.log("Longitude: " + position.coords.longitude);

coords.accuracy:

It is a measure of the reliability of the position based on the accuracy of the retrieved position data.

Example:

// JavaScript
console.log("Accuracy: " + position.coords.accuracy + " meters");

coords.altitude and coords.altitudeAccuracy:

In this function, the developer receives information regarding the user’s altitude and the accuracy of their measurements, if any.

Example:

// JavaScript
console.log("Altitude: " + position.coords.altitude + " meters");
console.log("Altitude Accuracy: " + position.coords.altitudeAccuracy + " meters");

coords.heading:

This indicates the direction in which the user’s device travels, presented in degrees relative to true north.

Example:

// JavaScript
console.log("Heading: " + position.coords.heading + " degrees");

coords.speed:

Denotes the velocity of the user’s device motion, usually measured in meters per second.

Example:

// JavaScript
console.log("Speed: " + position.coords.speed + " meters per second");

timestamp:

Provides the timestamp indicating when the position data was acquired, facilitating temporal analysis or synchronization with other events.

Example:

// JavaScript
console.log("Timestamp: " + position.timestamp);

Conclusion:

In this segment of our series, focusing on crucial Web APIs, we delved into the dynamic functionalities offered by Web Workers, Web Fetch, and Web Geolocation APIs. These APIs expand the horizons of web development, offering solutions for background tasks, network requests, and location-based functionalities. Stay tuned for more insights and practical examples in our ongoing exploration of Web APIs!

Understanding JavaScript Web APIs: Part 2

Sufiyan Akbani — Sun, 24 Mar 2024 10:17:49 +0000

Welcome back to the continuation of our journey through crucial Web APIs! For newcomers to our series, I highly recommend diving into Part 1, accessible here, where we extensively cover the fundamental aspects of the Web Forms API. Continuing our journey, let’s delve into further exploration of vital Web APIs, including the Web History API and Web Storage API. With the Web History API enabling effortless navigation through browsing history and the Web Storage API providing flexible storage solutions via local storage and session storage, we’re set to uncover their functionalities in detail.

Web History API

The Web History API encompasses methods and properties that enable JavaScript to interact with the browser’s history stack. It equips developers with tools to navigate user browsing history, manage session history, and execute operations pertinent to page navigation.

Let’s explore some of the key functions and properties along with code examples:

back():

go():

In essence, history.go() is a crucial function within the Web History API, empowering users to traverse their browsing history programmatically. This method, accepting positive or negative integers as arguments, facilitates navigation forward or backward by the designated number of pages, mirroring the functionality of the browser’s navigation controls.

forward():

Put plainly, history.forward() is a function in the Web History API permitting users to advance to the subsequent page in their browsing history. It mimics the action of clicking the forward button in the browser, facilitating seamless navigation through visited pages.

length:

In simple terms, history.length is a property in the Web History API representing the number of entries in the browsing history stack. Each entry corresponds to a unique URL visited by the user during the current browsing session.

Here’s a simple example demonstrating the usage of Web History API key functions and properties:

HTML:

JavaScript:

function goBack() {
  window.history.back();
}
function goFunction() {
  window.history.go(1); // Go forward one page
}
function checkHistoryLength() {
  let length = window.history.length;
  console.log("Number of pages in history:", length);
}
function goForward() {
  window.history.forward();
}

In the JavaScript code, four functions are defined to interact with the Web History API:

goBack(): When the associated button clicks, it calls history.back(), navigating to the previous page in the browsing history.
goForward(): When the associated button is clicked, it calls history.forward(), navigating to the next page in the browsing history.
goToPage(): When the associated button is clicked, it calls history.go(2), navigating two pages forward in the browsing history.
displayHistoryLength(): This function fetches the total count of pages stored in the browsing history stack using ‘window.history.length’ and then outputs this count to the console for reference.

This example demonstrates how JavaScript can be used to create interactive navigation controls that enhance the user experience by leveraging the Web History API.

Web Storage API

The Web Storage API in web browsers enables developers to store data locally. It offers two main mechanisms: localStorage and sessionStorage, allowing storage of key-value pairs.

localStorage: This approach enables data to be stored without any predefined expiration, ensuring its persistence across browser sessions, including closure and reopening.
sessionStorage: This mechanism stores data for the duration of the page session. The stored data is cleared when the page session ends, typically when the user closes the browser tab.

Let’s explore some of the methods and properties along with code examples:

setItem():

Put plainly, setItem() is a function within the Web Storage API that permits storing data directly in the user’s browser. It saves data in key-value pairs, each being distinct and linked to a particular value.

Here’s an example demonstrating the usage of setItem():

HTML:

JavaScript:

function saveData() {
    localStorage.setItem('username', 'John');
    console.log('Data saved successfully.');
}

In the provided JavaScript code, the saveData() function is defined. Upon clicking the designated button, the function is activated. Encapsulated within the script is localStorage.setItem(‘username’, ‘John’), where the value ‘John’ is designated to the local storage key ‘username’. This functionality ensures the secure preservation of user-specific details, such as preferences or settings, guaranteeing their accessibility throughout the browsing session. Leveraging JavaScript’s simplicity, developers seamlessly integrate local storage functionality, enhancing web application user experience.

Output:

getItem():

Put plainly, getItem() serves as a function within the Web Storage API, enabling the retrieval of locally stored data in the user’s browser. This method grants access to the value linked to a particular key set earlier via the setItem() method.

Here’s a simple example demonstrating the usage of getItem():

HTML:

JavaScript:

function retrieveData() {
    let username = localStorage.getItem('username');
    console.log('Username:', username);
}

In the provided JavaScript code, the retrieveData() function is defined. Upon activation of the designated button, the function is initiated. Within its confines, the script localStorage.getItem(‘username’) retrieves the value linked to the ‘username’ key from the browser’s local storage. This retrieved value is subsequently allocated to the variable username, facilitating access and display of the stored data. JavaScript’s adaptability and straightforwardness make it indispensable in web development, empowering developers to craft resilient and feature-laden web applications with local storage capabilities.

Output:

key(n):

Put plainly, key(n) is a function within the Web Storage API permitting the retrieval of the name of the key housed at a designated index position in the storage. This functionality facilitates sequential access to key names, traversing through all keys stored within the browser’s storage system.

Here’s a simple example demonstrating the usage of key(n):

HTML:

JavaScript:

function displayKey() {
  let keyName = localStorage.key(0);
  console.log("First key:", keyName);
}

In the provided JavaScript code, the displayKey() function is defined. Upon clicking the related button, this function activates. Within the function scope, localStorage.key(0) fetches the identifier of the key stored at index 0 within the browser’s local storage. Subsequently, this retrieved key is assigned to the variable keyName, facilitating its utilization for accessing and presenting the respective key. This technique permits iteration through all the keys stored in the local storage, facilitating actions tailored to each. JavaScript’s adaptability and straightforwardness establish it as a cornerstone in web development, empowering developers to craft dynamic and engaging web applications.

Output:

length:

Length is a property within the Web Storage API that furnishes the count of key-value pairs housed in the browser’s storage. It furnishes a means to ascertain the overall count of items in storage, facilitating iteration or other actions reliant on the storage’s magnitude.

For instance, consider this straightforward illustration showcasing the application of length:

HTML:

JavaScript:

function displayLength() {
    let totalItems = localStorage.length;
    console.log('Total items:', totalItems);
}

In the provided JavaScript code, the displayLength() function is defined. Upon clicking the designated button, activation of this function ensues. Within its confines, localStorage.length retrieves the collective count of key-value pairs archived in the browser’s local storage. This resultant value is then allocated to the variable total items, facilitating the assessment of storage magnitude. JavaScript’s inherent ease of use and adaptability make it an indispensable ally in the realm of web development, empowering creators to fashion vibrant and immersive web experiences complete with features like local storage.

Output:

removeItem(keyname):

Put plainly, removeItem() is a function within the Web Storage API that serves to eliminate a designated key-value pair from the browser’s storage. It operates by accepting the key name as input and subsequently erasing the associated value, thus effectively expunging the item from the storage repository.

Here’s a simple example demonstrating the usage of removeItem(keyname):

HTML:

JavaScript:

function removeData() {
  localStorage.removeItem("username");
  console.log("Data removed successfully.");
}

In the provided JavaScript code, the removeItem() function is defined. Upon clicking the designated button, activation of this function ensues. Within its scope, the script localStorage.removeItem(‘username’) undertakes the removal of the key-value pair bearing the identifier ‘username’ from the browser’s local storage. This action effectively removes the item, allowing you to clean up unnecessary data stored in the browser. JavaScript’s simplicity and versatility make it a fundamental tool for web development, enabling developers to create robust and feature-rich web applications with functionalities like local storage manipulation.

Output:

clear():

Put plainly, clear() is a method within the Web Storage API that enables the wholesale removal of all key-value pairs housed within the browser’s storage mechanism. It effectively clears the entire storage, removing all data stored within it.

Here’s a simple example demonstrating the usage of clear():

HTML:

JavaScript:

function clearStorage() {
    localStorage.clear();
    console.log('Storage cleared successfully.');
}

In the provided JavaScript code, the clearStorage() function is defined. When the associated button is clicked, this function is triggered. Inside the function, localStorage.clear() removes all key-value pairs from the browser’s local storage. This action effectively clears the entire storage, removing all data stored within it. JavaScript’s versatility and ease of use position it as an essential asset in web development, granting developers the capability to effectively oversee browser storage for diverse applications, including caching, session control, and user preferences management.

Output:

Conclusion:

In this part, we’ve explored the foundational aspects of JavaScript Web APIs, focusing on the Web History API for navigation control and the Web Storage API for local data storage. These APIs are essential tools for building robust and interactive web applications. Stay tuned for Part 3 where we’ll explore additional crucial Web APIs. Click here to read Part 3.

Keep exploring and innovating with JavaScript!

Exploring HTML Template Engines for Node.js

Sufiyan Akbani — Fri, 22 Mar 2024 10:41:56 +0000

The fusion of HTML template engines with Node.js has sparked a transformative wave in web development, reshaping the landscape of dynamic web application creation. These engines give developers an efficient means of dynamically generating HTML content, effectively elevating the readability and manageability of code repositories. Over the course of this blog post, we will embark on an exploration of three leading HTML template engines tailored for Node.js: Pug, EJS, and Handlebars. Our journey will encompass not only the integration of these engines into a Node.js application but also elucidating their practical usage through illustrative examples. Moreover, we’ll guide you through the process of building a Node.js application from scratch, detailing the integration of each template engine and exploring their advanced functionalities.

Understanding HTML Template Engines

Before we embark on exploring the distinctive traits of individual template engines, it’s vital to grasp the foundational significance of template engines in the landscape of Node.js web development.

HTML template engines streamline the process of generating dynamic HTML content by seamlessly integrating HTML markup with dynamic data and logic. They streamline the process of generating HTML by providing mechanisms for embedding variables, conditionals, loops, and partials directly within HTML files. This segregation between presentation and logic fosters enhanced code reusability and maintainability, facilitating smoother development processes.

Step 1: Setting Up the Node.js Application

We’ll kickstart the process by initializing a fresh Node.js application and configuring the essential dependencies.

mkdir node-template-engine-app

cd node-template-engine-app

npm init -y

Step 2: Installing Dependencies

In this step, we’ll incorporate Express.js, a speedy, unopinionated, and minimalist web framework designed for Node.js. It offers a comprehensive suite of features tailored for web and mobile applications.

npm install express

Step 3: Creating the Folder Structure

Create a views folder in the project’s root directory. This folder will contain the template files for each template engine.

mkdir views

Step 4: Creating Template Files

Create template files for each template engine – index within the views folder index.pug, index.ejs, and index.handlebars.

Let’s explore each of these template engines in detail.

1. Pug (formerly Jade)

Pug, formerly known as Jade, is a feature-rich template engine for Node.js and browsers. It boasts a concise and expressive syntax, utilizing indentation and line breaks to define HTML structure, thus eliminating the need for verbose HTML tags.

Installation:

npm install pug

Example:

doctype html
html(lang="en")
  head
    title My Website
  body
    h1 Welcome to My Website – Pub HTML Template Engine
    p#intro Hello, #{name}!

Advanced Features of Pug:

Pug offers advanced features such as mixing, includes, and filters, enabling developers to create reusable components and effortlessly extend functionality.

Create a new file named header.pug in the view’s directory:

header.pug:

header
    nav
        ul
            li Home
            li About
            li Contact

This header.pug file defines a header section with a navigation menu containing links to Home, About, and Contact pages.

Create a new file named footer.pug in the view’s directory:

footer.pug:

footer
    p © 2024 My Website. All rights reserved.

This footer.pug file defines a footer section with a copyright notice.

Now, you can include header.pug and footer.pug in your index.pug file to create a complete webpage layout.

index.pug:

doctype html
html(lang="en")
  head
    title Welcome to My Website – Pub HTML Template Engine
  body
    include header.pug
    main
      h1 Welcome #{name} to My Website
    include footer.pug

The Pug code snippet provides a concise and expressive structure for an HTML document, starting with a declaration of the doctype and defining the language attribute for the HTML tag. The document includes a header section, a main content area featuring a welcoming heading with dynamic interpolation of the name variable (e.g., #{name}), and a footer section. The use of indentation signifies the nesting of elements, enhancing readability and maintaining a clean visual structure. The include directive seamlessly incorporates separate Pug files for the header and footer sections, promoting code modularity and reusability. Overall, the Pug code succinctly organizes the components of the HTML document, facilitating efficient development and maintenance of web pages.

2. EJS (Embedded JavaScript)

EJS, or Embedded JavaScript, is a simple and powerful template engine for Node.js. It allows developers to embed JavaScript code directly within HTML markup, making injecting dynamic data and logic into templates easy.

Installation:

npm install ejs

Example:



  
    
    
    My Website
  
  
    Welcome to My Website
    Hello, <%= name %>!

Advanced Features of EJS:

EJS supports dynamic templates and conditional rendering, allowing developers to easily create dynamic and responsive layouts.

index.ejs:



  
    
    
    My Website
  
  
    <% if (loggedIn) { %>
    Welcome <%= username %>
    <% } else { %>
    Welcome Guest
    <% } %>

The EJS code snippet presents an HTML document structure where dynamic content is seamlessly integrated using Embedded JavaScript syntax. It includes conditional logic to display a personalized welcome message based on the loggedIn status. If the user is logged in, their username is dynamically inserted into the heading, otherwise, a default “Welcome Guest” message is displayed. EJS’s capability to embed JavaScript code directly within HTML markup simplifies the process of generating dynamic content, making it a powerful tool for building responsive web applications.

Handlebars

Handlebars is a semantic templating engine with a minimal syntax and powerful features. It adopts a logic-less approach, emphasizing simplicity and user-friendliness. Handlebars templates leverage helpers to extend functionality.

Installation:

npm install express-handlebars

Example:




  
  
  My Website


  Welcome to My Website
  Hello, {{name}}!

Advanced Features of handlebars:

Handlebars provide helpers for extending functionality, enabling developers to implement complex data manipulation and conditional rendering. Furthermore, we’ll introduce the notion of a default layout utilizing a main.hbs file acts as the overarching framework shared among all web pages.

Create a file named main.hbs in a folder named layouts (or any suitable folder name of your choice):

layouts/main.hbs:


  
    
    
    {{title}}
  
  
    
      
        
          Home
          About
          Contact
        
      
    

    
      {{{body}}}
    

    
      © 2024 My Website. All rights reserved.

This HTML template provides the foundation for a web page structure, comprising a header displaying a welcoming message and navigation menu, a main content section designated for dynamic content insertion, and a footer exhibiting copyright information. Harnessing the power of Handlebars templating syntax, the {{ title }} placeholder dynamically populates the page title, while the {{{ body }}} placeholder seamlessly incorporates the main content, facilitating the seamless integration of dynamic data. Consequently, this template is a cornerstone for constructing dynamic web pages, empowering developers to craft responsive and engaging user experiences effortlessly.

index.handlebars:


  
    
    
    My Website
  
  
    {{#if loggedIn}}
      Welcome {{username}}
    {{else}}
      Welcome Guest
    {{/if}}

The Handlebars code snippet defines the structure of an HTML document with dynamic content rendered using Handlebars syntax. It incorporates conditional logic to display a personalized welcome message based on the loggedIn status, seamlessly integrating variables and control structures within the HTML markup. Handlebars’ logic-less templating paradigm promotes simplicity and readability, allowing for efficient data manipulation and rendering of dynamic content. This concise and expressive approach streamlines the development process, making Handlebars an effective choice for building dynamic web applications.

Step 5: Integrating Template Engines in the Node.js App

Now that we’ve set up our Node.js application and integrated various HTML template engines, let’s create separate app.js files for each template engine along with explanations.

For Pug:

app.js:

const express = require("express");
const app = express();

// Set Pug as the view engine
app.set("view engine", "pug");

// Define routes
app.get("/", (req, res) => {
  // Render index.pug with data
  res.render("index", { name: "John" });
});

// Start the server
app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Explanation:

In this app_pug.js file, we set Pug as the view engine using app.set(‘view engine’, ‘pug’). Then, we define a route for the root path (‘/’) that renders the index.pug template and passes it some data (in this case, the title ‘Pug Example’). Lastly, we initiate the server and set it to listen on port 3000.

For EJS:

app.js:

const express = require("express");
const app = express();

// Set EJS as the view engine
app.set("view engine", "ejs");

// Define routes
app.get("/", (req, res) => {
  // Render index.ejs with data
  res.render("index", { loggedIn: true, username: "John" });
});

// Start the server
app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Explanation:

In this app_ejs.js file, we set EJS as the view engine using app.set(‘view engine’, ‘ejs’). Then, we define a route for the root path (‘/’) that renders the index.ejs template and passes it some data (in this case, the loggedIn status and the username). Lastly, we initiate the server and set it to listen on port 3000.

For Handlebars:

app.js:

const express = require("express");
const exphbs = require("express-handlebars");
const app = express();

// Set Handlebars as the view engine
app.engine(
  "handlebars",
  exphbs.engine({
    extname: "handlebars", // Set Handlebars file extension to '.hbs'
    defaultLayout: "main", // Set the default layout file
    layoutsDir: __dirname + "/layouts", // Specify the directory for layout files
  })
);
app.set("view engine", "handlebars");

// Define routes
app.get("/", (req, res) => {
  // Render index.handlebars with data
  res.render("index", { loggedIn: true, username: "John", title: "Home" });
});

// Start the server
app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Explanation:

In this app_handlebars.js file, we set Handlebars as the view engine using app.engine(‘handlebars’, exphbs()) and app.set(‘view engine’, ‘handlebars’). Then, we define a route for the root path (‘/’) that renders the index.handlebars template and passes it some data (in this case, the loggedIn status and the username). Lastly, we initiate the server and set it to listen on port 3000.

These distinct app.js files exemplify the process of configuring and executing a Node.js application utilizing various HTML template engines, highlighting the versatility and seamless integration capabilities provided by each.

Step 6: Running the Node.js Application

Now, let’s run our Node.js application.

node app.js

To observe the output of our application, simply open your web browser and visit localhost:3000. This will display the rendered content generated by our Node.js application.

Output:

Pug:

EJS:

Handlebars:

Choosing the Right HTML Template Engine for Node.js

Each HTML template engine has its unique syntax, features, and advantages. The selection of which template engine to utilize hinges on various factors, including project specifications, individual preferences, and team expertise. Nonetheless, Handlebars is an outstanding option if it prioritizes simplicity and user-friendliness, owing to its logic-less methodology and straightforward syntax. It achieves a perfect equilibrium between adaptability and simplicity, positioning it as an ideal choice for addressing diverse application requirements.

Conclusion

In summary, HTML template engines serve as pivotal components in Node.js web development, streamlining the generation of dynamic HTML content. Whether you choose Pug, EJS, Handlebars, or another template engine, each provides robust features to optimize your development workflow. By comprehending their intricacies and adeptly integrating them into your Node.js applications, you can bolster productivity and deliver outstanding results.

Understanding JavaScript Web APIs: Part 1

Sufiyan Akbani — Thu, 21 Mar 2024 08:07:05 +0000

JavaScript is a central pillar in web development, elevating user engagement and imbuing websites with dynamic capabilities. Among its intriguing components are Web APIs, which facilitate access to diverse browser functionalities. In this segment, we’ll explore these APIs, starting with Part 1: Web Forms API. Let’s commence our exploration of these fundamental tools for web development.

Let’s start our journey into understanding the fundamental tools of Web Forms API.

Web Forms API

The Web Forms API provides developers with tools to interact with and validate form elements. It plays a crucial role in handling form submissions and providing real-time validation feedback to users. Through its methods and properties, the Web Forms API offers extensive capabilities for creating interactive and user-friendly web forms.

Let’s delve into several essential functions and properties, accompanied by code examples:

1. checkValidity()

The checkValidity() function is a crucial method within the Web Forms API that allows developers to validate form inputs before submission. When called on a form element, this function triggers the browser’s built-in validation mechanism. It checks whether all input fields within the form meet their specified validation criteria.

If validation fails for any input fields, the checkValidity() function returns ‘false’, signalling that the form is invalid. Conversely, when all input fields pass validation, the function returns ‘true’, indicating the form is prepared for submission.

Here’s a simple example demonstrating the usage of checkValidity():

HTML Form:

JavaScript:

const submitBtn = document.getElementById("submitBtn");
const usernameInput = document.getElementById("username");
const errorMsg = document.getElementById("error-msg");
console.log("first");
// Display error message when input field loses focus
submitBtn.addEventListener("click", function (event) {
  console.log("clicked");
  if (!usernameInput.checkValidity()) {
    // Prevent form submission
    event.preventDefault();
    // Display custom error message
    errorMsg.textContent = "Please fill out the username field.";
    // Highlight input with red border
    usernameInput.style.border = "1px solid red";
  } else {
    // Clear error message and styling
    errorMsg.textContent = "";
    usernameInput.style.border = "";
  }
});

// Clear error message and styling when user interacts with the input field
usernameInput.addEventListener("input", function () {
  errorMsg.textContent = "";
  usernameInput.style.border = "";
});

This JavaScript code performs form validation for a username input field. It begins by selecting the submit button, username input field, and error message container. Upon clicking the submit button, it verifies the validity of the username input field. If invalid, it halts the form submission, shows a customized error message, and outlines the input field with a red border. Conversely, if the input is valid, it clears any existing error message and styling. Additionally, it listens for input events on the username input field to clear error messages and styling whenever the user interacts with it.

Output:

2. setCustomValidity()

The setCustomValidity() function within the Web Forms API permits developers to define personalized error messages for form components. This facilitates providing detailed feedback to users when their input fails to adhere to specified validation requirements.

Here’s an example demonstrating the usage of setCustomValidity():

HTML Form:

JavaScript:

const form = document.getElementById("myForm");
const usernameInput = document.getElementById("username");
const errorMsg = document.getElementById("error-msg");
// Event listener for form submission
form.addEventListener("submit", function (event) {
  if (!usernameInput.checkValidity()) {
    // Prevent form submission
    event.preventDefault();
    // Display custom error message
    usernameInput.setCustomValidity(
      "Please enter a valid username (at least 07 characters)."
    );
    // Highlight input with red border
    usernameInput.style.border = "1px solid red";
  } 
});

// Event listener for input change
usernameInput.addEventListener("input", function () {
  // Clear error message and styling when user interacts with the input field
  errorMsg.textContent = "";
  usernameInput.style.border = "";
  usernameInput.setCustomValidity("");
});

// Event listener for input validation
usernameInput.addEventListener("invalid", function () {
  // Set custom error message
  usernameInput.setCustomValidity("Please enter a valid username.");
});


document.getElementById("myForm").addEventListener("submit", function (event) {
  if (!emailInput.validity.valid) {
    event.preventDefault(); // Prevent form submission if email is invalid
  }
});

This JavaScript code ensures that user input in a form’s username field is validated properly. When the form is submitted, it checks if the username input is valid. If not, it prevents submission, displays an error message, and highlights the field. It also listens for input changes to clear any errors and sets a custom error message if the input is invalid. This approach provides clear feedback to users, guiding them to input valid information.

Output:

3. validity

The validity attribute in JavaScript offers insights into whether a form element’s value aligns with its designated validation rules. While it doesn’t pinpoint specific input errors, it comprises Boolean flags signaling whether the element’s value satisfies criteria established by attributes such as required, type, or pattern.

Here’s an example demonstrating the usage of the validity property:

HTML Form:

JavaScript:

const emailInput = document.getElementById("emailInput");
const errorMsg = document.getElementById("error-msg");

emailInput.addEventListener("input", function () {
  if (emailInput.validity.valid) {
    // If the email input is valid, clear any existing error message
    errorMsg.textContent = "";
    // Reset border styling
    emailInput.style.border = "";
  } else {
    // If the email input is invalid, set a custom error message
    errorMsg.textContent = "Please enter a valid email address.";
    // Highlight input field with red border
    emailInput.style.border = "1px solid red";
  }
});

document.getElementById("myForm").addEventListener("submit", function (event) {
  if (!emailInput.validity.valid) {
    event.preventDefault(); // Prevent form submission if email is invalid
  }
});

This JavaScript code performs form validation for an email input field. It listens for user input events and checks the validity of the email input using the validity property. Any existing error messages are removed if the input meets the validation criteria and the input field’s styling is reset. However, a personalized error message is shown if the input is considered invalid, and the input field is visually marked with a red border. Additionally, form submission is prevented for invalid email inputs, ensuring only valid email addresses are allowed.

Output:

4. validationMessage

The validationMessage property within JavaScript supplies a user-friendly explanation detailing why a form field is marked as invalid. This functionality proves beneficial for presenting descriptive error messages to users when their input fails to meet specified criteria.

Here’s a simple example demonstrating the usage of validationMessage:

HTML Form:

JavaScript:

const emailInput = document.getElementById("emailInput");
const errorMsg = document.getElementById("error-msg");

emailInput.addEventListener("input", function () {
  if (emailInput.validity.valid) {
    // If the input is valid, clear any existing error message
    errorMsg.textContent = "";
    emailInput.style.border = ""; // Reset border styling
  } else {
    // If the input is invalid, display the validation message
    errorMsg.textContent = emailInput.validationMessage;
    emailInput.style.border = "1px solid red"; // Highlight input field with red border
  }
});

document.getElementById("myForm").addEventListener("submit", function (event) {
  if (!emailInput.validity.valid) {
    event.preventDefault(); // Prevent form submission if email is invalid
  }
});

This JavaScript code performs form validation for an email input field in a straightforward manner. It listens for user input events on the email input field and checks if the input is valid using the validity property. Any prior error messages are removed in case of valid input, and the input field styling is reset. In the event of invalid input, users are presented with the browser’s default validation message, and the input field is visually highlighted with a red border. Additionally, submission of the form is halted for invalid email inputs, guaranteeing that only correctly formatted email addresses are accepted.

Output:

5. willValidate

The willValidate property in JavaScript serves as a Boolean indicator, signaling whether a form field will undergo validation upon form submission. This property proves handy in identifying which fields are required and will be subjected to validation.

Here’s a simple example demonstrating the usage of willValidate:

HTML Form:

JavaScript:

const usernameInput = document.getElementById("username");

console.log(usernameInput.willValidate); // Output: true

This JavaScript code snippet checks whether a form field, in this case, a username input field, will be validated when the form is submitted. It first selects the username input field using its ID. Then, it accesses the willValidate property of the input field, which returns a Boolean value indicating if the field will undergo validation. Since the field has the required attribute, it will be validated, so the willValidate property returns true. This straightforward approach provides developers with information about whether a field will be validated, allowing them to handle form validation logic effectively.

Output:

6. patternMismatch

In simple terms, patternMismatch is a property in the Web Forms API that indicates when the value entered a form field does not match a specified pattern. This pattern is usually defined using a regular expression in HTML5 form validation. For example, if you set a pattern for a field to only accept numeric input, but the user enters alphabets, the patternMismatch property will be set to ‘true’.

Here’s a simple example demonstrating the usage of patternMismatch:

HTML Form:

JavaScript:

function validateForm(event) {
  event.preventDefault();
  let textInput = document.getElementById("textInput");

  if (textInput.validity.patternMismatch) {
    console.log("Input does not match the specified pattern.");
  } else {
    console.log("Input matches the specified pattern.");
  }
}

We define a function validateForm() triggered upon a button click in the JavaScript code. Inside, we retrieve the input element and utilize its validity property to check if there’s a patternMismatch. If the entered value doesn’t conform to the specified pattern (here, accepting only letters), it triggers the patternMismatch condition, prompting an appropriate message. JavaScript’s versatility is evident here, allowing seamless integration with HTML to enhance user input validation.

Output:

7. rangeOverflow and rangeUnderflow

Put plainly, rangeOverflow and rangeUnderflow in the Web Forms API signal when an input value surpasses or falls below predefined minimum or maximum boundaries. Consider a scenario where a field requires values within a specific range, like 1 to 100. If a user enters a value exceeding 100, rangeOverflow is activated, while entering a value below 1 triggers rangeUnderflow.

Here’s an example demonstrating the usage of rangeOverflow and rangeUnderflow:

HTML Form:

JavaScript:

function validateForm(event) {
  event.preventDefault();
  let numberInput = document.getElementById("numberInput");
  let value = parseInt(numberInput.value);

  if (numberInput.validity.rangeOverflow) {
    console.log("Value exceeds maximum limit.", value);
  } else if (numberInput.validity.rangeUnderflow) {
    console.log("Value falls short of minimum limit.", value);
  } else {
    console.log("Value is within the valid range.", value);
  }
}

In the JavaScript code, the function validateForm() is called upon button click. It retrieves the input element and checks its validity properties. If the entered value exceeds the maximum limit (defined by max attribute) triggering rangeOverflow or falls short of the minimum limit (defined by min attribute) triggering rangeUnderflow, corresponding messages are logged. This example demonstrates how JavaScript integrates with HTML forms to enforce input constraints, ensuring data validity in web applications.

Output:

stepMismatch:

In simple terms, stepMismatch is a feature in the Web Forms API that identifies when the value entered a form field does not conform to the specified stepping constraints. This typically occurs when a field expects values in specific increments, such as entering multiples of 5 in a field with a step size of 5.

Here’s a simple example demonstrating the usage of stepMismatch:

HTML Form:

JavaScript:

function validateForm(event) {
  event.preventDefault();
  let numberInput = document.getElementById("numberInput");

  if (numberInput.validity.stepMismatch) {
    console.log("Value does not conform to the specified stepping.");
  } else {
    console.log("Value is within the specified stepping.");
  }
}

In the JavaScript code, the function validateForm() is triggered upon button click. It retrieves the input element and checks its validity properties. If the entered value does not conform to the specified stepping (defined by the step attribute), triggering stepMismatch, an appropriate message is logged. This example demonstrates how JavaScript works alongside HTML to enforce input constraints, ensuring data accuracy and consistency in web forms.

Output:

9. tooLong:

TooLong is a feature in the Web Forms API that indicates when the value entered in a form field exceeds the maximum length allowed. For example, if a field has a maximum character limit, exceeding this limit triggers the tooLong condition.

Here’s a simple example demonstrating the usage of tooLong:

HTML Form:

JavaScript:

function validateForm(event) {
  event.preventDefault();
  let textInput = document.getElementById("textInput");

  if (textInput.validity.tooLong) {
    console.log("Value exceeds the maximum allowed length.");
  } else {
    console.log("Value is within the allowed length.");
  }
}

The validateForm() function is executed in the JavaScript code when the button is clicked. It retrieves the input element and checks its validity properties. If the entered value exceeds the maximum length (defined by the maxlength attribute), triggering tooLong, an appropriate message is logged. This example demonstrates how JavaScript integrates with HTML to enforce input constraints, ensuring data validity in web forms.

Output:

10. typeMismatch:

In basic terms, typeMismatch in the Web Forms API identifies when the input value doesn’t align with the anticipated data type. For example, if a field anticipates an email address but the user inputs something not resembling an email format, like “abc123,” typeMismatch is activated.

Here’s a simple example demonstrating the usage of typeMismatch:

HTML Form:

JavaScript:

function validateForm(event) {
  event.preventDefault();
  let emailInput = document.getElementById("emailInput");

  if (emailInput.validity.typeMismatch) {
    console.log("Value does not match the expected data type.");
  } else {
    console.log("Value matches the expected data type.");
  }
}

The validateForm() function is executed in the JavaScript code when the button is clicked. It retrieves the input element and checks its validity properties. If the entered value doesn’t match the expected data type (e.g., an email input doesn’t follow the email format), triggering typeMismatch, a corresponding message is logged. This example illustrates how JavaScript and HTML facilitate form validation to ensure data integrity in web applications.

Output:

11. valueMissing

Essentially, valueMissing is a key aspect of the Web Forms API, designed to identify instances where essential form fields are left blank. It activates when users attempt to submit a form without filling in mandatory fields, ensuring necessary information is provided for successful submission.

Here’s an example demonstrating the usage of valueMissing:

HTML Form:

JavaScript:

function validateForm(event) {
  event.preventDefault();
  let textInput = document.getElementById("textInput");

  if (textInput.validity.valueMissing) {
    console.log("Value is missing. Please fill out this field.");
  } else {
    console.log("Value is provided.");
  }
}

The validateForm() function is executed in the JavaScript code when the button is clicked. It retrieves the input element and checks its validity properties. If the value is missing in a required field, triggering valueMissing, a message prompts the user to fill out the field. This example showcases how JavaScript and HTML ensure proper validation and enhance user experience in web forms.

Output:

12. valid:

In simple terms, valid is a property in the Web Forms API that indicates whether the value entered in a form field is considered valid according to its constraints. It’s like a green light signaling that the input meets all specified criteria.

Here’s a simple example demonstrating the usage of valid:

HTML Form:

JavaScript:

function validateForm(event) {
  event.preventDefault();
  let emailInput = document.getElementById("emailInput");

  if (emailInput.validity.valid) {
    console.log("Form is valid. Proceed with submission.");
  } else {
    console.log("Form is invalid. Please correct errors.");
  }
}

The validateForm() function is executed in the JavaScript code when the button is clicked. It retrieves the input element and checks its validity properties. If the input value is considered valid, triggering valid, the form can be submitted, and a success message is logged. Otherwise, if there are validation errors, an error message is logged, prompting the user to correct them. This example demonstrates how JavaScript validates forms in real-time, ensuring data integrity and user satisfaction.

Output:

Conclusion:

In this part, we’ve explored the foundational aspects of Web Forms API. The Web Forms API offers developers a potent arsenal for constructing resilient and intuitive web forms. By embracing its capabilities and implementing industry standards, developers can elevate the accessibility and safeguarding measures of their web applications. Await Part 2, which will cover the Web History API and Web Storage API in detail. To access Part 2, click this link.

Keep exploring and innovating with JavaScript!

Implementing Email Functionality with Nodemailer in Node.js

Sufiyan Akbani — Wed, 13 Mar 2024 06:05:41 +0000

In the contemporary digital landscape, the automated transmission of emails has become an integral aspect of web application development. Be it for dispatching notifications, distributing newsletters, or executing password resets, the integration of email functionality into Node.js applications holds significant importance. Thankfully, Node.js provides Nodemailer, an efficient library that enhances the email-sending experience. This tutorial investigates how to utilize Nodemailer to effortlessly dispatch emails from your Node.js application.

Prerequisites for Nodemailer

Before delving into Nodemailer utilization, ensure the following prerequisites are fulfilled:

Confirm the correct installation and configuration of js and npm on your system.
Possess foundational knowledge in JavaScript and Node.js.

Setting Up the Node.js Application

Begin by establishing a rudimentary Node.js application. Navigate to your project directory and adhere to the following steps:

Create a new directory for your project

mkdir nodemailer-demo

cd nodemailer-demo

Initialize a fresh Node.js project

npm init -y

Initialize a fresh Node.js project

Procure the requisite dependencies by executing the following commands:

Install Express

Express, a swift, adaptable, and lightweight web framework tailored for Node.js, furnishes a comprehensive toolkit for erecting web applications and APIs. It encompasses functionalities like routing, middleware integration, and support for template engines. In our context, Express is employed to establish the server, delineate routes, and handle HTTP requests.

To install Express, execute the following command:

npm install express

Install Body-parser

Body-parser, a middleware for Express.js, extracts the entire body segment of an incoming request stream, thereby exposing it on req.body. This middleware facilitates the parsing of incoming request bodies before they reach designated handlers, rendering them accessible via the req.body property. Body-parser is instrumental in parsing form data dispatched via POST requests.

To install Body-parser, utilize the ensuing command:

npm install body-parser

Install Nodemailer

Nodemailer, a dedicated Node.js module, streamlines the process of sending emails within applications. It furnishes a user-friendly API for dispatching emails employing diverse email services and protocols. Nodemailer is instrumental in sending dynamic emails from Node.js applications.

To integrate Nodemailer, execute the ensuing command:

npm install nodemailer

Create and Configure app.js

Create a file named app.js within your project directory. This file will serve as the primary entry point for the application. Within app.js, the Express server will be instantiated, routes will be established, and email-sending functionality utilizing Nodemailer will be managed.

The following is an illustrative code snippet for app.js:

app.js

const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');

const app = express();

// Middleware to parse form data
app.use(bodyParser.urlencoded({ extended: true }));

// Define transporter object using SMTP transport
const transporter = nodemailer.createTransport({
    service: 'Gmail',
    auth: {
        user: 'your-email@gmail.com',
        pass: 'your-password'
    }
});

// Route to serve the HTML form
app.get('/', (req, res) => {
    res.send(`
        Send Email
        
            Recipient Email:

            



            Subject:

            



            Email Content:

            



            
        
    `);
});

// Route to handle form submission
app.post('/send-email', (req, res) => {
    const { recipient, subject, content } = req.body;

    // Define email content
    const mailOptions = {
        from: 'your-email@gmail.com',
        to: recipient,
        subject: subject,
        html: content
    };

    // Send email
    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            console.error('Error occurred:', error.message);
            res.send('Error occurred while sending email.');
        } else {
            console.log('Email sent successfully!');
            res.send('Email sent successfully!');
        }
    });
});

// Start the server
const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

Explanation of app.js Code

Express Setup: Import the Express module and instantiate an Express application.

Middleware: Employ the body-parser middleware to parse form data dispatched via POST requests.

Nodemailer Configuration: Define a transporter object utilizing SMTP transport. Substitute ‘your-email@gmail.com’ and ‘your-password’ with your email credentials. This transporter object facilitates email dispatch.

Routes: Define two routes—one for serving the HTML form (‘/’) and another for handling form submission (‘/send-email’). The HTML form is dispensed upon visiting the root URL, while the form submission route manages the POST request sent upon submission.

Server Initialization: Initiate the Express server and listen on a designated port (3000 by default).

Understanding the `nodemailer.createTransport` Method

The nodemailer.createTransport method is instrumental in crafting a transporter object that specifies the methodology for sending emails. It accepts an options object, delineating the email service, authentication credentials, and additional transport options.

In our scenario, SMTP transport is employed for dispatching emails via a Gmail account. The Gmail service is designated as the service option, while authentication is executed utilizing the username and password associated with the Gmail account. The auth object encompasses the user (email address) and pass (password) properties.

const transporter = nodemailer.createTransport({
    service: 'Gmail',
    auth: {
        user: 'your-email@gmail.com',
        pass: 'your-password'
    }
});

Invocation of nodemailer.createTransport yields a transporter object tailored for dispatching emails via the specified email service and authentication credentials. This transporter object is subsequently employed for sending emails within our application.

Note on Addressing “Invalid Login” Error: Encountering an “Invalid login” error typically implies rejection of login credentials by the email service provider. In such instances, generating an app password for the email account and utilizing it within the nodemailer.createTransport function, instead of the conventional password, usually resolves the authentication conundrum.

Executing the Node.js Application

To execute the app.js file and commence your Node.js application, execute the subsequent command in your terminal:

node app.js

This command triggers the execution of the app.js file via Node.js, launching the Express server and rendering your application accessible at the designated port. Ensure you execute this command within the root directory of your project.

Upon execution, a message indicating the server’s operational status on the specified port, as defined within your app.js file, should manifest. Access your application by visiting http://localhost:3000 through your web browser.

Output

Conclusion

Nodemailer emerges as a potent and adaptable library, streamlining the process of email dispatch from Node.js applications. This guide has expounded on the fundamental steps of Nodemailer setup and email dispatch employing a Gmail account. Nonetheless, Nodemailer boasts support for various email services and proffers various advanced features, encompassing HTML content, attachments, and more. I encourage delving into the official.

Mastering Advanced Features and Techniques of JEST React Testing Library

Sufiyan Akbani — Tue, 05 Mar 2024 11:24:13 +0000

Welcome to a deeper journey into the JEST React Testing Library world! We’ll explore advanced methods and tricks that enhance your testing expertise here. If you’re new to JEST, don’t worry! We’ve got you covered with “Exploring JEST React Testing Library: A Complete Overview,” which helps you understand basic and advanced insights, ensuring a comprehensive understanding of JEST Testing. Go and check this out right here.

Now, let’s start exploring advanced features and techniques.

1. Simulating User Interactions

JEST React Testing Library allows you to simulate user interactions with your components. This feature lets you test how your components respond to different user actions. Here are some examples:

a. Simulating button clicks

The below code defines a simple functional component named “Button” that takes a prop named “label” and renders a button element with the provided label.

Button.js:

import React from "react";
const Button = ({ label, onClick }) => {
  return ;
};
export default Button;

Button.test.js:

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import Button from "./Button";
test("button click triggers an action", () => {
  const handleClick = jest.fn();
  render(

In this example, we define a mock function “handleClick” using “jest.fn()”. We pass this function as a prop to the “Button” component. After rendering the component, we simulate a button click using “fireEvent.click” and assert that the “handleClick” function is called once. Below is a screenshot of the output showing the successful execution of the test cases:

b. Simulating Input value change

The below code defines a simple functional component named “LoginForm” that includes a controlled input field for capturing a username. The “useState” hook manages the username state, and the input is associated with a label, allowing users to input their username. Any changes trigger the “handleInputChange” function, keeping the username state synchronized with the input value.

LoginForm.js:

import React, { useState } from "react";
const LoginForm = () => {
  const [username, setUsername] = useState("");
  const handleInputChange = (e) => {
    setUsername(e.target.value);
  };
  return (
    
      Username:
      
    
  );
};
export default LoginForm;

LoginForm.test.js:

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import LoginForm from "./LoginForm";
test("Typing in username field updates the value", () => {
  render();
  const usernameInput = screen.getByLabelText(/username/i);
  fireEvent.change(usernameInput, { target: { value: "testuser" } });
  expect(usernameInput.value).toBe("testuser");
});

In this example, we render a “LoginForm” component that contains an input field for the username. We use “screen.getByLabelText” to find the input field and “fireEvent.change” to simulate the change in input value in the field. Finally, we assert that the input field’s value is updated correctly. Below is a screenshot of the output showing the successful execution of the test cases:

2. Testing Asynchronous Behaviour

The “ProductInformation” component is a React functional component that fetches product data from “https://fakestoreapi.com/products/1” using the “fetchProductData” function. The data is stored in the data state using “useState”. The “useEffect” hook ensures data fetching occurs when the component mounts. The component conditionally renders either the “title” of the data or a “Loading…” message based on the data’s availability.

ProductInformation.js:

import React, { useEffect, useState } from 'react';
const ProductInformation = () => {
  const [data, setData] = useState(null);
  const fetchProductData = async () => {
    const response = await fetch('https://fakestoreapi.com/products/1');
    const data = await response.json();
    setData(data);
  };
  useEffect(() => {
    fetchProductData();
  }, []);
  return (
    
      {data ? (
        
          title: {data.title}
        
      ) : (
        Loading...
      )}
    
  );
};
export default ProductInformation;

ProductInformation.test.js:

import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import ProductInformation from "./ProductInformation";

test("displays fetched data", async () => {
  render();
  const loadingElement = screen.getByText(/loading/i);
  expect(loadingElement).toBeInTheDocument();
  await waitFor(() => {
    const dataElement = screen.getByText(/title: /i);
    expect(dataElement).toBeInTheDocument();
  });
});

In this example, we render the “ProductInformation” component, which fetches data asynchronously. Initially, we expect to see a loading message. Using “waitFor” and “await”, we wait for the data to be fetched and then assert that the data is displayed. Below is a screenshot of the output showing the successful execution of the test cases:

Conclusion

In this second part of our guide, we delved into advanced features and techniques of the JEST React Testing Library. We explored simulating user interactions and handling asynchronous behaviour. Combining the knowledge from both parts of this guide allows you to write comprehensive tests for your React components, ensuring their reliability and robustness.

Mastering Axios in React: A Complete Overview

Sufiyan Akbani — Wed, 21 Feb 2024 04:24:10 +0000

A popular JavaScript library, Axios has become a staple in modern web development, especially when handling HTTP requests in React applications. This blog will explore the ins and outs of using Axios with React, providing a complete guide and practical code examples to enhance your understanding.

Getting Started with Axios in React

Installation

Step 1: Creating a React App

Run the given command to build a new React app.

Note: If you already have the react application created, you can skip this step and directly follow the 2^nd step.

npx create-react-app my-axios-app

cd my-axios-app

npm start

Step 2: Installing Axios

Now, install Axios into your project by running:

npm install axios

Making GET Requests

Basic GET Request

Let’s initiate our exploration with a fundamental aspect – making a simple GET request. Create a new file named getExample.js within an ‘Axios’ folder in your React project and add the following code:

getExample.js

// Import Axios
import axios from "axios";

// Make a GET request
const fetchData = async () => {
  try {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/posts/1"
    );
    console.log("Data fetched:", response.data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

// Export the function for use in other files
export default fetchData;

In this getExample.js file, ‘Axios’ is imported to handle HTTP requests. The ‘fetchData’ function, defined as an asynchronous operation, utilizes Axios to request a GET to a specified URL. Upon a successful request, the fetched data is logged to the console. Any errors encountered during the request are caught and logged as well.

Import the ‘fetchData’ function in the App.js component to retrieve data from the API.

App.js

import React, { useEffect } from "react";
import fetchData from "./axios/getExample";

const App = () => {
  useEffect(() => {
    fetchData();
  }, []);

  return (
    
      Mastering Axios in React: A Complete Overview
      Basic GET request: 
    
  );
};

export default App;

Output

Handling Async/Await

To enhance code readability, we can use the async/await syntax. Create another file named asyncAwaitExample.js within an ‘Axios’ folder in your React project and add the following code:

asyncAwaitExample.js

// Import Axios
import axios from "axios";

// Make an asynchronous request using async/await
const fetchDataAsync = async () => {
  try {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/posts/1"
    );
    console.log("Data fetched asynchronously:", response.data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

// Export the function for use in other files
export default fetchDataAsync;

In this asyncAwaitExample.js file, we import Axios to handle HTTP requests. The ‘fetchDataAsync’ function is defined as an asynchronous operation utilizing the async/await syntax. Axios makes a GET request to a specified URL inside a try block. The fetched data is logged to the console after successful completion with a message indicating asynchronous retrieval. Any encountered errors during the request are caught in the catch block and logged to the console.

Import the ‘fetchDataAsync’ function in the App.js component to fetch data asynchronously using async/await.

App.js

import React, { useEffect } from "react";
import fetchDataAsync from "./axios/asyncAwaitExample";

const App = () => {
  useEffect(() => {
    fetchDataAsync();
  }, []);

  return (
    
      Mastering Axios in React: A Complete Overview
      Handling Async/Await GET Request: 
    
  );
};

export default App;

Output

Making POST Requests

To create a POST request functionality, first, create a new file named postExample.js within an ‘Axios’ folder in your React project and add the following code:

postExample.js

import axios from "axios";

const postData = async (data) => {
  try {
    const response = await axios.post(
      "https://jsonplaceholder.typicode.com/posts",
      data
    );
    console.log("Data posted:", response.data);
  } catch (error) {
    console.error("Error posting data:", error);
  }
};

export default postData;

In this postExample.js file, we define a function ‘postData’ that uses the ‘Axios.post’ method, a function in Axios used to send data to a server over the internet. It requires the server’s address (URL) and the data you want to send. It handles the data-sending process and provides error messages if something goes wrong. This method makes interacting with APIs easy and transmitting data from your React app to a server.

Import the ‘postData’ function in the App.js component to send data via a POST request.

App.js

import React, { useState } from "react";
import postData from "./axios/postExample";
function App() {
  const [data, setData] = useState({ title: "", body: "" });
  const handlePost = (e) => {
    e.preventDefault();
    postData({ ...data, userId: 1 });
  };
  return (
    
      Mastering Axios in React: A Complete Overview
      Making POST Requests: 
      
        
          Title:
           setData({ ...data, title: e.target.value })}
          />
        
        

        
          Body:
           setData({ ...data, body: e.target.value })}
          />
        </label>
        <br />
        <input type="submit" />
      </form>
    </div>
  );
}

export default App;
</pre>
<p>In <strong>App.js</strong>, the state manages post data using the <strong>‘useState’</strong> hook. When submitting the form, the <strong>‘handlePost’</strong> function prevents the default action and sends the post data using Axios via <strong>‘postData’</strong> from <strong>postExample.js</strong>. Users can input the post title and body through input fields and a <strong>textarea</strong> element. This component makes submitting post data straightforward, showcasing how Axios can handle POST requests in React applications.</p>
<h4><strong>Output</strong></h4>
<p></p>
<h2><strong>Advanced Techniques with Axios</strong></h2>
<h3><strong>Configuring Global Defaults</strong></h3>
<p>Axios allows you to set global configuration defaults, making managing headers and base URLs easier. Create a new file named <strong>global.js</strong> within an<strong> ‘Axios’ </strong>folder in your React project and add the following code:</p>
<h4><strong>global.js</strong></h4>
<pre class="EnlighterJSRAW" data-enlighter-language="js">// Import Axios
import axios from "axios";

// Set global configuration defaults
axios.defaults.headers.common["Authorization"] = "Bearer TEST_GLOBAl_DEFAULTS";
axios.defaults.headers.common["Accept"] = "application/json";
axios.defaults.baseURL = "https://jsonplaceholder.typicode.com";
</pre>
<p>In this <strong>global.js</strong> file, we set standard headers like authorization, accept headers, and specify a base URL for all requests.</p>
<p>To integrate these global defaults into our React components, we simply import the <strong>global.js</strong> file into our <strong>App.js</strong> component:</p>
<h4><strong>App.js</strong></h4>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import React, { useEffect } from "react";
import axios from "axios";
import "./axios/global";
function App() {
  const fetchData = async () => {
    try {
      const response = await axios.get("/posts/1");
      console.log("Data fetched:", response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };
  useEffect(() => {
    fetchData();
  });
  return (
    <div>
      <h1>Mastering Axios in React: A Complete Overview</h1>
      <h4>Configuring Global Defaults: </h4>
    </div>
  );
}

export default App;
</pre>
<p>In this <strong>App.js </strong>file, we import Axios and <strong>global.js</strong> to set default configurations. We define a <strong>‘fetchData’ </strong>function to fetch data from an API endpoint using Axios. The<strong> ‘useEffect’ </strong>hook ensures <strong>‘fetchData’</strong> is called when the component mounts. If data is fetched successfully, we log it; if an error occurs, we log the error.</p>
<h4><strong>Output</strong></h4>
<p></p>
<h3><strong>Custom Axios Instance</strong></h3>
<p>Custom Axios instances allow developers to create specialized instances of Axios with unique configurations tailored to specific needs. This means you can define custom settings, such as base URLs, headers, and interceptors, for different parts of your application without affecting the global Axios configuration. Create a file named <strong>customInstance.js</strong> and add the following code:</p>
<h4><strong>customInstance.js</strong></h4>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import axios from "axios";

const customAxios = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
  headers: {
    Authorization: "Bearer TEST_CUSTOM_AXIOS",
    Accept: "application/json",
  },
});

export default customAxios;
</pre>
<p>In the <strong>customInstance.js</strong> file, we create a custom Axios instance. This instance is created using the <strong>‘Axios.create’</strong> method and sets a base URL and custom headers, including authorization and content type. This allows us to interact with the API in a controlled manner.</p>
<p>Import the custom Axios instance from <strong>customInstance.js</strong> in the <strong>App.js</strong> component to make requests with custom configurations.</p>
<h4><strong>App.js</strong></h4>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import React, { useEffect } from "react";
import customInstance from "./axios/customAxios";
function App() {
  const fetchData = async () => {
    try {
      const response = await customInstance("/posts/2");
      console.log("Data fetched:", response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };
  useEffect(() => {
    fetchData();
  });
  return (
    <div>
      <h1>Mastering Axios in React: A Complete Overview</h1>
      <h4>Custom Axios Instance: </h4>
    </div>
  );
}

export default App;
</pre>
<h4><strong>Output</strong></h4>
<p></p>
<h3><strong>Interceptors</strong></h3>
<p>Interceptors play a vital role in intercepting and modifying HTTP requests and responses in Axios. They provide a powerful mechanism to manage the request and response lifecycle, allowing developers to add custom logic, such as logging, error handling, and authentication, before sending requests or after receiving responses. Create a file named <strong>interceptors.js</strong> and add the following code:</p>
<h4><strong>interceptors.js</strong></h4>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import axios from "axios";

const createInstance = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
});

createInstance.interceptors.request.use(
  (request) => {
    console.log("Request sent:", request);
    return request;
  },
  (error) => {
    console.error("Error in request interceptor:", error);
    return Promise.reject(error);
  }
);

createInstance.interceptors.response.use(
  (response) => {
    console.log("Response received:", response);
    return response;
  },
  (error) => {
    console.error("Error in response interceptor:", error);
    return Promise.reject(error);
  }
);

export default createInstance;
</pre>
<p>In this <strong>interceptors.js</strong> file, we have two interceptors: one for handling requests and another for managing responses. These interceptors are created using the <strong>Axios.interceptors.request.use</strong> and <strong>Axios.interceptors.response.use</strong> methods, respectively. These methods allow us to intercept HTTP requests and responses made by Axios before they are sent or received by the server, allowing us to add custom logic or modify the data.</p>
<p>Import <strong>interceptors.js</strong> to set up request and response interceptors for Axios in the <strong>App.js</strong> component.</p>
<h4><strong>App.js</strong></h4>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import React, { useEffect } from "react";
import createInstance from "./axios/interceptors";
function App() {
  const fetchData = async () => {
    try {
      const response = await createInstance("/posts/3");
      console.log("Data fetched:", response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };
  useEffect(() => {
    fetchData();
  });
  return (
    <div>
      <h1>Mastering Axios in React: A Complete Overview</h1>
      <h4>Interceptors: </h4>
    </div>
  );
}

export default App;
</pre>
<p>In this <strong>App.js </strong>file, we have a <strong>fetchData</strong> function responsible for fetching data from the API endpoint <strong>‘/posts/3’</strong> using our custom Axios instance <strong>createInstance</strong> and using the <strong>‘useEffect’</strong> hook to ensure that the <strong>‘fetchData’ </strong>function is called when the component mounts. This hook runs the<strong> ‘fetchData’</strong> function once the element is rendered to the screen.</p>
<h4><strong>Output</strong></h4>
<p></p>
<h3><strong>Conclusion</strong></h3>
<p>Congratulations! You’ve successfully set up Axios in a React app, made a basic GET request, and delved into advanced techniques like configuring global defaults, using custom instances, and implementing interceptors. These techniques are essential for real-world applications, offering flexibility, maintainability, and a centralized approach to handling HTTP requests. As you continue your journey, explore additional Axios features and adapt them to meet the specific needs of your projects.</p>
<div style='display:none;' class='shareaholic-canvas' data-app='share_buttons' data-title='Mastering Axios in React: A Complete Overview' data-link='https://blogs.perficient.com/2024/02/20/mastering-axios-in-react-a-complete-overview/' data-app-id-name='category_below_content'></div><div style='display:none;' class='shareaholic-canvas' data-app='recommendations' data-title='Mastering Axios in React: A Complete Overview' data-link='https://blogs.perficient.com/2024/02/20/mastering-axios-in-react-a-complete-overview/' data-app-id-name='category_below_content'></div>
</article>
<article>
<h1>Internationalization (I18n) Implementation in React</h1>
<p>Sufiyan Akbani — Wed, 07 Feb 2024 07:42:26 +0000</p>
<div style='display:none;' class='shareaholic-canvas' data-app='share_buttons' data-title='Internationalization (I18n) Implementation in React' data-link='https://blogs.perficient.com/2024/02/07/internationalization-i18n-implementation-in-react/' data-app-id-name='category_above_content'></div><div id="bsf_rt_marker"></div><p>Internationalization (I18n) is a crucial aspect of building web applications that cater to a global audience. It involves adapting your application to different languages and regions seamlessly. In this blog, we will explore the implementation of I18n in a React app, ensuring a smooth user experience for diverse audiences.</p>
<h2>Why Internationalization?</h2>
<p>Before delving into the implementation details, let’s understand why I18n is essential. Your app has the potential to reach users from different parts of the world. I18n helps you break language barriers, making your React app more inclusive and appealing to a diverse audience.</p>
<h2>Setting Up Your React Project</h2>
<p>Firstly, make sure you have a React app up and running. If not, you can create one using the Create React App or any other preferred method.</p>
<p><em>npx create-react-app i18n-react-app</em></p>
<p><em>cd i18n-react-app</em></p>
<h2>Choosing an I18n Library</h2>
<p>Several libraries can assist with I18n in React. One popular choice is <strong>‘react-i18next’</strong>.</p>
<p>Install it using:</p>
<p><em>npm install i18next react-i18next</em></p>
<h3>Configuring I18n</h3>
<p>Create a file named <strong>i18n.js</strong> to set up I18n:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEN from "./translations/en.json"; // Import JSON file for English Language
import translationES from "./translations/es.json"; // Import JSON file for Spanish Language
const resources = {
  en: {
    translation: translationEN,
  },
  es: {
    translation: translationES,
  },
  // Add translations for other languages here
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en", // Default language
  interpolation: {
    escapeValue: false,
  },
});
export default i18n;</pre>
<h2>Managing Translations with a JSON File</h2>
<p>Create a folder named ‘<strong>translations’</strong> in your project root and add a file named ‘<strong>en.json’</strong> (for English) and ‘<strong>es.json’</strong> (for Spanish) with your translations:</p>
<h3>en.json</h3>
<pre class="EnlighterJSRAW" data-enlighter-language="json">{
  "welcome": "Bienvenido a nuestra aplicación React!"
  // Add more key-value pairs as needed
}
</pre>
<h3>es.json</h3>
<pre class="EnlighterJSRAW" data-enlighter-language="json">{
  "welcome": "Welcome to our React App!",
  // Add more key-value pairs as needed
}
</pre>
<h2>Using I18n in Components</h2>
<p>Now, let’s put these translations to work in a React component. Consider a ‘<strong>WelcomeMessage’</strong> component:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="json">import React from "react";
import { useTranslation } from "react-i18next";
const WelcomeMessage = () => {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t("welcome")}</h1>
    </div>
  );
};
export default WelcomeMessage;
</pre>
<h2>Language Switcher Component</h2>
<p>Modify the ‘<strong>LanguageSwitcher’</strong> component to include buttons for switching between English and Spanish.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import React from "react";
import i18n from "./i18n";
const LanguageSwitcher = () => {
  const handleChangeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };
  return (
    <div>
      <button onClick={() => handleChangeLanguage("en")}>English</button>
      <button onClick={() => handleChangeLanguage("es")}>Español</button>
      {/* Add buttons for other languages as needed */}
    </div>
  );
};
export default LanguageSwitcher;
</pre>
<h2>Bringing It All Together</h2>
<p>Finally, integrate these components into your main app:</p>
<h3>App.js</h3>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import React from "react";
import WelcomeMessage from "./WelcomeMessage";
import LanguageSwitcher from "./LanguageSwitcher";
const App = () => {
  return (
    <div>
      <LanguageSwitcher />
      <WelcomeMessage />
      {/* Add more components as needed */}
    </div>
  );
};
export default App;</pre>
<h3>Output:</h3>
<p></p>
<p><strong>Conclusion</strong></p>
<p>In this blog, we covered the importance of Internationalization in a React app and demonstrated how to implement it using the ‘react-i18next’ library. With proper translations and language-switching capabilities, your React app is now equipped to reach a broader, more diverse audience.</p>
<p>By following these steps, you can create a user-friendly, internationally accessible React application that resonates with users worldwide. Happy coding!</p>
<div style='display:none;' class='shareaholic-canvas' data-app='share_buttons' data-title='Internationalization (I18n) Implementation in React' data-link='https://blogs.perficient.com/2024/02/07/internationalization-i18n-implementation-in-react/' data-app-id-name='category_below_content'></div><div style='display:none;' class='shareaholic-canvas' data-app='recommendations' data-title='Internationalization (I18n) Implementation in React' data-link='https://blogs.perficient.com/2024/02/07/internationalization-i18n-implementation-in-react/' data-app-id-name='category_below_content'></div>
</article>
<article>
<h1>Exploring JEST React Testing Library: A Complete Overview</h1>
<p>Sufiyan Akbani — Wed, 16 Aug 2023 07:52:12 +0000</p>
<div style='display:none;' class='shareaholic-canvas' data-app='share_buttons' data-title='Exploring JEST React Testing Library: A Complete Overview' data-link='https://blogs.perficient.com/2023/08/16/exploring-jest-react-testing-library-a-complete-overview/' data-app-id-name='category_above_content'></div><div id="bsf_rt_marker"></div><p>Welcome to the comprehensive guide on mastering JEST React Testing Library! In this tutorial, we will explore the ins and outs of the JEST React Testing Library, a powerful tool for testing React components. Whether you are a beginner or an experienced developer looking to enhance your testing skills, this guide will equip you with the knowledge and techniques to write effective tests using JEST React Testing Library.</p>
<h2><strong>What is JEST?</strong></h2>
<p>JEST is a JavaScript testing framework that enables developers to write tests for JavaScript and React applications. It offers features like test runners, assertions, mocks, and code coverage analysis. JEST simplifies the process of writing and running tests, making it a popular choice for testing React applications.</p>
<p>Official Documentation:</p>
<ul>
<li><a href="https://jestjs.io/">JEST Official Documentation</a></li>
<li><a href="https://testing-library.com/docs/react-testing-library/intro/">JEST React Testing Library</a></li>
</ul>
<h3><strong>Prerequisites:</strong></h3>
<p>Before exploring the JEST React Testing Library, ensure that you have the following prerequisites:</p>
<ol>
<li><strong> Basic knowledge of React</strong></li>
<li><strong> Node.js and npm are installed on your machine.</strong></li>
<li><strong> React project setup</strong>.</li>
</ol>
<p>Now, let’s get started with JEST React Testing Library!</p>
<p>Getting Started:</p>
<h3><strong>Step 1. Install JEST and React Testing Library:</strong></h3>
<p>Open your terminal and navigate to the main directory of your project. Then, execute the following command:</p>
<p><strong><em>npm install –save-dev jest</em></strong></p>
<h3><strong>Step 2. Implementing the Button component:</strong></h3>
<p>Create a new file named “<strong>Button.js</strong>” in the <strong>src</strong> directory and paste the following code:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import React from "react";
const Button = ({ label }) => {
  return <button>{label}</button>;
};
export default Button;</pre>
<p>The Button component is functional and renders a button with a provided label prop.</p>
<h3><strong>Step 3. Writing your first test:</strong></h3>
<p>Create a new file named “<strong>Button.test.js</strong>” in the <strong>src</strong> directory and paste the following code:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import React from "react";
import { render, screen } from "@testing-library/react";
import Button from "./Button";
test("renders button correctly", () => {
  render(<Button label="Click me" />);
  const buttonElement = screen.getByText(/click me/i);
  expect(buttonElement).toBeInTheDocument();
});</pre>
<p>In this example, we import and used the necessary functions from <strong>@testing-library/react</strong> to render our component and interact with the rendered output, so let’s explore the purpose of those functions:</p>
<p><strong>Render: </strong>This function is provided by React Testing Library and is used to render React components for testing purposes.</p>
<p><strong>Screen:</strong> The screen object provides utilities to access and interact with the rendered components. Functions like <strong>getByText</strong>, <strong>getByRole</strong>, and more can be used to search for specific elements within the rendered component.</p>
<p><strong>Expect:</strong> This is an assertion function provided by JEST. It allows us to make assertions about the behavior of our code and the rendered components.</p>
<p><strong>toBeInTheDocument</strong>: This is a matcher provided by JEST that checks if an element is present in the document.</p>
<p>Then we render the <strong>Button</strong> component with a specific label and use the <strong>screen.getByText</strong> method to find the button element by its text content.</p>
<h3><strong>Step 4. Running the test:</strong></h3>
<p>Open your terminal and navigate to the main directory of your project. Then, execute the following command:</p>
<p><strong><em>npm test</em></strong></p>
<p>JEST will run the tests, and you will observe the test results in the terminal.</p>
<p>Screenshot of successful test execution:</p>
<p></p>
<ul>
<li><strong>Understanding describe(), test() and it(): </strong></li>
</ul>
<ol>
<li><strong> describe(): describe()</strong> is used to group related test cases together. It creates a test suite or category of tests, allowing you to organize and structure your tests.</li>
<li><strong>test() and it():</strong> Both <strong>test()</strong> and <strong>it()</strong> are used to define individual test cases. They take a description of what the test is doing and a function where you write the test logic.</li>
</ol>
<p></p>
<p>These functions help organize and structure your tests, making them more readable and maintainable. They provide a way to group related tests and clearly define the purpose of each individual test case.</p>
<ul>
<li>
<h3><strong>Search Variants and Types:</strong></h3>
</li>
</ul>
<ol>
<li><strong>Search Variants: </strong>Search Variants in JEST React Testing Library are methods to find elements in the rendered output based on specific.
<ul>
<li><strong>getBy():</strong> Finds a single element that matches the query. In case no element is found, it will raise an error.</li>
</ul>
</li>
</ol>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const buttonElement = <button>Click Me</button>;
test("To test getBy search variant", () => {
  render(buttonElement);
  const foundButton = screen.getByRole("button");
  expect(foundButton).toBeInTheDocument();
</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong> getAllBy(): </strong>Finds multiple elements that match the query. In case no element is found, it will raise an error.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const linkElements = (
  <div>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
);
test("To test getAllBy search variant", () => {
  render(linkElements);
  const foundLinks = screen.getAllByRole("link");
  expect(foundLinks.length).toBe(3);
});</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong> queryBy():</strong> Finds a single element that matches the query. Returns `<strong>null</strong>` if no element is found.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const headingElement = <h1>Hello, world!</h1>;
test("To test queryBy search variant", () => {
  render(headingElement);
  const foundHeading = screen.queryByText(/hello/i);
  expect(foundHeading).not.toBeNull();
});</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong>queryAllBy():</strong> Finds multiple elements that match the query. When no elements are found, it returns an empty array.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const inputElements = (
  <div>
    <input type="text" />
    <input type="text" />
    <input type="text" />
  </div>
);
test("To test queryAllBy search variant", () => {
  render(inputElements);
  const foundInputs = screen.queryAllByRole("textbox");
  expect(foundInputs.length).not.toBe(0);
})</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong> findBy():</strong> Finds a single element asynchronously that matches the query. Resolves the promise with the element when found.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve(<div>Data Loaded</div>), 1000);
  });
}

const asyncElement = fetchData();

test("To test findBy search variant", async () => {
  render(await asyncElement);
  const foundElement = await screen.findByText(/data loaded/i);
  expect(foundElement).toBeInTheDocument();
});</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong> findAllBy():</strong> Finds multiple elements asynchronously that match the query. Resolves the promise with an array of elements when found.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">async function fetchDatas() {
  return new Promise((resolve) => {
    setTimeout(
      () =>
        resolve(
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
          </ul>
        ),
      1000
    );
  });
}

const asyncElements = fetchDatas();

test("To test findAllBy search variant", async () => {
  render(await asyncElements);
  const foundElements = await screen.findAllByRole("listitem");
  expect(foundElements.length).toBe(3);
});</pre>
<ol start="2">
<li>
<h3><strong> Search Types:</strong></h3>
</li>
</ol>
<p>Search Types are used in conjunction with the search variants to target specific attributes of elements for querying.</p>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong>ByRole:</strong> Matches elements by their role attribute, such as `<strong>button</strong>,` `<strong>link</strong>,` `<strong>textbox</strong>,` `<strong>listitem</strong>,` etc.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const buttonElement1 = <button>Click Me</button>;
test("To test ByRole search type", () => {
  render(buttonElement1);
  const foundButton = screen.getByRole("button");
  expect(foundButton).toBeInTheDocument();
});</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong>ByText:</strong> Matches elements based on their visible text content.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const headingElement1 = <h1>Hello, world!</h1>;
test("To test ByText search type", () => {
  render(headingElement1);
  const foundHeading = screen.getByText(/hello/i);
  expect(foundHeading).not.toBeNull();
});</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong>ByLabelText:</strong> Matches elements based on their associated label text.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const usernameInput = (
  <div>
    <label htmlFor="username">Username</label>
    <input type="text" id="username" />
  </div>
);
test("To test ByLabelText search type", () => {
  render(usernameInput);
  const foundInput = screen.getByLabelText(/username/i);
  expect(foundInput).toBeInTheDocument();
});</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong> ByPlaceholderText:</strong> Matches elements based on their placeholder text.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const searchInput = <input type="text" placeholder="Search" />;
test("To test ByPlaceholderText search type", () => {
  render(searchInput);
  const foundInput = screen.getByPlaceholderText(/search/i);
  expect(foundInput).toBeInTheDocument();
});</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong> ByDisplayValue:</strong> Matches form elements based on their displayed value.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const checkboxElement = (
  <input type="checkbox" checked={true} value={"checked"} />
);
test("To test ByDisplayValue search type", () => {
  render(checkboxElement);
  const foundCheckbox = screen.getByDisplayValue("checked");
  expect(foundCheckbox).toBeInTheDocument();
});</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong>ByAltText:</strong> Matches elements based on their <strong>alt</strong> attribute value.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const imageElement = ;
test("To test ByAltText search type", () => {
  render(imageElement);
  const foundImage = screen.getByAltText("Logo");
  expect(foundImage).toBeInTheDocument();
});
</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong>ByTitle:</strong> Matches elements based on their <strong>title</strong> attribute value.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const tooltipElement = <div title="Tooltip">Hover me</div>;
test("To test ByTitle search type", () => {
  render(tooltipElement);
  const foundElement = screen.getByTitle("Tooltip");
  expect(foundElement).toBeInTheDocument();
});</pre>
<ul>
<li style="list-style-type: none;">
<ul>
<li><strong>ByTestId:</strong> Matches elements based on their <strong>data-testid</strong> attribute value.</li>
</ul>
</li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const elementWithTestId = <div data-testid="my-element">Element</div>;
test("To test ByTestId search type", () => {
  render(elementWithTestId);
  const foundElement = screen.getByTestId("my-element");
  expect(foundElement).toBeInTheDocument();
});</pre>
<p>These examples demonstrate how to use JEST React Testing Library search variants and types with both React components and test cases. These combinations allow you to precisely query elements and assert their presence or absence based on specific criteria.</p>
<ul>
<li><strong>JEST Debugging Functions and Methods: </strong>JEST React Testing Library offers debugging functions like <strong>screen.debug()</strong> and <strong>screen.logTestingPlaygroundURL()</strong> for effective troubleshooting and inspection of tests.</li>
</ul>
<ol>
<li><strong>screen.debug(): </strong>This function logs the current state of the rendered output to the console. It helps inspect the rendered HTML structure and component properties during test execution.</li>
</ol>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import { render, screen } from "@testing-library/react";
import DebuggingFunctions from "./DebuggingFunctions";

test("To debug the DebuggingFunctions component using debug() function", () => {
  render(<DebuggingFunctions />);
  screen.logTestingPlaygroundURL();
});</pre>
<p>When you run this test case and call <strong>screen.debug()</strong>, it will output the rendered component structure and its attributes in the console:</p>
<p></p>
<ol start="2">
<li><strong>screen.logTestingPlaygroundURL():</strong> This function logs a URL to the console that can be opened in a browser. It allows you to view and interact with the rendered output in the Testing Playground.</li>
</ol>
<pre class="EnlighterJSRAW" data-enlighter-language="js">import { render, screen } from "@testing-library/react";
import DebuggingFunctions from "./DebuggingFunctions";

test("To debug the DebuggingFunctions component using logTestingPlaygroundURL() function", () => {
  render(<DebuggingFunctions />);
  screen.logTestingPlaygroundURL();
});</pre>
<ul>
<li>
<h3><strong>Testing Playground:</strong></h3>
</li>
</ul>
<p>The <a href="https://testing-playground.com/">Testing Playground</a> is a web-based tool that provides an interactive environment for debugging and exploring your React components. It allows you to inspect the component hierarchy, modify props, and test different scenarios. You can export logs and share the testing playground URL with others for collaborative debugging.</p>
<h3><strong>Conclusion:</strong></h3>
<p>This detailed guide has covered the fundamentals of the JEST React Testing Library. We learned how to write tests, simulate user interactions, and use various methods to find elements. Additionally, we explored debugging functions. Now, you have the knowledge to create solid and reliable tests for your React components.</p>
<div style='display:none;' class='shareaholic-canvas' data-app='share_buttons' data-title='Exploring JEST React Testing Library: A Complete Overview' data-link='https://blogs.perficient.com/2023/08/16/exploring-jest-react-testing-library-a-complete-overview/' data-app-id-name='category_below_content'></div><div style='display:none;' class='shareaholic-canvas' data-app='recommendations' data-title='Exploring JEST React Testing Library: A Complete Overview' data-link='https://blogs.perficient.com/2023/08/16/exploring-jest-react-testing-library-a-complete-overview/' data-app-id-name='category_below_content'></div>
</article>
<article>
<h1>How to Connect Node JS with MySQL Database</h1>
<p>Sufiyan Akbani — Thu, 03 Aug 2023 10:16:38 +0000</p>
<div style='display:none;' class='shareaholic-canvas' data-app='share_buttons' data-title='How to Connect Node JS with MySQL Database' data-link='https://blogs.perficient.com/2023/08/03/how-to-connect-node-js-with-mysql-database/' data-app-id-name='category_above_content'></div><div id="bsf_rt_marker"></div><p>Node.js is a popular open-source JavaScript runtime environment used for building web applications. On the other hand, MySQL is a widely used relational database management system. In this blog, I will guide you through a step-by-step process on how to connect Node.js with a MySQL database and workbench.</p>
<h3><strong>Step 1: Install Required Software</strong></h3>
<p>Before we begin, we need to ensure that we have the following required software installed on our computer:</p>
<ol>
<li><strong>Node.js</strong></li>
<li><strong>MySQL Server and</strong></li>
<li><strong>MySQL Workbench.</strong></li>
</ol>
<p>If you haven’t installed them already, you can download and install them from their respective official websites.</p>
<h3><strong>Step 2: Create a MySQL Connections and Database on MySQL Workbench</strong></h3>
<p>Open MySQL Workbench and create a new connection to your MySQL server. You can do this by clicking the <strong>“+”</strong> icon located in the<strong> “MySQL Connections”</strong> section on the workbench home screen; you will be prompted to enter the connection details. Once you’ve entered all the details, click on the <strong>“Test Connection”</strong> button to test your connection. If your connection is successful, you will see a success message then.</p>
<p>Once you have connected to your MySQL new connection, you can create a new database by clicking on the <strong>“Create a new schema in the connected server”</strong> button. Give your database a name and click <strong>“Apply.”</strong></p>
<h3><strong>Step 3: Create a New Node.js Project</strong></h3>
<p>To create a new Node.js project, we need to open a terminal or command prompt window and navigate to the directory where we want to create our project. Once we are in the desired directory, we can run the following command to create a new Node.js project:</p>
<h4><strong>npm init</strong></h4>
<p>This command will initialize a new Node.js project and create a <strong>package.json</strong> file in the current directory. We can accept the default settings or provide our values for the prompts.</p>
<h3><strong>Step 4: Install the MySQL Package for Node.js</strong></h3>
<p>To connect Node.js with a MySQL database, you need to install the MySQL package in your Node.js project. Type the command given below in a command prompt or terminal:</p>
<h4><strong>npm install mysql2</strong></h4>
<p>This command will install the MySQL package and its dependencies in our Node.js project.</p>
<h3><strong>Step 5: Write Node.js Code to Connect to MySQL Database<br />
</strong></h3>
<p>To set up a connection with your MySQL database, create a new JavaScript file and enter the following code:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">const mysql = require('mysql2');

// create a new MySQL connection
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'pass@123',
  database: 'database_name'
});
// connect to the MySQL database
connection.connect((error) => {
  if (error) {
    console.error('Error connecting to MySQL database:', error);
  } else {
    console.log('Connected to MySQL database!');
  }
});

// close the MySQL connection
connection.end();
</pre>
<p>In this code, we first import the <strong>mysql2</strong> package that we installed earlier. Then we create a new connection with your MySQL database by using the <strong>createConnection</strong> method. Replace the <strong>host</strong>, <strong>user</strong>, <strong>password</strong>, and <strong>database</strong> fields with your MySQL database details. Then we use the <strong>connect()</strong> method to connect to the MySQL database. We log a message to the console if the connection is successful. Finally, we use the <strong>end()</strong> method to close the MySQL connection.</p>
<h3><strong>Step 6: Run Node.js Code and Test the Connection </strong></h3>
<p>To run the Node.js code and test the connection to the MySQL database, we need to open a terminal or command prompt window and navigate to the project directory where our JavaScript file is located. Once we are in the correct directory, we can run the following command to execute our JavaScript file:</p>
<h4><strong>node filename.js</strong></h4>
<p>Here, <strong>“filename.js”</strong> refers to the name of the JavaScript file you created for example:</p>
<p></p>
<h4><strong>Conclusion</strong></h4>
<p>In this article, we have provided a step-by-step guide on how to connect Node.js with MySQL database and workbench. We first created a new Node.js project using the <strong>npm init</strong> command, installed the required packages using <strong>npm install</strong>, and created a new MySQL database using MySQL Workbench. We then wrote the Node.js code to connect to the MySQL database, and finally, we ran the code and tested the connection. With this guide, you should now be able to successfully connect Node.js with MySQL database and workbench for your web applications.</p>
<div style='display:none;' class='shareaholic-canvas' data-app='share_buttons' data-title='How to Connect Node JS with MySQL Database' data-link='https://blogs.perficient.com/2023/08/03/how-to-connect-node-js-with-mysql-database/' data-app-id-name='category_below_content'></div><div style='display:none;' class='shareaholic-canvas' data-app='recommendations' data-title='How to Connect Node JS with MySQL Database' data-link='https://blogs.perficient.com/2023/08/03/how-to-connect-node-js-with-mysql-database/' data-app-id-name='category_below_content'></div>
</article>
</main></body></html>