Essential JavaScript Concepts You Need to Learn Before React

React is one of the most popular front-end libraries, but to use it effectively, you need a strong foundation in JavaScript. While React simplifies UI development, it heavily relies on modern JavaScript concepts. If you're new to React or struggling with its core principles, this guide will help you master the JavaScript skills you need before diving in.

1. ES6+ Syntax and Features

React code relies heavily on ES6+ (ECMAScript 2015 and beyond), so understanding these features is a must. Here are some key concepts:

Let, Const, and Var

🔹 let and const help in defining block-scoped variables, replacing the old var.
🔹 const prevents reassignment, ensuring immutability where needed.

const name = "React";
let version = 18;
version = 19; // ✅ Allowed with let, but not with const

Template Literals

🔹 Used to create dynamic strings with variables and expressions.

const user = "Sina";
console.log(`Hello, ${user}! Welcome to React.`);

Arrow Functions

🔹 Provides a concise way to write functions and automatically binds this.

const greet = (name) => `Hello, ${name}`;
console.log(greet("React Dev"));

Destructuring Assignment

🔹 Makes it easy to extract values from objects or arrays.

const user = { name: "Pradip", age: 25 };
const { name, age } = user;
console.log(name, age);

Spread & Rest Operators

🔹 Helps in handling arrays and objects more efficiently.

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]

2. Functional Programming in JavaScript

React follows functional programming principles, so mastering these concepts will make your code cleaner and more predictable.

Higher-Order Functions

🔹 Functions that take other functions as arguments or return functions.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

Immutability

🔹 React state should never be modified directly.

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4]; // Correct way to update state

3. Asynchronous JavaScript

React applications often involve fetching data from APIs. Understanding async JavaScript is key.

Promises & Async/Await

🔹 Used for handling asynchronous operations like API calls.

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

4. JavaScript Array Methods

React frequently uses array methods for rendering dynamic lists.

🔹 map() – Used to render lists in React.

const users = ["Alice", "Bob", "Charlie"];
const userList = users.map(user => <li key={user}>{user}</li>);

🔹 filter() – Helps filter out unwanted items.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]

5. The `this` Keyword and Context

React class components rely on this, so understanding its behavior is essential.

🔹 Arrow functions automatically bind this, whereas traditional functions do not.

class User {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const user = new User("Sina");
user.greet(); // "Hello, Sina"

6. Closures and Lexical Scope

Closures allow a function to access variables from its parent scope, even after the parent function has executed. React hooks like useState rely on this concept.

function counter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const increment = counter();
increment(); // 1
increment(); // 2

7. DOM Manipulation vs. Virtual DOM

JavaScript allows direct DOM manipulation with document.querySelector(), but React uses a Virtual DOM for efficiency.

document.getElementById("btn").addEventListener("click", () => {
  console.log("Button clicked!");
});

React replaces this with event handling in JSX:

jsxCopyEdit<button onClick={() => console.log("Button clicked!")}>Click Me</button>

8. Modules and Import/Export

React uses JavaScript modules extensively for structuring applications.

🔹 Exporting a module:

export const greet = (name) => `Hello, ${name}`;

🔹 Importing in another file:

import { greet } from "./greet";
console.log(greet("React Dev"));

9. Error Handling in JavaScript

Handling errors properly prevents React components from crashing unexpectedly.

try {
  throw new Error("Something went wrong!");
} catch (error) {
  console.error(error.message);
}

I've expanded the Fetching and Handling API Data section with more details, explanations, and examples.

10. Fetching and Handling API Data

Fetching data from APIs is a fundamental part of modern web applications, including React-based projects. You need to understand how to retrieve, handle, and display external data asynchronously. There are two common ways to fetch data in JavaScript:

Using the Fetch API (Built-in)
Using Axios (Third-party library)

Let’s explore both in detail.

Using the Fetch API

The fetch() function is built into JavaScript and allows you to make network requests. It returns a Promise that resolves into a Response object.

Basic Fetch Request

Here’s a simple example of fetching posts from a public API:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json()) // Convert response to JSON
  .then(data => console.log(data))   // Log the retrieved data
  .catch(error => console.error("Error fetching data:", error));

