DEV Community: Chidera Humphrey

Understanding this in JavaScript: Guide for Beginners

Chidera Humphrey — Wed, 27 Sep 2023 09:54:42 +0000

Introduction

The this keyword is one of the most confusing concepts in JavaScript. Many developers struggle with the concept of this.

However, understanding the concept of this is crucial for learning object-oriented programming (OOP) in JavaScript.

In this article, I will explain what the concept of this is and how it is used in different contexts.

What is `this`?

In simple terms, this refers to an object. this makes it convenient to reference objects. Without this, referencing an object would be difficult as you'll need to write more code. This can make your code error-prone.

The object this refers to, depends on the context in which this was called.

Let's look at the different contexts this can be called in JavaScript:

Object method

When used in an object method, this refers to the object that bears the method.

const person = {
  name: "John Doe",
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Hello, my name is John Doe

In the code above, this refers to the person object.

Constructors

In constructor functions, this refers to the new object instance created by the constructor function.

class Toyota {
  constructor(model) {
    this.model = model;
  }
}

const toyota = new Toyota("Camry");

console.log(toyota.model); // Camry

In the code above, this refers to the toyota instance.

Functions

In a function, the this keyword refers to the object calling the function.

If the function is called in the global scope, this refers to the global object.

function greet() {
  console.log(this); // window object
}

greet();

In the above code, this refers to the window object.

Note: In the browser, the global object refers to the window object. In Node.js, the global object refers to the global object.

If the function is an object method, this refers to the calling object.

const person = {
  name: "John Doe",
  greet() {
    console.log(this); // person object
  },
};

person.greet();

In the code above, this refers to the person object.

In strict mode, this returns undefined.

"use strict";

function greet() {
  console.log(this); // undefined
}

greet();

Arrow functions

Arrow functions, introduced in ES6, are a more concise way of declaring functions. Arrow functions provide a more shorter syntax for declaring functions.

// Traditional function
function greet() {
  console.log(this);
}

// Arrow function
const greet = () => {
  console.log(this);
};

Unlike in regular functions, this works differently in arrow functions.

In an arrow function, this refers to the owner of the function—context/scope where the arrow function was declared. This is because in arrow functions, there's no binding of this.

In the code below, the arrow function is declared in the global context/scope, and so this refers to the global object, window, in this case.

const greet = () => {
  console.log(this);
};

greet(); // window object

If you try to attach the function to an event handler, the greet() function will still refer to the window object. See below.

<button>Click Me</button>
<p id="paragraph"></p>

const button = document.querySelector("button");

const greet = () => {
    document.getElementById("paragraph").innerText += this;
};

button.addEventListener("click", greet);

Event handlers

Event handlers are functions that handle HTML events. HTML events are actions carried out by the browser or user. HTML events include but are not limited to the following:

Page load
Button click
Page scroll

In event handlers, this refers to the object receiving the event.

For example, in this code, this refers to the HTML button element, since it's the object receiving the onclick event:

<button onclick="greet()">Click me!</button>
<p id="paragraph"></p>

function greet() {
  document.getElementById('paragraph').innerText += this; // button element
}

Explicit binding

You can explicitly specify the object you want this to refer to. JavaScript provides three built-in methods (call(), apply(), bind()) that help you specify the object you want this to refer to.

`call()` and `apply()`

These two methods allow you to borrow a method from another object.

const person1 = {
    name: "John Doe",
    greet: function (){
        console.log(`Hello, I'm ${this.name}`);
    }
}

const person2 = {
    name: "Susan Doe"
}

// using call()
person1.greet.call(person2); //Hello, I'm Susan Doe

// using apply()
person1.greet.apply(person2); //Hello, I'm Susan Doe

The call() and apply() methods are identical in functionality. The only difference between the two is that call() accepts a list of arguments while apply() accepts an array of arguments.

`bind()`

The bind() method works pretty much the same way as call() and apply() methods. The difference is that the bind() method returns a function while call() and apply() returns the result of calling the function.

const person1 = {
    name: "John Doe",
    greet: function (){
        console.log(`Hello, I'm ${this.name}`);
    }
}

const person2 = {
    name: "Susan Doe"
}

const greetPerson2 = person1.greet.bind(person2);

greetPerson2(); // Hello, I'm Susan Doe

Conclusion

In this article, you have learned about the this keyword in JavaScript. You have seen how this can be used in different contexts, such as object methods, constructors, functions, and event handlers. You have also seen how this works differently in arrow functions.

The this keyword is a powerful tool in JavaScript, but it can also be confusing. I hope this article has helped you to better understand how this works and how to use it effectively in your code.

If you have any questions or feedback about this article, please feel free to leave a comment below.

You can also connect with me on LinkedIn and X (formerly Twitter)

Additional resources

FAQs

Can I change the value of this?

No. this is a keyword and like any other keyword, you can't change the value of this. Rather, you can use bind(), call(), or apply() to explicitly specify the object this references.

Can I use `this` in strict mode?

It is not recommended. Using this in strict mode returns undefined, which can lead to bugs in your code.

React Server Components and Server-Side Rendering: Supercharge Your Web Performance

Chidera Humphrey — Fri, 08 Sep 2023 19:36:16 +0000

Web performance is a critical factor in ensuring a positive user experience for your website or web application. Slow-loading pages can frustrate visitors and lead to higher bounce rates. To tackle this challenge, developers have turned to various techniques, and two of the most powerful tools in their arsenal are React Server Components (RSC) and Server-Side Rendering (SSR). In this blog post, we'll explore these technologies in-depth and discuss how they can help you optimize your web performance.

Understanding React Server Components (RSC)

React Server Components, or RSCs for short, represent a groundbreaking approach to web development. They introduce a paradigm shift by allowing components to reside on the server rather than the client-side. This architectural change has profound implications for web performance.

Lightning-Fast Data Retrieval

One of the standout features of RSCs is their ability to retrieve data with lightning speed. Traditional client-side components often rely on network requests to fetch data from a server. This involves network roundtrips that can introduce latency, especially on slower connections. RSCs, however, operate on the server and access server infrastructure like file systems and data stores directly, bypassing the need for network roundtrips. This means data can be fetched and delivered to the client in a fraction of the time it would take with traditional client-side components.

Seamless Performance

RSCs excel in delivering a seamless user experience. When data is sent to the client, it arrives as a well-composed component, ready to be rendered. This means that the user doesn't have to wait for additional client-side processing to see content. The result is a smoother and more responsive application, which is a significant win for web performance.

Direct Database Connectivity

Another advantage of RSCs is their ability to connect directly to databases from the component. This simplifies data integration, making it more efficient and reducing the complexity of managing data within your application. With RSCs, you can streamline your data retrieval and rendering processes, further enhancing web performance.

Limitations to Keep in Mind

While RSCs offer numerous benefits for web performance, it's important to be aware of their limitations:

No Browser APIs: RSCs operate exclusively on the server and do not have access to browser-specific APIs. This means you can't perform certain client-side operations within an RSC.
Limited Interactivity: If your application relies heavily on client-side interactivity or uses React hooks like useEffect or useState, you'll need to consider alternative approaches for those parts of your application.
Rendering Hierarchy: RSCs can render client components, but the reverse is not true. To maintain a consistent rendering hierarchy, you'll need to pass RSCs as props to your client components.

Exploring Server-Side Rendering (SSR)

Server-Side Rendering, or SSR, is another powerful technique for optimizing web performance. Unlike RSCs, SSR doesn't focus on components but rather on the overall performance of your web application.

Rapid Page Loading

The primary goal of SSR is to deliver an optimized HTML structure from the server to the client. This approach dramatically reduces the time it takes for the initial page to load. Instead of relying on client-side JavaScript to build the page, the client receives a pre-rendered HTML page. This "hydration" process is significantly faster, resulting in a snappier user experience.

A Closer Look at SSR

SSR isn't about individual components; it's about optimizing the entire web page. When a user requests a page, the server generates the HTML for that page on-the-fly. This HTML is then sent to the client, where it's "hydrated" with client-side JavaScript to make it interactive. SSR is particularly valuable for content-heavy websites or applications where the initial load time matters most.

Comparing RSC and SSR

In summary, React Server Components (RSC) and Server-Side Rendering (SSR) are both powerful tools for optimizing web performance, but they serve slightly different purposes:

RSC: RSCs are server-side components that excel at data retrieval and rendering, offering lightning-fast performance and direct database connectivity. They are suitable for applications that require efficient data integration and rendering.
SSR: SSR focuses on delivering rapid initial page loads by pre-rendering HTML on the server. It optimizes the entire web page, making it an excellent choice for content-heavy websites or applications.

Conclusion

Web performance is a critical aspect of delivering a great user experience, and React Server Components (RSC) and Server-Side Rendering (SSR) are powerful tools in your performance optimization toolkit. Depending on your application's requirements, you can choose between RSCs for efficient data retrieval and rendering or SSR for lightning-fast initial page loads. By leveraging these technologies, you can supercharge your web performance and ensure your users have a seamless and responsive experience.Title: Supercharge Your Web Performance with React Server Components and Server-Side Rendering

Is AI a Threat to Frontend Developers?

Chidera Humphrey — Mon, 04 Sep 2023 07:44:25 +0000

Frontend developers, are you worried about AI?

You're not alone. Many other front-end developers are worried of being replaced by AI. The rapid advancements in AI have raised questions about its impact on the industry. However, let me assure you: AI won't replace frontend developers. Instead, it's poised to complement them, revolutionizing the way we work.

In this article, we will delve into why AI is not a threat to frontend developers, how it is currently aiding in frontend development, and its promising role in the future.

Why AI Will Not Replace Frontend Developers

At its core, AI is a remarkable text predictor, but it can't replicate the creativity essential in frontend development. Frontend development involves more than just HTML, CSS, and JavaScript; it requires a deep understanding of color theory, design principles, branding, and even human psychology. AI falls short in these complex areas.

Additionally, usability and accessibility, crucial for any website's success, cannot be fully addressed by AI. These concepts are subjective and vary among users, making human developers better suited to understand and accommodate diverse needs. AI's lack of empathy and adaptability limits its usability and accessibility capabilities.

Moreover, AI struggles with performance optimization. While AI can optimize code and visuals for faster execution, it lacks the ability to prioritize optimizations without understanding the website owner's goals.

How AI Enhances Frontend Development

AI may not match human creativity, but it can be a valuable tool for front-end developers. It excels at automating repetitive tasks, such as code generation from designs and writing tests. For instance, Microsoft's sketch2code can swiftly convert hand-drawn designs into functional HTML prototypes, saving developers time.

Credit: Microsoft.com

Incorporating AI-powered chatbots can elevate customer experiences significantly and reduce cost for businesses. According to a report by IBM, chatbots can reduce customer support service fees by 30%. In the same report, it's estimated that chatbots can save businesses $8 billion.

Furthermore, AI can assist with real-time translations, leveraging its multilingual capabilities to enhance user interactions especially for businesses that want to reach a wider market. According to a study by CSA research, 76% of customers prefer to shop in their own language, while 40% will not buy from a site in another language.

The Future of AI in Frontend Development

I firmly believe that AI will play an increasingly vital role in frontend development. However, human frontend developers will remain indispensable. They bring creativity, problem-solving skills, and expertise that AI can't replicate.

Conclusion

AI is not a threat but an ally to front-end developers. Embracing AI can enhance efficiency and open new possibilities, but human ingenuity and empathy will continue to drive innovation in frontend development. So, instead of fearing AI, let's harness its potential to create more dynamic and user-friendly websites.

Follow me on X (formerly Twitter) and connect with me on LinkedIn to stay updated on the latest developments in frontend development space.

Palindromes in JavaScript - DEV

Chidera Humphrey — Mon, 28 Aug 2023 09:11:21 +0000

Introduction
Prerequisite
Creating a Palindrome Checker
- Declaring the isPalindrome Function
- Defining the Function Parameters
- Preparing the String
- Reversing the Word
- Comparing the Two Strings
Solving Real Challenges
- Challenge 1: Sentence Palindromes
  - Problem: Detecting Palindromes in Sentences
  - Solution: isSentencePalindrome Function
- Challenge 2: Word Palindromes
  - Problem: Identifying Palindromic Words
  - Solution: findWordPalindromes Function
- Challenge 3: Longest Palindromic Substring
  - Problem: Finding the Longest Palindromic Substring
  - Solution: findLongestPalindromicSubstring Function
Conclusion

Introduction

In the world of coding challenges, palindromes are like captivating puzzles. They test how well you can work with words in JavaScript.

In this article, you'll learn:

What exactly a palindrome is.
How to use JavaScript to solve these word puzzles.

Let’s dive in.

Prerequisite

Basic understanding of JavaScript fundamentals, including variables and data types.
Proficiency in creating and using functions in JavaScript.
Familiarity with regular expressions (RegEx) in JavaScript. If you’re not familiar with regular expressions, this article might be helpful.
Knowledge of essential JavaScript array methods like split(), join(), and reverse(). If you’re not familiar with these array methods, this article might be helpful.
Access to a code editor or integrated development environment (IDE) for writing and testing your JavaScript code. If you’re coding from your Android/iOS, I recommend using the JS Run app.

What is palindrome

In the coding world, a palindrome is a word or phrase that reads the same way forwards and backwards. For example, 'radar' and 'level' are palindromes. They're like word puzzles with a unique twist.

Now, let's dive into how you can solve these word games using JavaScript.

Creating a palindrome checker

In this section, you are going to learn how to create a JavaScript function that checks whether a string is a palindrome or not. This will be the fundamental block for solving palindrome challenges.

Declaring the function

Start by declaring a function. Let’s call it isPalindrome ; you can call it any thing you want, but make sure it’s descriptive enough.

function isPalindrome() {

}

Defining the function parameters

The isPalindrome will take only one parameter—input string you want to check for being a palindrome.

function isPalindrome(input) {

}

Preparing the string

Depending on the challenge, the input string might contain special characters (characters that are neither an alphabet nor a number). In that case, you want to remove the special characters.

To achieve this, use replace() and regular expression to replace the special characters with an empty string.

The resulting string is stored in the variable, preparedString.

function isPalindrome(input) {
  const preparedString = input.replace(/[^A-Za-z0-9]/g, '');
}

Reversing the word

Use the split() method to convert preparedString into an array.
Store the resulting array in a variable, reversedString. We’re using reversedString as the variable because the array will be converted back to a string.
Reverse the order of arrangement of the array using the reverse() method.
Use the join() method to convert the array back to a string.

Note that all these steps are done in a single statement.

function isPalindrome(input) {
  const preparedString = input.replace(/[^A-Za-z0-9]/g, '');
  const reversedString = preparedString.split('').reverse().join('');
}

Comparing the two strings

Use the strict equality operator, ===, to compare reversedString and preparedString. If they match, the input string is a palindrome.
Use the return statement to return true or false depending whether the input string is a palindrome or not.

function isPalindrome(input) {
  const preparedString = input.replace(/[^A-Za-z0-9]/g, '');
  const reversedString = preparedString.split('').reverse().join('');
  return reversedString === preparedString;
}

Solving real challenges

In this section, you’re going to use the isPalindrome function created earlier in this article to solve the following challenges on palindromes.

Sentence palindrome

One of the fundamental challenges involving palindromes is determining whether a sentence is a palindrome or not. This task requires considering not only the characters but the spaces, punctuation, and case-insensitivity.

Problem<> You’re given a sentence. Check whether the sentence is a palindrome or not.

Solution

function isSentencePalindrome(sentence) {
  // Prepare the sentence (remove spaces, punctuation, and make it lowercase).
  const preparedSentence = sentence.replace(/[^A-Za-z0-9]/g, '').toLowerCase();

  // Use the isPalindrome function to check if the prepared sentence is a palindrome.
  return isPalindrome(preparedSentence);
}

const sentence = "Was it a car or a cat I saw?";
const result = isSentencePalindrome(sentence);

if (result) {
  console.log("The sentence is a palindrome.");
} else {
  console.log("The sentence is not a palindrome.");
}

In this example, the code prepares the sentence by converting it to lowercase. It then checks if the prepared sentence is a palindrome and informs the user of the result.

When you run this code with the provided sentence, it will output:

The sentence is a palindrome.

Word palindrome

Building on your knowledge of palindrome checking, the next challenge is to determine if individual words within a sentence are palindromes. Unlike sentence palindromes, where you consider the entire sentence, word palindromes focus on individual words in the sentence.

Problem

You’re given a sentence. Find the words that are palindromes within the given sentence.

Solution

function findWordPalindromes(sentence) {
  // Split the sentence into words.
  const words = sentence.split(' ');

  // Initialize an array to store word palindromes.
  const wordPalindromes = [];

  // Iterate through each word.
  words.forEach((word) => {
    // Prepare the word (remove spaces, punctuation, and make it lowercase).
    const preparedWord = word.replace(/[^A-Za-z0-9]/g, '').toLowerCase();

    // Use the isPalindrome function to check if the prepared word is a palindrome.
    if (isPalindrome(preparedWord)) {
      wordPalindromes.push(word);
    }
  });

  return wordPalindromes;
}

const sentence = "A man a plan a canal Panama";
const wordPalindromes = findWordPalindromes(sentence);

console.log("Word Palindromes:", wordPalindromes);

In this example, the code:

splits the sentence into words,
prepares each word by removing spaces and punctuation,
checks if each word is a palindrome,
and stores the word palindromes in an array.

Finally, it outputs the word palindromes found in the input sentence.

When you run this code with the provided sentence, it will output:

Word Palindromes: [ 'A', 'a', 'plan', 'a', 'Panama' ]

Longest palindromic substring

Increasing the complexity, the next challenge is to find the longest palindromic substring in a text.

Problem

You’re given a sentence. Find the longest palindromic substring within the sentence.

Solution

function findLongestPalindromicSubstring(text) {
  let longest = ''; // Initialize a variable to store the longest palindrome found.

  // Outer loop iterates over the text character by character.
  for (let i = 0; i < text.length; i++) {
    // Inner loop iterates from the current character to the end of the text.
    for (let j = i + 1; j <= text.length; j++) {
      // Extract the current substring from the text.
      const substring = text.slice(i, j);

      // Check if the substring is a palindrome using the isPalindrome function.
      if (isPalindrome(substring) && substring.length > longest.length) {
        // If it's a palindrome and longer than the current longest, update longest.
        longest = substring;
      }
    }
  }

  // Return the longest palindromic substring found.
  return longest;
}

// Input text to be analyzed.
const text = "racecarbananaappledeifiedlevel";

// Call the findLongestPalindromicSubstring function.
const longestPalindrome = findLongestPalindromicSubstring(text);

// Output the result.
console.log("Longest Palindromic Substring:", longestPalindrome);

In this example, the findLongestPalindromicSubstring function iterates through the text, checking each possible substring for palindromes using the isPalindrome function. It keeps track of the longest palindromic substring found and returns it.

When you run this code with the provided text, it will output:

Longest Palindromic Substring: deified

Conclusion

From understanding the basics to crafting efficient palindrome-checking functions, you've gained valuable knowledge of string manipulation and problem-solving. Throughout this journey, you've honed your skills by:

Learning the intricacies of palindrome patterns.
Creating JavaScript functions to detect palindromes.
Harnessing the power of regular expressions.
Employing essential array methods for string manipulation.
Tackling real challenges, from sentence palindromes to word palindromes.

Remember, palindromes are not just fun puzzles; they reflect the elegance of problem-solving in coding. These skills will serve you well in tackling a wide range of challenges as a programmer.

Now, it's your turn to put your knowledge to the test! Try creating your own palindrome-checking functions, exploring more complex challenges, or even contributing to open-source projects.

I’d love to hear your thoughts on this article. Did you find it helpful? Do you have any questions or suggestions for future tutorials?

Please share your feedback and insights in the comments section below.

Your input can help me tailor future content to your interests and needs.

P.S. Stay Connected! For more coding tips, tutorials, and updates, be sure to connect with me on LinkedIn and Twitter. We're excited to continue this coding journey with you:

React Hooks Fundamentals for Beginners: How to Use useState and useEffect hooks 2023

Chidera Humphrey — Sat, 24 Jun 2023 12:36:10 +0000

What are React hooks
- Concept of hooks
- Brief overview of different hooks
Managing state with the useState hook
- Explain the concept of the useState hook and how to use it to manage state.
- Practical examples of managing state with the useState hook.
Using the useEffect hook to handle side-effects in React apps
- Explain the useEffect hook and how to use it to handle side-effects like making API calls.
- Practical example of making an API call to an external source.
Refactoring Class Components to Functional Components with Hooks
- Explain how Hooks can be used to refactor class components to functional components
- Practical examples of refactoring class components to functional components with Hooks.
Benefits of using React hooks
Concluding thoughts

What are react hooks

React hooks are functions that let you use different React features from your functional components. This means that you can manage state, make API calls, and other things a class-based component can do from functional components.

There are different hooks in React which let you do different things.

useState hook lets you create and manage state.
useEffect hook lets you handle side-effects in your React application
useContext hook lets you share state without prop drilling, awesome right?
useMemo hook: lets you memoize your react components
useCallback hook is used to memoize functions, optimizing performance by preventing unnecessary re-rendering of components that depend on those functions.
useReducer hook: this hook is similar to the useState hook but handles complex state more efficiently.
useRef hook provides a way to create mutable references to elements or values that persist across renders.

This is not an exhaustive list but these are the hooks you will use 99% of the time.

Managing state with useState hook

The useState hook lets you add and manage state in a React component. It’s equivalent to this.state = {} in class components.

To use the useState hook, call it at the top-level of your component:

const [state, setState] = useState(initialState);

It returns an array of exactly two values: current state and a function for updating that state.

Let’s look at them closely.

state: this is the current state. When your component first renders, the state equals the initialState.

setState: this is a function for updating the state and trigger a re-render.

initialState: the value you want the state to be initially. It can be of any valid JavaScript value.

Note: The setState function only updates the state variable for the next render. If you read the state variable after calling the setState function, you will still get the old value that was on the screen before your call.

Also, React will skip re-rendering of your component if the value you provide is identical to the current state.

Usage

To use the useState hook, you call it at the top level of your component.

import {useState} from “react”
   function (){
const [state, setState] = useState(‘’);
}

Basic applications of useState

Updating a text field

In this simple example, the firstName and lastName state variables hold a string. When you type into the input fields, the handleFirstName and handleLastName updater functions read your inputs in the DOM and updates the UI accordingly.

import { useState } from 'react';

export default function MyInput() {
  const [firstName, setFirstName] = useState(‘’);
  const [lastName, setLastName] = useState(‘’);

  function handleFirstName(e) {
    setFirstName(e.target.value);
  }
function handleLastName(e) {
    setLastName(e.target.value);
  }

  return (
    <>
      <input value={firstName} onChange={handleFirstName} />
     <input value={lastName} onChange={handleLastName} />
      <p>{firstName} {lastName} is typing.</p>
    </>
  );
}

Updating objects and arrays in state

When updating arrays or objects in state, you should not directly mutate the state.

Here’s what I mean 👇

state.age = 42; // you should not directly mutate state.

Instead, you should replace the old state with a new one.

SetState({
...old state, 
age: 42
})

This is also applicable to arrays.

state.push(“Banana”) // not recommended 
     setState([...prevState, “Banana”])

Example of object in state

In this example, the employee state variable holds an object. Each input field has a change handler that calls the setEmployee function to update the state. The spread syntax (...) to make sure state is replaced and not mutated.

import { useState } from 'react';

export default function Employee() {
  const [employee, setEmployee] = useState({
    firstName: “”,
    lastName: “”,
    job: '',
  });

  return (
    <>
      <label>
        First name:
        <input
          value={employee.firstName}
          onChange={e => {
            setEmployee({
              ...employee,
              firstName: e.target.value
            });
          }}
        />
      </label>
      <label>
        Last name:
        <input
          value={employee.lastName}
          onChange={e => {
            setEmployee({
              ...employee,
              lastName: e.target.value
            });
          }}
        />
      </label>
      <label>
        Job:
        <input
          value={employee.job}
          onChange={e => {
            setEmployee({
              ...employee,
              job: e.target.value
            });
          }}
        />
      </label>
      <p>
        {employee.firstName}{' '}
        {employee.lastName}{' '}
        ({employee.job})
      </p>
    </>
  );
}

Example of array in state

In this example, the fruits state variable holds an array. Each button handler that calls the setFruits function to update the state. The spread syntax (...) to make sure state is replaced and not mutated.

import { useState } from 'react';
import AddTodo from './AddTodo.js';
import TaskList from './TaskList.js';

let nextId = 3;
const initialTodos = [
  { id: 0, title: "'Buy milk', done: true },"
  { id: 1, title: "'Eat tacos', done: false },"
  { id: 2, title: "'Brew tea', done: false },"
];

export default function TaskApp() {
  const [todos, setTodos] = useState(initialTodos);

  function handleAddTodo(title) {
    setTodos([
      ...todos,
      {
        id: nextId++,
        title: "title,"
        done: false
      }
    ]);
  }

  function handleChangeTodo(nextTodo) {
    setTodos(todos.map(t => {
      if (t.id === nextTodo.id) {
        return nextTodo;
      } else {
        return t;
      }
    }));
  }

  function handleDeleteTodo(todoId) {
    setTodos(
      todos.filter(t => t.id !== todoId)
    );
  }

  return (
    <>
      <AddTodo
        onAddTodo={handleAddTodo}
      />
      <TaskList
        todos={todos}
        onChangeTodo={handleChangeTodo}
        onDeleteTodo={handleDeleteTodo}
      />
    </>
  );
}

Handling side effects with `useEffect` hook

The useEffect hook is used to handle side effects in React. Side effects mean operations not controlled by React. Common side effects include:

Making calls to a third-party API
Interacting with the browser’s local storage
Communicating with the DOM
Implementing certain libraries such as: animation libraries.

To use the useEffect hook, declare it at the top-level of your component

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    // Side effect code goes here

    // Clean up the effect (optional)
    return () => {
      // Cleanup code goes here
    };
  }, []);

  return (
    // Component JSX goes here
  );
}


export default ExampleComponent;

The useEffect hook takes two arguments:

The first argument is a callback function that contains the code for the side effect. This is where you can perform API calls, manipulate the DOM, interact with browser storage, or integrate with external libraries.

The second argument is the dependency array, which determines when the effect should run. By passing an empty array [], the effect will only run once, after the initial render.
If you want the effect to run again when certain dependencies change, you can include them in the dependency array.

Now that you have a good understanding of the useEffect hook and its purpose in handling side effects in React, let's look at some common use cases and see how it can be used in practice.

Making calls to third-party APIs

In this example, we'll look at how to use the useEffect hook in React to make calls to third-party APIs. Making API calls is something you will do more often as a front-end developer, and the useEffect hook provides a convenient way to handle such asynchronous operations.

We are going to use the IMDB API to retrieve details of a film.
Let's dive into the code to see how it's done.

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

function FilmDetails() {
  const [film, setFilm] = useState(null);

  useEffect(() => {
    // Function to fetch film details from the IMDB API
    const fetchFilmDetails = async () => {
      try {
        const response = await fetch('https://api.example.com/films/123');
        const data = await response.json();
        setFilm(data);
      } catch (error) {
        console.error('Error fetching film details:', error);
      }
    };

    fetchFilmDetails();

    // Cleanup function
    return () => {
      // Cleanup code goes here
      // This will be executed when the component is unmounted or when the dependency changes
    };
  }, []);

  if (!film) {
    return <p>Loading film details...</p>;
  }

  return (
    <div>
      <h2>{film.title}</h2>
      <p>{film.description}</p>
      {/* Render other film details */}
    </div>
  );
}

export default FilmDetails;

In this example, we have a functional component, FilmDetails. We also use the useState hook to manage the film state which is initially set to null.
Inside the useEffect hook, we define an asynchronous function to fetch data from the IMDB API.

If the API call succeeds, we update the film state with the retrieved data using setFilm.

If an error occurs during the API call, we log the error message to the console within the catch block.

We passed an empty dependency array as the second argument. This means that the effect will run only once—on initial render.

For better user experience, we have added a loading state in case the film data is yet available. Once it is available, we render the component JSX.

Finally, the return statement inside the useEffect returns a clean-up function, which will be executed when the component is unmounted or when the dependency changes. You can add any necessary clean-up code, such as canceling ongoing requests or removing event listeners, inside the clean-up function.

If the API call was successful, you should see the fetched film details displayed in your browser.

Interacting with the browser's local storage

In this example, we are going to reading and writing to the browser's local storage.
The browser's local storage is used for persisting data.

Let's dive into the code.

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

function LocalStorageExample() {
  const [name, setName] = useState('');

  useEffect(() => {
    // Read from local storage
    const storedName = localStorage.getItem('name');
    if (storedName) {
      setName(storedName);
    }
  }, []);

  const handleNameChange = (e) => {
    const newName = e.target.value;
    setName(newName);

    // Write to local storage
    localStorage.setItem('name', newName);
  };

  return (
    <div>
      <h2>Hello, {name || 'stranger'}!</h2>
      <input type="text" value={name} onChange={handleNameChange} />
    </div>
  );
}

export default LocalStorageExample;

In this example, we define a functional component, LocalStorageExample. We use the useState hook to manage the name state.

We use the useEffect hook to interact with the local storage. First, we read from the local storage using the getItem() method. If name key exists, we set the name state to the value using the setName function.
Next, we define a handleNameChange function that is triggered when the input's value changes. It updates the name state with the new value and uses localStorage.setItem() to write the new value to the local storage, associating it with the key 'name'.

The component renders a heading that displays the greeting with the current name (or stranger if no name is set), and an input field where the user can enter a new name.

Note: This code will not work in server-side as the localStorage only exists in the browser.

Refactoring Class Components to Functional Components with Hooks

Hooks were only introduced in React 16. This means that if you have been using React before then, you will most likely be using class components for tracking and managing data, as well as fetching and sending data.

In this section, I am going to show you how to refactor your class components to functional components using hooks.

Refactoring State Management: From Class Components to Functional Components

To refactor class components with state to functional components with state, we convert the class component's state management using this.state and this.setState to functional components utilizing the useState hook.

Class component

import React, { Component } from 'react';

class ClassComponentWithState extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default ClassComponentWithState;

Corresponding functional component

import React, { useState } from 'react';

function FunctionalComponentWithState() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default FunctionalComponentWithState;

We converted the class component to functional component by replacing this.state and this.setState with the useState hook. As explained above, the useState hook returns an array with exactly two values: current state and an updated function.

Refactoring Data Fetching: From Class Components to Functional Components

To refactor data fetching from class components to functional components, we convert the class component's approach, which typically uses lifecycle methods like componentDidMount and componentDidUpdate, to functional components utilizing the useEffect hook for handling data fetching and updating component state.

Class component with data fetching

import React, { Component } from 'react';

class ClassComponentWithDataFetching extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      updateCount: 0,
    };
  }

  componentDidMount() {
    // Data fetching
    this.fetchData();
  }

  componentDidUpdate(prevProps, prevState) {
    // Check if updateCount has changed
    if (prevState.updateCount !== this.state.updateCount) {
      this.fetchData();
    }
  }

  fetchData = () => {
    // Data fetching
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((jsonData) => this.setState({ data: jsonData }))
      .catch((error) => console.error('Error fetching data:', error));
  };

  handleUpdate = () => {
    this.setState((prevState) => ({
      updateCount: prevState.updateCount + 1,
    }));
  };

  render() {
    return (
      <div>
        {this.state.data.map((item) => (
          <p key={item.id}>{item.name}</p>
        ))}
        <button onClick={this.handleUpdate}>Update</button>
      </div>
    );
  }
}

