7 JavaScript Concepts You Should Know Before Learning React

Maybe you don't know, but I'm someone who believes in building strong foundations. And, as we all know, ReactJS is a powerful JavaScript framework. But some developers tend to dive straight into it without grasping the basics. Huge mistake. That's why in this article, I'll cover some essential JavaScript concepts that will give you a strong foundation for learning and mastering React. Let's get started.

Destructuring

Destructuring allows you to extract values from arrays and objects and assign them to variables. In React, you'll often see destructuring used to extract properties from props and state. Here's an example:

const MyComponent = ({ name, age }) => {
  return (
 
        My name is {name}, and I am {age} years old.
 
  );
};

Spread Operators

As the name said it, they allow you to spread the elements of an array or object into a new array or object. Like this:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

Arrow Functions

One of my favorite concepts in JavaScript ES6. It provides a concise syntax for writing functions in JavaScript. They're commonly used in React to define event handlers and component methods.

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };
 
  return (
 
        Click me
 
  );
};

Immutability

Immutability is a critical concept to understand when working with React. The goal is that we want to avoid directly mutating the state object, instead creating new copies of it with updated values. That way, React's internal state management and rendering mechanisms work correctly:

const [counter, setCounter] = useState(0);
 
const incrementCounter = () => {
  setCounter(prevCounter => prevCounter + 1);
};

Let me explain the code above: I'm using the useState hook in React to create a new counter state variable. I'm also using the setCounter function to update the counter value, but I'm doing so immutably by passing a function to the setCounter function that returns a new value based on the previous value.

Higher-Order Functions

Higher-order functions are functions that either take other functions as arguments or return functions. They're commonly used in React to provide reusable logic and to create custom hooks:

const withLogger = (WrappedComponent) => {
  return function(props) {
    console.log('Rendered: ', WrappedComponent.name);
    return ;
  };
};
 

Here the higher-order function is withLogger that takes a WrappedComponent as an argument. The withLogger function returns a new function that logs the name of the WrappedComponent and passes its props down to it.

Promises and Async/Await

They are essential concepts in modern JavaScript and are commonly used in React to handle asynchronous operations like fetching data from an API. Here's an example:

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

Modules and Imports/Exports

Modules are a way to organize code in JavaScript, separating it into different files or modules. Imports and exports are used to share code between modules. Check the following example: I'm defining a module called utils.js that exports a function called add. Then importing the add function into a different module, app.js, using the import statement.

// utils.js
export const add = (a, b) => a + b;
 
// app.js
import { add } from './utils';
console.log(add(1, 2)); // 3

That's it! Now go ahead and start learning those concepts if you didn't do it yet!