Breaking It Down:

fetch(url) - Initiates a network request to the given URL.
.then(response => response.json()) - Converts the response into a JavaScript object.
.then(data => console.log(data)) - Handles the fetched data.
.catch(error => console.error(error)) - Catches and logs any errors (e.g., network failures).

Fetching Data with Async/Await

Using async/await makes asynchronous code cleaner and more readable.

const fetchData = async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

fetchData();

Key Improvements with Async/Await:

✅ Better readability – No nested .then() callbacks.
✅ Error handling with try...catch – Helps catch network issues or API failures.
✅ Handles HTTP errors manually – .ok checks for response status before processing data.

Making a POST Request

When sending data to an API, we use the POST method along with a request body.

const postData = async () => {
  const newPost = {
    title: "Hello World",
    body: "This is a new post.",
    userId: 1,
  };

  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST", // Specify request type
      headers: {
        "Content-Type": "application/json", // Inform API about JSON data
      },
      body: JSON.stringify(newPost), // Convert object to JSON
    });

    const data = await response.json();
    console.log("Post created:", data);
  } catch (error) {
    console.error("Error creating post:", error);
  }
};

postData();

Understanding the Request Options:

method: "POST" – Specifies that this request is a POST request.
headers: { "Content-Type": "application/json" } – Tells the API that we are sending JSON data.
body: JSON.stringify(newPost) – Converts the JavaScript object into a JSON string before sending it.

Using Axios for API Calls

Axios is a third-party library that simplifies API requests and automatically converts responses to JSON.

Installing Axios (if not already installed)

npm install axios

Fetching Data with Axios

import axios from "axios";

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

fetchData();

Why Use Axios?

✔ Automatically parses JSON – No need to call .json().
✔ More readable syntax – Example: axios.get(url) instead of fetch(url).
✔ Handles request errors better – Returns more detailed error messages.

POST Request with Axios

const postData = async () => {
  const newPost = {
    title: "New Post",
    body: "Axios makes API calls easy!",
    userId: 1,
  };

  try {
    const response = await axios.post("https://jsonplaceholder.typicode.com/posts", newPost);
    console.log("Post created:", response.data);
  } catch (error) {
    console.error("Error creating post:", error);
  }
};

postData();

Error Handling in API Calls

APIs are not always reliable. They may return errors due to:

Network issues – Lost internet connection.
Invalid requests – Incorrect API endpoint.
Server errors – API failure (e.g., 500 Internal Server Error).

Handling Errors with Axios

Axios provides a response object with useful error details.

const fetchData = async () => {
  try {
    const response = await axios.get("https://jsonplaceholder.typicode.com/posts/99999");
    console.log(response.data);
  } catch (error) {
    if (error.response) {
      console.error("Server Error:", error.response.status);
    } else if (error.request) {
      console.error("No response received:", error.request);
    } else {
      console.error("Error:", error.message);
    }
  }
};

fetchData();

How This Improves Error Handling:

✔ error.response – Catches server errors (404, 500, etc.).
✔ error.request – Catches issues when there is no response from the server.
✔ General:error.message Catches other errors like incorrect URLs.

Fetching and handling API data efficiently is crucial for React applications. By understanding how to use fetch() and Axios, you can easily integrate data into your applications.

Advanced JavaScript Concepts for API Handling and Beyond

Mastering JavaScript’s core concepts is essential for efficient development, especially in API handling and React applications. Let's dive into some advanced concepts like IIFEs, Currying, Generators, Higher-Order Functions, and Closures.

11. JavaScript IIFEs (Immediately Invoked Function Expressions)

An IIFE is a function that runs immediately after it's defined. It's often used to avoid polluting the global scope.

Example:

(function () {
  console.log("This runs immediately!");
})();

Use Cases:
✅ Prevents global variable pollution
✅ Encapsulates private variables

A practical example for API requests:

(async function fetchData() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("Error:", err);
  }
})();

12. JavaScript Currying

Currying transforms a function with multiple parameters into a sequence of functions, each taking a single argument.

Example:

const multiply = (a) => (b) => a * b;
const double = multiply(2);
console.log(double(5)); // Output: 10

