Master These 7 JavaScript Concepts Before Learning React

This content originally appeared on Bits and Pieces - Medium and was authored by Diego Abdo

After learning the basics of JavaScript and building a couple of projects it can be tempting to jump straight into the powerful React framework.

React powers some of the largest web applications in the world. It can create extremely complex web apps that are just not possible with vanilla JavaScript.

I know you want to get into React now, but before that, you need to have a solid understanding of these javascript concepts.

React is something that takes time to learn. If you skip these, you’ll find yourself not only trying to learn React but also trying to understand all these things, all at once.

Don’t make it harder for yourself.

Here we’ll look at some javascript concepts that you need to master before learning React. Let’s get started.

Undefined and Null

I see a lot of people using these two interchangeably when they are not the same.

Undefined

Undefined means that a variable has no value assigned.

var variable;
console.log(variable); // This shows undefined

const colors = {
    red: "Red",
    blue: "Blue",
    green: "Green"
}

console.log(colors.yellow) // This shows undefined

Null

Null is a primitive value that you can assign to a variable to represent that the variable has no value.

const variable = null;
console.log(variable); //shows null

Null means something is empty, while undefined means something doesn’t exist.

In React you’ll use null a lot when defining the initial state of something.

Arrow Functions

Arrow functions are a shorter and easier way of writing functions. They function almost exactly like normal functions.

// Normal function
function numbers() {
    console.log("1 2 3");
}

// Arrow function
const numbers = () => {
    console.log("1 2 3");
}

With this syntax the function keyword is no longer needed, instead, we use an arrow.

The empty brackets are where the parameters go. If the function doesn’t have any they still need to be there.

const sum = (a, b) => {
    return a + b;
}

If your function only has one parameter and one line you can skip the parentheses and the return keyword.

const add = num => num + 1;

A big difference between arrow functions and normal functions is that arrow functions can’t be constructed, which means that they can’t be invoked with the new keyword.

// Valid
function sum(a, b) {
    return a + b
}

new sum(5, 10);

// Returns an error
const sum = (a, b) => return a + b;
new sum(5,10);

Also, arrow functions can’t take two or more parameters with the same name, while normal functions can.

You’ll be using these functions a lot when passing callbacks to different components in React.

Promises and Asynchronous Javascript

Promises are a way of handling asynchronous operations in Javascript. An asynchronous operation is an action that takes time to produce some result. This could be fetching data over a network for example.

Constructor syntax for a promise.

const promise = new Promise((resolve, reject) => {
  // execute code
});

The promise constructor takes a callback function which takes two arguments, resolve and reject.

The resolve argument is called when the promise is successful, and reject is called when there is an error with the promise.

The state of a promise will be pending while it is running, then it will change to fulfilled if the promise is successful, and rejected if the promise fails.

const promise = new Promise((resolve, reject) => {
  const a = 5;
  const b = 10;
  
  if (a + b === 15) {
      resolve();
  } else {
      reject();
  }
  
});

In this case, the promise will be resolved.

Then and Catch

This is just the definition, to consume this promise we need to call the then and catch methods on it.

promise
  .then(() => {
      console.log("Success")
  })
  .catch(() => {
      console.log("Error")
  })

The then method is called when the promise is resolved, normally it receives some data.

The catch method is called when the promise is rejected or there is an error in the code execution.

Both of these methods take a callback function as an argument.

Most of the time you’ll not be creating promises yourself, but you will have to consume them often. Especially when it comes to fetching data.

Async / Await

With async and await you can write promises in a much cleaner way. With these keywords, we can write asynchronous code in a synchronous way.

const promise = new Promise((resolve, reject) => {
  const a = 5;
  const b = 10;
  
  if (a + b === 15) {
      resolve();
  } else {
      reject();
  }
  
});

const consumePromise = async () => {
    const result = await promise;
    console.log("Success"); // This line will only be executed if the promise is successful
}

consumePromise();

You can only use await inside an async function. The async keyword also tells the function that a promise will be returned.

One thing missing here is error handling because if the promise were to throw an error the program would crash.

const consumePromise = async () => {
    try {
        const result = await promise;
        console.log("Success"); // This line will only be executed if the promise is successful
    } catch(err) {
        console.log("Error") // This line will run when the promise gets rejected or there is an error
    }
}

consumePromise();

We can use a try catch block to catch any errors that happen in the promise. The catch block will run when the promise gets rejected or has an execution error.

The most important difference between .then and async await is that an async function will pause the function execution until the promise finishes. When using .then the rest of the function will execute while the promise finishes.

Map and Filter Array Functions

When handling data in React you’ll be working a lot with arrays and their methods. These are the ones you’ll encounter the most.

Map

The map method is used to call a function in every element of an array. This method returns a new array and doesn’t change the original one.

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

const newNums = numbers.map((num) => {
    return num + 2;
})

console.log(newNums); // shows [ 3, 4, 5, 6, 7 ]

Here we pass a callback that adds 2 to the current number, this callback function will be called on every element in the array.

Filter

The filter method will filter the elements of an array based on a condition. This method also returns a new array and doesn’t change the original one.

Like map, it takes a callback that will be called on every element in the array. In this case, if the callback function returns true the element will be added to the new array.

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

const newNums = numbers.filter((num) => {
    return num % 2 === 0;
})

console.log(newNums); // shows [ 2, 4 ]