export default ClassComponentWithDataFetching

Functional component with data fetching

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

function FunctionalComponentWithDataFetching() {
  const [data, setData] = useState([]);
  const [updateCount, setUpdateCount] = useState(0);

  useEffect(() => {
    // Data fetching
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, [updateCount]); // Update when updateCount changes

  // Simulating component update triggering the useEffect
  const handleUpdate = () => {
    setUpdateCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
      <button onClick={handleUpdate}>Update</button>
    </div>
  );
}

export default FunctionalComponentWithDataFetching;

We converted the class component by replacing the componentDidMount andcomponentDidUpdatewith the useEffect hook. The dependency array helps us mimick the two lifecycle methods.

Benefits of Using the React hooks

Using React hooks provides several benefits in developing React applications:

Simplicity
Hooks enable functional components to have their own state and lifecycle methods. This makes it easier to read, write, and understand code without dealing with the complexity of class components.
Reusability
Hooks promote code reuse. Custom hooks allow you to encapsulate logic and stateful behavior into reusable functions that you used across multiple components in your application. This promotes modular and maintainable code.
Enhanced Functional Components
Hooks enable functional components to have state and side effects, previously only available in class components. You can manage component state using the useState hook and handle side effects with the useEffect hook, making functional components more powerful and versatile.
Improved Performance
Hooks optimize performance by reducing unnecessary re-renders. With the useMemo and useCallback hooks, you can memoize values and functions respectively, preventing unnecessary computations or re-rendering of components.
Easier Testing
Hooks promote functional programming concepts which makes testing easier, as the logic is separated into small, testable functions. This allows you to test components in isolation.
Migration from Class Components
Hooks simplify the process of migrating from class components to functional components. Existing class components can be refactored to functional components using hooks, retaining the functionality while improving code readability and maintainability.
Community Support
Hooks have gained widespread adoption and support from the React community. This means that you can find ample resources, documentation, and community-driven libraries to assist in learning and using hooks effectively.

Concluding Thoughts

React hooks are a powerful feature that allows developers to utilize different React functionalities within functional components. They enable state management, handling side effects, and refactoring class components to functional components.

The useState hook is used for managing state, while the useEffect hook is used for handling side effects such as making API calls. Hooks provide benefits such as code simplicity, reusability, and eliminating the need for class components.

Overall, React hooks offer an efficient and effective way to enhance the functionality and development experience in React applications.

Follow me on Twitter and LinkedIn for more content and updates.

8 Frontend Development Trends To Watch Out For 2023

Chidera Humphrey — Sun, 11 Jun 2023 13:13:35 +0000

Frontend development is an ever-evolving field. To stay relevant as a frontend developer, you need to keep up with frontend development trends.

In this article, I'm going to share with you 8 frontend development trends to watch out for 2023.

Machine learning and AI-powered chatbots

AI has been making waves in the developer community of late. AI has a wide range of application, frontend development included.

Going forward, we are going to see more and more apps get smarter. AI-powered chatbots is one such example.

With AI, developers can incorporate chatbots into their apps. This can improve customer service and keep your customers happy.

Coding assistants

Coding assistants are another application of AI. They help with tasks that developers don't want to tackle or are less valuable.

With coding assistants, developers can actually focus on what really matters. Github's Copilot and Amazon's CodeWhisperer are leading coding assistants.

This a trend many frontend developers are embracing as 77% of developers say that they look to incorporate coding assistants into their workflow.

Voice User Interface (VUI)

VUI, or Voice User Interface, enables users to interact with devices or systems using spoken commands. It relies on speech recognition to interpret user inputs and provide appropriate responses.

Popular examples of VUI include voice assistants like Alexa, Google Assistant, and Siri.

Conversational UI focuses on designing interfaces that mimic natural conversations between users and computer systems.

It employs chatbots or virtual assistants to engage users in dialogue-driven interactions.
By utilizing natural language processing, conversational UI understands user intent and generates relevant responses.

These interfaces can be integrated into websites, messaging platforms, or mobile applications, offering personalized assistance and facilitating tasks.

VUI and conversational UI share the goal of enhancing user experiences by enabling hands-free and intuitive interactions. They provide accessible and interactive ways to access information, control devices, and accomplish tasks through voice-based conversations.

Server-side rendering (SSR)

Server-side rendering is not a new concept in frontend development.

In fact, back in the days when websites were built with only HTML, pages were rendered on the server.
Things began to change when websites were built with JavaScript. This introduced client-side rendering (CSR)—pages are updated in the browser.

But SSR is making a comeback, albeit with a twist. Pages are built on the server and sent to the client where they are hydrated.

This will improve performance, SEO, and load times.

Cloud computing

Cloud computing refers to the delivery of computing services, including servers, storage, databases, software, and more, over the internet ("the cloud").

Instead of relying on local infrastructure and physical hardware, cloud computing allows users to access and utilize resources on-demand, scaling up or down as needed.

Cloud computing has become a growing trend in frontend development due to its benefits:

Scalability: you can easily scale frontend applications to handle increased traffic and accommodate a growing user base without investing in more servers.
Cost-Effectiveness: cloud computing platforms use the pay-as-you-go model which eliminates upfront investment and allows businesses to pay for only consumed resources.
Flexibility and Accessibility: cloud computing enables developers to collaborate seamlessly and from any location.
Rapid Deployment: cloud platforms provide businesses with streamlined processes and infrastructure-as-code tools, enabling faster development cycle and quicker time-to-market.
Robust Backend Services: cloud platforms integrate pre-built services like databases, authentication, and CDNs for efficient development.
Reliability and Security: cloud platforms provides businesses with high availability, redundancy, disaster recovery, and built-in security features.

Progressive Web Apps (PWAs)

PWAs are not entirely new. They have been in existence for over a decade now. But it is gradually gaining popularity in the frontend development space.

PWAs are simply web apps that have the functionalities of native apps such as: push notifications. It combines the best of web apps and native apps.

It encourages more engagement as they can work offline due to caching.
Companies that have incorporated PWAs have seen a rise in user engagement and retention. FlipKart and Twitter are examples.

Single-page application (SPA)

SPAs have gained popularity in web development due to their seamless user experiences.
Unlike traditional multi-page applications, SPAs load all necessary resources and content on a single web page, dynamically updating the content as users interact with the application.

This approach eliminates page reloads, resulting in faster, more responsive applications.
SPAs leverage JavaScript frameworks like React, Angular, or Vue.js to handle client-side rendering and manage state.

By loading only the required data and components, SPAs reduce server load and bandwidth consumption.
With SPAs, developers can create highly interactive and engaging web experiences, enabling smooth transitions, real-time updates, and improved performance.

Micro-frontends

Micro-frontend is an architectural approach that involves breaking down a frontend application into smaller, autonomous, and independently deployable parts.
Each part, known as a micro-frontend, focuses on a specific feature or functionality.

These micro-frontends can be developed using different technologies, frameworks, or programming languages, allowing teams to work independently and adopt the most suitable tools for their specific needs.
By decoupling the frontend into smaller units, development teams can work more efficiently, release updates and new features independently, and reduce the risk of code conflicts.

Micro-frontend architecture also enables teams to scale their applications more effectively, as they can selectively update or replace individual micro-frontends without impacting the entire application.

What I think going forward

As much as these are trending, it doesn't mean that you should start implementing them right away.

For example, you don't need to use micro-frontend architecture if your app is relatively small and you are on a low budget.
Also, if you are building app like a blog or portfolio website, SPA might be a better choice.

Coding assistants will not take developer jobs, at least not now, they will only serve as a helping hand.

Concluding Thoughts

The frontend development space is evolving faster than we can keep up with it. But jumping on the trends listed above can make you more relevant and put you ahead of your competitors.

If you enjoyed the article, follow me on Twitter and LinkedIn

5 Ways To Optimize Your React App Performance 2023

Chidera Humphrey — Sat, 03 Jun 2023 10:00:41 +0000

Image by catalyststuff on Freepik

Do you know that the performance of your React application can directly impact your conversion and retention rates?

Making your pages faster and more optimized can make for a great user experience.

In this article, I'm going to show you 5 ways to improve your React app performance.

Let's dive in.

Use in-browser tools to monitor performance

Browser tools and extensions are great ways of measuring your app performance. With a tool like React Dev tool, you can check what components are rendering and why they are rendering. This can help you identify unnecessary re-rendering and reasons why it is happening. This way you can work on your app to mitigate the unnecessary re-renders.

Windowing or list virtualization

This technique is useful for apps that displays a long list. Windowing involves displaying a limited number of the list and load others on-demand.
This can greatly improve the performance of your React applications. There are two great libraries for implementing list virtualization in react: react-window and react-list-virtualization.

Lazy loading components

Loading components only when they are needed is another great way to improve your React app performance.
Use lazy() function and Suspense component to lazy load components.
The lazy() function only accepts a function as an argument which must call a dynamic import statement. It returns a promise which resolves to a React component.
The component can then be wrapped inside a Suspense component with a specified fallback component (loading indicator) that displays while the component is being loaded.

import React, { lazy, Suspense } from 'react';

// Lazy load the component
const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>My App</h1>

      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Keep states local when necessary

When the state of a component changes, React re-renders the component along with its children. For small apps, this poses no problem. For apps that have components that perform expensive calculation before rendering, this can significantly reduce your app performance.
To avoid unnecessary re-rendering of components, you want to keep states local to only the components that care about the state.
Though, this is not always feasible as some states need to be global.

Use `useMemo` and `useCallback` hooks to improve your app performance

A component re-renders when its state or props changes.
If a parent component re-renders, its child components also re-render regardless of whether there is a change in state/props or not.
This can cause performance issues, especially if the child components perform expensive calculations.
With the useMemo hook, you can cache the result of function. It takes a function as a first parameter and a dependency array as the second parameter. If the value of the elements in the dependency array do not change, as determined by Object.is comparison, React skips re-rendering the component.
The useCallback hook functions in the same way but only returns the definition of the function not the result of calling it.
Both hooks are used in memoizing React components/functions.
Here's a simple implementation of useMemo and useCallback hooks 👇

import React, { useState, useMemo, useCallback } from 'react';

function App() {
  const [count, setCount] = useState(0);

  // Example of useMemo
  const doubledCount = useMemo(() => {
    console.log('Calculating doubled count...');
    return count * 2;
  }, [count]);

  // Example of useCallback
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <h2>Doubled Count: {doubledCount}</h2>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default App;

Conclusion

Improving your app performance can lead a richer experience for your users, in turn boosting your conversion and retention rates.
In this article, I have outlined five ways you can improve your React app performance. The techniques mentioned can also be applied to pretty much any framework.

Follow me on Twitter for more tips and tricks on React and JavaScript in general.

HTTP: Definitive Guide For JavaScript Developers

Chidera Humphrey — Tue, 09 May 2023 14:24:02 +0000

What is a http request?

Http is the protocol computers use to communicate with each other over the internet. This is the bedrock of the internet. Http requests are how clients communicate with servers(remote or internal).

With http requests, clients can send, retrieve, or update data that is hosted on a server. The client also receives a response back from the server with the intended file or error message and status codes depending on whether the request was successful or not. This is known as request-response cycle.

Here's how a request looks like:
GET xxx/http 1.1

The GET specifies the request type. There are many request types but the most commonly used are:
• GET—for retrieving data from servers.
• POST—for sending new data to the server.
• PUT—for updating all parts of an existing data on a server.
• PATCH—for updating some parts of an existing data on a server.
• DELETE—for deleting a resource on a server.

The xxx part specifies the URL you want to connect to.
The http 1.1 specifies the protocol used for the communication.

Request Headers

Http requests also have header—request headers. Request headers contain information about the client that is required to establish a connection between the client and the server.
The payload data include: authorization token, content type, and encoding.

How to make http requests in JavaScript

There are several ways of making request in JavaScript, but we are going to look at the two most popular: fetch API and axios.

Using fetch API

Making a GET request using fetch API

The fetch() function takes the URL as a parameter and returns a promise. You can use the .then() to receive and manipulate the response.

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Making a POST request using `fetch` API

The fetch() takes a second parameter, which is an object, that specifies the request type, body(containing the data to be sent to the server, usually an object converted to a JSON string using the JSON.stringify() method), headers, and other relevant fields.

const data = { name: 'John', age: 30 };
const options = {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
};

fetch('https://example.com/users', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Making a PUT/PATCH request using fetch API

The PUT/PATCH request is similar to the POST request. You just have to specify the request type and modify the data accordingly.

PUT request

const formData = new FormData();
formData.append('name', 'John');
formData.append('age', '30');

const options = {
  method: 'PUT',
  body: formData,
};

fetch('https://example.com/users/123', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

PATCH Request

const data = { name: 'John', age: 30 };
const options = {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
};

fetch('https://example.com/users/123', options)
  .then(response => console.log(response.json()))
  .catch(error => console.error(error));

Making DELETE requests using fetch

As the name implies, a DELETE requests deletes a resource/data from an endpoint on a server.

const options = {
  method: 'DELETE',
};

fetch('https://example.com/users/123', options)
  .then(response => console.log(response.json()))
  .catch(error => console.error(error));

Using axios

Axios is a third-party library for making http requests. It’s promise-based. It simplifies making http requests and handling the response.
To use axios, you need to install it. Use this snippet to install axios.

npm install axios

Making a GET request with axios

To make a GET request, you make use of the .get(). You can then use the .then() to process the data for a successful response or catch() to catch errors. This is applicable to all request types.

axios.get('https://example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Making a POST request with axios

To make a POST request, you make use of the post(). The post() takes URL, data to be sent, and an optional config object—more on that later.
The data to be sent is usually stored in an object. You handle the response in a similar way.

const data = { name: 'John', age: 30 };
const options = {
  headers: { 'Content-Type': 'application/json' },
};

axios.post('https://example.com/users', data, options)
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Making PUT/PATCH request with axios

Making PUT/PATCH request is similar to that POST, the difference is in the method used; PUT—put() and PATCH—patch().

PUT request

const formData = new FormData();
formData.append('name', 'John');
formData.append('age', '30');

axios.put('https://example.com/users/123', formData)
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

PATCH request

const data = { name: 'John', age: 30 };
const options = {
  headers: { 'Content-Type': 'application/json' },
};

axios.patch('https://example.com/users/123', data, options)
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Making a DELETE request using axios

To make a DELETE request, you make use of the delete() method. You only have to specify the endpoint.

axios.delete('https://example.com/users/123')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Adding Headers to requests in axios

You can add request headers in axios by passing an object with a headers property as a second parameter inside of GET/DELETE request and third parameter inside of POST/PUT/PATCH request.

const headers = { 'Authorization': 'Bearer my-token' };
axios.get('https://example.com/data', { headers })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

You can also define a config object and add your headers as a property which is an object containing other fields. Then, you can pass it into the various request methods.

const config = {
  headers: { 'Authorization': 'Bearer my-token' },
};

axios.post('https://example.com/users', data, config)
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Default headers

Your application may have multiple API requests, and you may want to set request headers for all of them. Instead of adding the headers to each request, you can put them as default headers, and they will apply to all the requests. To do so, use the defaults.headers property of the axios object.

axios.defaults.baseURL = 'https://example.com/api';
axios.defaults.headers.common['Authorization'] = 'Bearer my-token';

// Make requests using the regular axios object
axios.get('/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

axios.post('/users', data)
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

In this example, we set the default headers using the axios.defaults.headers.common object. We set the Authorization header to Bearer my-token. We also set the default base URL using the axios.defaults.baseURL property. Then, we use the regular axios object to make API requests, and the default headers will be applied to all of them.

Conclusion

In this article, we have learned what http requests are, types of http requests, and how to make http requests in JavaScript. We learned how to use the browser built-in fetch API and axios—third-party http client library.

With our new knowledge, we can now communicate with servers from our frontend application.

If you found value in this article, like and share.

Also, follow me for more content on front-end topics and web development.

How to learn React in 2023: A Complete Guide For Beginners

Chidera Humphrey — Tue, 25 Apr 2023 19:23:08 +0000

Over the past decade, front-end development has experienced a massive influx of technologies and tools, and frameworks have played a crucial role in shaping how we build UIs and web applications. One such framework that has gained immense popularity is React. Developed by Meta (formerly known as Facebook) in 2013, React is a widely-used JavaScript library for building highly interactive user interfaces and web applications. With React, you can build rich UIs that engage users. In this tutorial, I will guide you through the process of getting started with React.

Table of Contents:

What is React?
Why use React?
React Basics
- How to install React
- JSX
- Components
- Class components
- Functional components
- Props
- State
How to build a simple to-do app

What is React?

React is a JavaScript frontend library for building highly interactive UIs. It was developed by Facebook and is open source, meaning anyone can contribute as long as they follow the guidelines.

Why use React?

React is built on the component architecture, which means that UIs are built from smaller components, making it easy to build UIs. Additionally, React has a shorter learning curve compared to other frontend frameworks. Learning React is almost like working with JavaScript itself. React is also popular in the frontend community, so as a developer, learning React can lead to more opportunities. As a recruiter or HR professional, you can be confident that open React positions will be filled quickly, as there is a large pool of developers to pull from. Lastly, the React ecosystem is vast, and there are many people willing to help you on your journey if you get stuck.

React Basics

How to Install React

To start using React, you need to have Node.js installed on your computer system. To install Node, go to www.nodejs.org and follow the prompts. If you're unsure whether your computer has Node installed, type "node -v" in the terminal. If you have Node installed, you will get the version you have installed. Any error message means that you don’t have it installed.

To get started with React, type npx create-react-app <folder name> in your terminal. After running this command, a React app will be generated for you. When your app has been created, move into the <folder name> you specified when you ran the first command. After moving into the folder, you need to start your app. To start your app, type npm run start in the terminal. You should see something like this on your default web browser:

Yay! You have created your first React app. Now, let's look at the building blocks of React.

JSX

If you look at the JavaScript files, you will see function(s) that return something that looks like HTML. That is called JSX—JavaScript Syntax Extension. You can think of it as HTML-flavored JavaScript.

JSX makes it so much easier to build UI components in React. It is a more convenient way to create DOM elements/nodes. It behaves like HTML but has the capabilities of JavaScript. JSX can also evaluate JavaScript expressions. You just have to wrap them inside curly braces {}. It looks something like this:

Components

Components are the building blocks of UIs in React. There are two types of components in React: class-based components and functional components.

Class-based components were the initial way of creating components in React. They are declared with the class keyword and extend the React component class.
Functional components are a newer and cleaner way of creating React components. Unlike class components, functional components are created as normal JavaScript functions, but with some caveats. Firstly, the function name must start with a capital letter. Secondly, the only parameter it takes is "props" (though it can be destructured). Lastly, it can only return JSX, with a single parent in the case of multiple JSX elements.

Using functional components is much cleaner and easier to read.

Props

Props in React are simply an object that contains all the attributes of a component, just like passing attributes to vanilla HTML elements. However, in React components, the attributes are accessed through the props object, which is read-only and cannot be modified. Props are a way for a parent component to communicate with its child components.

State

State, on the other hand, is any data that can change and be tracked. State is where the data required by a component is stored, and when state changes, the component re-renders. In functional components, you use the useState hook to create state, which returns an array with exactly two values: state and a function to set the state. The state can be of any data type, but usually, developers use arrays or objects. In simpler cases, strings and numbers can be used.

State can be used to store a wide range of data, such as the theme of the website, the current page of the website, and the current user. State and props are what make React a very powerful library.

Now we have learned the building blocks of React, let’s apply our knowledge by building a simple to-do app.

Components of Our To-do App

Our to-do app will have the following capabilities:

Creating a task
Updating a task
Deleting a task
Displaying tasks on the screen

Setting Up the Project

To get started, we need to create a new React project. Open your terminal and create a new folder where your project will live. Navigate to the created folder in your terminal and enter the following command to create a new React project:

npx create-react-app my-to-do-app

This command will create a new React app with the name my-to-do-app.

Once the app is created, navigate into the directory using the following command:

cd my-to-do-app

To start the React development server, enter the following command in your terminal:

npm run start

This command will start a development server for your project. You can now view your app by navigating to http://localhost:3000 in your web browser.

Creating the To-do App

Now that our project is set up, let's create our to-do app. The first step is to clear up the boilerplate code in our App.js file.

In your App.js file, add the following code snippets:

import React from 'react';

function App() {
  return (
    <div>
      <h2>Create a New Task</h2>
      <form>
        <label htmlFor="taskName">Task Name:</label>
        <input type="text" id="taskName" name="taskName" />
        <button type="submit">Add Task</button>
      </form>
    </div>
  );
}

export default App;

This code creates a simple form with an input field and a button. The label element is used to associate the input element with the text Task Name:. The htmlFor attribute of the label element is set to the id of the input element, so when the user clicks on the text Task Name:, the corresponding input element is focused.

Handling User Input

When building a React application, we often need to maintain a state, which is a JavaScript object that stores the data that the component needs to render. In this case, we want to keep track of the tasks that the user adds and display them on the screen.

To create a state in a functional component, we use the useState hook, which is a built-in React hook. The useState hook takes an initial value and returns an array with two elements. The first element is the state itself, and the second element is a function that updates the state.

In our case, we want to create two states. The first state will store the text that the user types into the input field, and the second state will store an array of tasks. Here's how we create these states:

const [taskText, setTaskText] = useState("");
const [tasks, setTasks] = useState([]);

Notice that we're using array destructuring to get the state and the updater function for each state. The initial value for taskText is an empty string, and the initial value for tasks is an empty array.

Now that we have our states, we need to update them when the user interacts with the UI. To do this, we'll use the onChange event on the input field to update the taskText state whenever the user types something:

<input
  type="text"
  value={taskText}
  onChange={(e) => setTaskText(e.target.value)}
/>

Here, we're using the value prop to bind the input field to the taskText state, and the onChange prop to listen for changes to the input field and update the state accordingly.

Next, we'll create a function to add tasks to the tasks state when the user clicks the "Add Task" button:

const handleAddTask = () => {
  setTasks([...tasks, { text: taskText }]);
  setTaskText("");
};

Here, we're using the spread operator (...) to create a new array that includes all the existing tasks as well as a new task object with the text from the taskText state. We're then updating the tasks state with the new array, and resetting the taskText state to an empty string.

Finally, we need to display the tasks on the screen. To do this, we'll use the map method to loop through the tasks array and render a list item for each task:

<ul>
  {tasks.map((task, index) => (
    <li key={index}>
      {task.text}
      <button onClick={() => handleDeleteTask(index)}>Delete</button>
      <button onClick={() => handleEditTask(index)}>Edit</button>
    </li>
  ))}
</ul>

Here, we're using the map method to create a new array of list items (<li> elements) for each task in the tasks array. We're using the key prop to give each list item a unique identifier (in this case, the index of the task in the array). We're also rendering a "Delete" button and an "Edit" button for each task, which will be handled by their respective event handlers.

Let's continue with creating the delete and edit functions.

To add the final touches to our to-do app, we need to implement the functionality for deleting and editing tasks. Let's start with the delete function.

Here's the code for the delete function:

const deleteTask = (taskToDelete) => {
  const updatedTasks = tasks.filter((task) => task !== taskToDelete);
  setTasks(updatedTasks);
};

What we did here is create a function called deleteTask that takes a taskToDelete parameter. Inside the function, we use the filter method to create a new array of tasks that doesn't include the task to delete. We then update our tasks state with this new array.

Now let's move on to the edit function.

Here's the code for the edit function:

const editTask = (taskToEdit, newTask) => {
  const updatedTasks = tasks.map((task) => {
    if (task === taskToEdit) {
      return newTask;
    } else {
      return task;
    }
  });
  setTasks(updatedTasks);
};

Similar to the delete function, we create a function called editTask that takes a taskToEdit parameter and a newTask parameter. Inside the function, we use the map method to create a new array of tasks. We loop through each task, and if the task matches the task to edit, we replace it with the new task. Otherwise, we leave it unchanged. We then update our tasks state with this new array.

With these two functions added, our to-do app is now complete! Here's the final code for our project:

import React, { useState } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");
  const [tasks, setTasks] = useState([]);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleAddTask = () => {
    if (inputValue.trim() !== "") {
      setTasks([...tasks, inputValue]);
      setInputValue("");
    }
  };

  const deleteTask = (taskToDelete) => {
    const updatedTasks = tasks.filter((task) => task !== taskToDelete);
    setTasks(updatedTasks);
  };

  const editTask = (taskToEdit, newTask) => {
    const updatedTasks = tasks.map((task) => {
      if (task === taskToEdit) {
        return newTask;
      } else {
        return task;
      }
    });
    setTasks(updatedTasks);
  };

  return (
    <div>
       <h2>Create a New Task</h2>
      <form>
        <label htmlFor="taskName">Task Name:</label>
        <input type="text" id="taskName" name="taskName" />
        <button type="submit">Add Task</button>
      </form>
      <ul>
        {tasks.map((task) => (
          <li key={task}>
            {task}
            <button onClick={() => deleteTask(task)}>Delete</button>
            <button onClick={() => editTask(task, prompt("Enter new task"))}>
              Edit
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Conclusion

In conclusion, you have learned what React is, the history of React, basics of React, and how to create a simple to-do app with React. This is just the beginning of what you can achieve with React. With practice and more knowledge, you can build more complex and sophisticated web applications using React. I hope you found this tutorial helpful. If you have any questions or feedback, feel free to leave a comment. Good luck with your React journey!

DEV Community: Chidera Humphrey

Understanding this in JavaScript: Guide for Beginners

Introduction

What is this?

Object method

Constructors

Functions

Arrow functions

Event handlers

Explicit binding

call() and apply()

bind()

Conclusion

Additional resources

FAQs

Can I change the value of this?

Can I use this in strict mode?

React Server Components and Server-Side Rendering: Supercharge Your Web Performance

Understanding React Server Components (RSC)

Lightning-Fast Data Retrieval

Seamless Performance

Direct Database Connectivity

Limitations to Keep in Mind

Exploring Server-Side Rendering (SSR)

Rapid Page Loading

A Closer Look at SSR

Comparing RSC and SSR

Conclusion

Is AI a Threat to Frontend Developers?

Why AI Will Not Replace Frontend Developers

How AI Enhances Frontend Development

The Future of AI in Frontend Development

Conclusion

Palindromes in JavaScript - DEV

Table of Contents

Introduction

Prerequisite

What is palindrome

Creating a palindrome checker

Declaring the function

Defining the function parameters

Preparing the string

Reversing the word

Comparing the two strings

Solving real challenges

Sentence palindrome

Problem<> You’re given a sentence. Check whether the sentence is a palindrome or not.

Solution

Word palindrome

Problem

Solution

Longest palindromic substring

Problem

Solution

Conclusion

React Hooks Fundamentals for Beginners: How to Use useState and useEffect hooks 2023

Table of contents

What are react hooks

Managing state with useState hook

Basic applications of useState

Updating a text field

Updating objects and arrays in state

Example of object in state

Example of array in state

Handling side effects with useEffect hook

Making calls to third-party APIs

Interacting with the browser's local storage

Refactoring Class Components to Functional Components with Hooks

Refactoring State Management: From Class Components to Functional Components

Refactoring Data Fetching: From Class Components to Functional Components

Benefits of Using the React hooks

Concluding Thoughts

8 Frontend Development Trends To Watch Out For 2023

Machine learning and AI-powered chatbots

Coding assistants

Voice User Interface (VUI)

Server-side rendering (SSR)

Cloud computing

Progressive Web Apps (PWAs)

Single-page application (SPA)

What is `this`?

`call()` and `apply()`

`bind()`

Can I use `this` in strict mode?

Handling side effects with `useEffect` hook

Use `useMemo` and `useCallback` hooks to improve your app performance

Making a POST request using `fetch` API