Use Cases:
✅ Improves code reusability
✅ Useful in function composition

A real-world example for dynamic API fetching:

const fetchData = (url) => (endpoint) => fetch(`${url}/${endpoint}`).then(res => res.json());

const getUserData = fetchData("https://jsonplaceholder.typicode.com");
getUserData("users").then(console.log);

13. JavaScript Generators

A generator function allows pausing and resuming execution using yield.

Example:

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numberGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

Use Cases:
✅ Handles asynchronous data fetching efficiently
✅ Useful for paginated API calls

Example for paginated API requests:

function* fetchPages(url, totalPages) {
  for (let i = 1; i <= totalPages; i++) {
    yield fetch(`${url}?page=${i}`).then(res => res.json());
  }
}

const pageFetcher = fetchPages("https://jsonplaceholder.typicode.com/posts", 3);

pageFetcher.next().value.then(console.log);

14. JavaScript High-Order Functions (HOFs)

A higher-order function is a function that takes another function as an argument or returns a function.

Example:

const higherOrder = (fn) => fn(5);
const addOne = (num) => num + 1;

console.log(higherOrder(addOne)); // 6

Common HOFs in JavaScript:

map() → transforms array elements
filter() → filters elements based on a condition
reduce() → accumulates array values

Example for API response filtering:

const fetchAndFilter = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await res.json();
  const filteredUsers = data.filter(user => user.id < 5);
  console.log(filteredUsers);
};

fetchAndFilter();

15. JavaScript Closures

A closure is when an inner function has access to the variables of its outer function even after the outer function has executed.

Example:

function counter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const increment = counter();
increment(); // 1
increment(); // 2

Use Cases:
✅ Data encapsulation
✅ Private variables

Example for API rate limiting:

const rateLimiter = (limit) => {
  let count = 0;
  return () => {
    if (count < limit) {
      console.log("API call allowed");
      count++;
    } else {
      console.log("Rate limit exceeded");
    }
  };
};

const apiRequest = rateLimiter(3);
apiRequest(); // API call allowed
apiRequest(); // API call allowed
apiRequest(); // API call allowed
apiRequest(); // Rate limit exceeded

Conclusion

Understanding these advanced JavaScript concepts helps in:

Writing optimized, scalable code
Enhancing API handling and state management
Building efficient React components

Next, apply these concepts in React’s hooks (useEffect, useCallback, useMemo) for a seamless development experience!

Final Thoughts

Mastering these JavaScript concepts will make your React learning journey much smoother. If you're struggling with React, chances are you need to reinforce your JavaScript fundamentals.

Image Credit: GeeksForGeeks

An Article By: Pradip Timilsina (@sinapradip)

Essential JavaScript Concepts You Need to Learn Before React

Table of contents

1. ES6+ Syntax and Features

Let, Const, and Var

Template Literals

Arrow Functions

Destructuring Assignment

Spread & Rest Operators

2. Functional Programming in JavaScript

Higher-Order Functions

Immutability

3. Asynchronous JavaScript

Promises & Async/Await

4. JavaScript Array Methods

5. The this Keyword and Context

6. Closures and Lexical Scope

7. DOM Manipulation vs. Virtual DOM

8. Modules and Import/Export

9. Error Handling in JavaScript

I've expanded the Fetching and Handling API Data section with more details, explanations, and examples.

10. Fetching and Handling API Data

Using the Fetch API

Basic Fetch Request

Breaking It Down:

Fetching Data with Async/Await

Key Improvements with Async/Await:

Making a POST Request

Understanding the Request Options:

Using Axios for API Calls

Installing Axios (if not already installed)

Fetching Data with Axios

Why Use Axios?

POST Request with Axios

Error Handling in API Calls

Handling Errors with Axios

How This Improves Error Handling:

Advanced JavaScript Concepts for API Handling and Beyond

11. JavaScript IIFEs (Immediately Invoked Function Expressions)

Example:

12. JavaScript Currying

Example:

13. JavaScript Generators

Example:

14. JavaScript High-Order Functions (HOFs)

Example:

15. JavaScript Closures

Example:

Conclusion

Final Thoughts

5. The `this` Keyword and Context