JavaScript Concepts You Should Know Before Learning React and Next.js

We are going to take a look at some of those JavaScript concepts that you must know before learning React. A good understanding of these topics is fundamental in building large scale React applications.

1. JavaScript Basics

React is a JS framework and you'll be using JavaScript extensively in your React code. So, it's a no-brainer that you must be aware of the basic JavaScript concepts.

By basics, I mean things like variables, data types, operators, conditionals, arrays, functions, objects, events, and so on. Having a proper understanding of these concepts is important for you to navigate properly in React, as you'll be using them in every step while building React applications.

So if you are unsure about these things or want to quickly revise everything again, check out some of these free courses or the freeCodeCamp JavaScript curriculum. The MDN docs and JavaScript.info are also helpful quick-search references.

2. The Ternary Operator

Ternary Operator is a short, one-line conditional operator to replace if/else. It's really useful when it comes to quickly checking a condition to render a component, updating state, or displaying some text.

Let's compare how the Ternary Operator works with the If/Else statement:

Copy code
1// Example of Ternary Operator
2condition ? 'True' : 'False'

Copy code
1// Example of If/Else statement
2if(condition) {
3    'True'
4} else {
5    'False'
6}:

You can see for yourself how much cleaner and shorter using the Ternary Operator is than using If/Else. The way it works is that you write a condition, and if the condition is true, your program will execute the statement after ?. If the condition is false, the program will execute the statement after :

3. Destructuring

Destructuring helps us unpack values from arrays and objects and assign them to separate variables in a simple and smooth way. Let's understand it with some code:

Copy code
1// With Destructuring
2const objects = ['table', 'iPhone', 'apple']
3const [furniture, mobile, fruit] = objects
4
5// Without Destructuring
6const furniture = objects[0]
7const mobile = objects[1]
8const fruit = objects[2]

In the above example, Destructuring saved us 3 lines of code and made the code cleaner. Now let's see another example of passing props in React with destructuring:

In the above example, Destructuring saved us 3 lines of code and made the code cleaner. Now let's see another example of passing props in React with destructuring:

Copy code
1// With Destructuring Ex-1
2function Fruit({apple}) {
3    return (
4        <div>
5            This is an {apple}
6        </div>
7    )
8}
9
10// With Destructuring Ex-2
11
12function Fruit(props) {
13    const {apple, iphone, car} = props
14    return (
15        <div>
16            This is an {apple}
17        </div>
18    )
19}
20## 
21// Without Destructuring
22function Fruit(props) {
23    return (
24        <div>
25             This is an {props.apple}
26        </div>
27    )
28}

Notice how you have to use props again and again when you don't use destructuring in your props.

Destructuring makes our code cleaner and saves us from using the keyword props every time you use a prop variable. There's more to destructuring and you will learn those things when you start building apps in JavaScript and React.

4. The Spread operator

The Spread Operator was introduced to JavaScript in ES6. It takes an iterable and expands it into individual elements.

A common use case of the spread operator in React is copying the values of an object into another object during a state update to merge the properties of both objects. Look at the below syntax:

Copy code
1const [person, setPerson] = useState({
2    id: '',
3    name: '',
4    age: ''
5});
6
7 setPerson([
8            ...person,
9            {
10                id:"1",
11                name: "Abhishek",
12                age:"23"
13            }
14        ]);

In the above example, ...person copies all the values of the person object in the new state object which is then further replaced by other custom values with the same properties, which updates the state object.

This was one of the many use cases of the spread operator in React. As your application becomes larger, tools like the spread operator come in handy to handle data in a better and more efficient way.

5. Array methods

Array methods are very common when building a medium to large scale application in React. You will always be using some sort of array method in almost every React app you build.

So, take some time to learn these methods. Some of the methods are extremely common like map(). You use map() every time you fetch data from an external resource to display it on the UI.

There are other methods like filter, reduce, sort, includes, find, forEach, splice, concat, push and pop, shift and unshift and so on.

6. Arrow Functions

Arrow functions allow us to create functions in a simple manner with shorter syntax.

Copy code
1// Regular Functions
2function hello() {
3    return 'hello'
4}
5
6// Arrow Functions
7let hello = () => 'hello'

Both functions in the above code snippet work the same, but you can see that the arrow function is much cleaner and shorter. The empty () in the above syntax are for arguments. Even if there are no arguments, these brackets should be present.