The filter method will return an array with only the even numbers.

There are more methods like reduce , sort , find , etc. You’ll be using some of them constantly and others every now and then.

You’ll be using map a lot to transform data into React components.

ES6 Syntax

ES6 brought a lot of new features to Javascript which makes coding so much easier. Make sure to master these because React uses them extensively.

Destructuring

This is an expression that helps us to unpack values from arrays and objects. We can then save these values to different variables.

const colors = ["red", "blue", "green"]
const [red, blue, green] = colors;

console.log(red, blue, green); // Shows red blue green

We can unpack the elements of an array into individual variables. This way we don’t have to have to individually declare each variable.

const employee = {
    name: "John",
    age: 34,
    country: "Spain"
}

const { name, age, country } = employee;
console.log(name, age, country); // Shows John 34 Spain

It’s the same with objects, the only difference is that here we use curly braces instead of brackets.

This is used all over React, especially when it comes to unpacking values from a hook.

Spread and Rest Operators

These two operators have the same syntax, but they are not the same.

The rest operator combines a group of values into an array.

function person(name, country, age, ...other) {
    console.log("Name: ", name);
    console.log("Country: ", country);
    console.log("Age: ", age);
    console.log("Other: ", other);
}

person("John", "Australia", 34, "Web Developer", "Tall")

// This shows
// Name:  John
// Country:  Australia
// Age:  34
// Other:  [ 'Web Developer', 'Tall' ] 

The last two values that were passed to the function were converted into an array.

The spread operator does exactly the opposite, it expands iterables into single elements.

function person(name, country, age) {
    console.log("Name: ", name);
    console.log("Country: ", country);
    console.log("Age: ", age);
}

const john = ["John", "Australia", 34];

person(...john);

// This shows
// Name:  John
// Country:  Australia
// Age:  34

Here the values inside the array got separated into individual elements. This operator can also be used to copy arrays.

In React this is used a lot to spread arrays of objects in the state.

Command Line Basics

I know this is not related just to JavaScript, but it is still extremely important.

Until this point, you have probably not touched the command line using JavaScript because everything runs in the console. When using React you’ll have to manage and install multiple packages as well as run development environments. This can only be done through the command line.

Here are some basic commands you need to know.

Changing Directories

To navigate between different directories you’ll be using the cd command. To use it you write the command followed by the name of the folder you want to go to.

You can use two dots to go back up one level.

cd folder-name

cd folder-name/sub-folder-name

cd ..

Creating Folders

We use the mkdir command to create a new folder. You can create multiple folders at once.

mkdir components

mkdir assets components pages

Creating Files

To create a file, use the touch command. Like mdkir , you can also create multiple files.

touch file.js

touch file.js file.py

Show Folder Content

To see all the files and folders inside a directory you can use the ls command. If you are using Windows you need to use dir .

ls folder-name

Clear The Terminal

The clear command will clear everything that you wrote in the terminal.

clear

Delete Files

Use the rm command to remove files. Type the command followed by the name of the file to be removed. It can also delete multiple files.

rm file.js

rm file.js file.py

Conclusion

Now you have a list of things to learn before getting into React.

If you have the time, I would also recommend taking a look into the Fetch API, Axios, the ternary operator, and ES6 modules.

Learning React is no easy task, take your time to master these concepts. It’ll make the process a lot easier.

Thank you for reading. Follow me if you want to see more content like this.

Build Apps with reusable components, just like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo

Learn more

• How We Build Micro Frontends
• How we Build a Component Design System
• How to reuse React components across your projects
• 5 Ways to Build a React Monorepo
• How to Create a Composable React App with Bit

Master These 7 JavaScript Concepts Before Learning React was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.

This content originally appeared on Bits and Pieces - Medium and was authored by Diego Abdo

Print Share Comment Cite Upload Translate Updates

APA

Diego Abdo | Sciencx (2023-02-17T13:30:53+00:00) Master These 7 JavaScript Concepts Before Learning React. Retrieved from https://www.scien.cx/2023/02/17/master-these-7-javascript-concepts-before-learning-react/

MLA

" » Master These 7 JavaScript Concepts Before Learning React." Diego Abdo | Sciencx - Friday February 17, 2023, https://www.scien.cx/2023/02/17/master-these-7-javascript-concepts-before-learning-react/

HARVARD

Diego Abdo | Sciencx Friday February 17, 2023 » Master These 7 JavaScript Concepts Before Learning React., viewed ,<https://www.scien.cx/2023/02/17/master-these-7-javascript-concepts-before-learning-react/>

VANCOUVER

Diego Abdo | Sciencx - » Master These 7 JavaScript Concepts Before Learning React. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/02/17/master-these-7-javascript-concepts-before-learning-react/

CHICAGO

" » Master These 7 JavaScript Concepts Before Learning React." Diego Abdo | Sciencx - Accessed . https://www.scien.cx/2023/02/17/master-these-7-javascript-concepts-before-learning-react/

IEEE

" » Master These 7 JavaScript Concepts Before Learning React." Diego Abdo | Sciencx [Online]. Available: https://www.scien.cx/2023/02/17/master-these-7-javascript-concepts-before-learning-react/. [Accessed: ]

rf:citation

» Master These 7 JavaScript Concepts Before Learning React | Diego Abdo | Sciencx | https://www.scien.cx/2023/02/17/master-these-7-javascript-concepts-before-learning-react/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.