However, you can skip these brackets if there is only one argument present in the function, like this:

Copy code
1let square = num => num * num

In one-liner arrow functions, you can skip the return statement. You can also declare a multiline arrow function by using curly braces {} similar to regular functions.

Copy code
1let square = num => {
2    return num * num
3}

7. Promises

You use promises to handle asynchronous operations in modern JavaScript. Once you create a promise in JavaScript, it can either succeed or fail – known as being resolved or rejected in JavaScript terminology.

Promises in JavaScript, in some way, can also be compared to the promises we humans make. Just like human promises are driven by the future implementation of a certain action, promises in JavaScript are about the future implementation of the code, resulting in either it being resolved or rejected.

There are 3 states of a promise:

1. Pending – When the final result of the promise is yet to be determined.
2. Resolved – When the promise is successfully resolved
3. Rejected – When the promise is rejected.

Once a promise is successfully resolved or rejected, you can use a .then() or **.catch() ** method on it.

• The .then() method is called when a promise is either resolved or rejected. It takes 2 callback functions as arguments. The first one is executed when the promise is resolved and the result is received, and the second one is an optional argument in case the promise is rejected.
• The .catch() method is used as an error handler and is called when the promise is rejected or has an error in execution.

Enough theory, let's end this section with an example of a promise, including the usage of the .then() and .catch() methods:

Copy code
1let promise = new Promise((resolve, reject) => {
2  const i = "Promise";
3  i === "Promise" ? resolve() : reject(); // Checkout the above Ternary Operator section to better understand the syntax
4  }
5);
6
7promise.
8    then(() => {
9        console.log('Your promise is resolved');
10    }).
11    catch(() => {
12        console.log('Your promise is rejected');
13    });

8. The Fetch API

The Fetch API allows us to make async requests to web servers from the browser. It returns a promise every time a request is made which is then further used to retrieve the response of the request.

A basic fetch() takes one argument, the URL of the resource you want to fetch. It then returns another promise that resolves with a Response object. This Response object is the representation of the HTTP response.

So, to get the JSON content from this promise, you have to use the .json() method on the Response object. This at last will return a promise that resolves with the result of the parsed JSON data from the response body.

It might be a little confusing, so pay close attention to the example below:

Copy code
1fetch('http://example.com/books.json') // fetching the resource URL
2  .then(response => response.json()); // calling .json() method on the promise
3  .then(data => setState(data)); // updating the state with the JSON data

9. Async/Await

Async/Await functionality provides a better and cleaner way to deal with Promises. JavaScript is synchronous in nature and async/await helps us write promise-based functions in such a way as if they were synchronous by stopping the execution of further code until the promise is resolved or rejected.

To make it work, you have to first use the async keyword before declaring a function. For example, async function promise() {}. Putting async before a function means that the function will always return a promise.

Inside an async function, you can use the keyword await to suspend further execution of code until that promise is resolved or rejected. You can use await only inside of an async function.

Now, let's quickly finish off this section with an example:

Copy code
1async function asyncFunction() {
2    let promise = new Promise(resolve => {
3        resolve();
4    });
5    let response = await promise; // further execution will be stopped until the promise is resolved or rejected
6    return console.log(response);
7}

10. ES modules and Import/Export

Modules were introduced in JavaScript in ES6. Each file is a module of its own. You can carry out objects, variables, arrays, functions, and so on from one file and use them in another. This is referred to as importing and exporting modules.

In React, we use the ES6 modules to create separate files for components. Each component is exported out of its module and imported to the file where it is to be rendered. Let's learn this with an example:

Copy code
1function Component() {
2    return(
3        <div>This is a component</div>
4    )
5}
6
7export default Component

Copy code
1import Component from './Component'
2
3function App() {
4    return (
5        <Component />
6    )
7}

In React, you have to render every component you declare in the App.js component.

In the above example, we created a component called Component and exported it with our code export default Component. Next, we go to App.js and import the Component with the following code: import Component from './Component'.

Conclusion

You've reached the end of the article! So far we have covered JavaScript basics including the Ternary Operator, Destructuring, Spread Operator, Array methods, Arrow functions, Promises, Fetch API, Async/Await, and ES6 Modules and Import/Export.

I hope you have learned a lot from this article and and understand some of the important JavaScript concepts and why you need to learn them thoroughly before jumping into React.