DEV Community: Mark Jaily Peña

All The Javascript Concepts You Need To Know Before Learning React (Part 2)

Mark Jaily Peña — Thu, 04 Jul 2024 10:12:05 +0000

After a short break, thorough understanding, and countless hours of thinking. Here is the continuation of All The Javascript Concepts You Need To Know Before Learning React (Part 1) article I made a while ago. These concepts will act as a bridge towards learning React. Without further ado, let's delve into this article.

6. Understanding DOM

The Document Object Model, or DOM for short, is the representation of a web page. It has a tree-like structure where each node represents an individual HTML element. The DOM can be manipulated using JavaScript to create dynamic content and change or add elements, attributes, and styles. Performance-wise, direct DOM manipulation can be a problem, especially for complex applications, as you need to grab the nodes and apply changes to them manually, and the browser needs to re-render frequently, causing inefficiency and difficulty in managing.

Virtual DOM

React has its own kind of DOM called Virtual DOM, which is a virtual representation of UI that is synced with the "real" DOM. Virtual DOM finds the minimal set of changes needed to update the real DOM. This approach reduces the number of re-renders and improves efficiency.

You don't need to understand everything fully, but this gives you an idea of why React is popular

7. Async Await and Promises

Normally, everything is synchronous when you code in Javascript, meaning the execution is line by line.

let message = "Hello World";
console.log(message);

The first line of code is executed, declaring and initializing the message variable, and when it is done, the next line will print the message in the terminal or console.

But sometimes, there is a need for non-synchronous activity. Fetching from API is a common example of this. Fetching data from API may not always be instantaneous. Factors involving your internet connection, the size of your request, and how far you are from the server come into play.

const picturesOfCats = fetch("https://api.thecatapi.com/v1/images/search?limit=5")
console.log(picturesOfCats);

Also, that is a real API for getting data about cats :> Check out The Cat API. Not sponsored btw.

Here, we are fetching pictures of cats from an API and attempting to print those data. However, we will encounter something strange.

This is the result of console.log(picturesOfCats);. So what is this Promise { <pending> }?

Promises

Promises in JavaScript are objects used to deal with asynchronous operations. They represent a value that may be available now, in the future, or never.

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulate success or failure

  if (success) {
    resolve("The operation was successful!"); // Call resolve if the operation is successful
  } else {
    reject("The operation failed."); // Call reject if the operation fails
  }
});

In this very simplistic example, we have a variable containing a promise.
This Promise will take on a function with two arguments: resolve and reject. And inside the function, we can write logic to define this Promise.

If you are confused, that's okay. Most of the time, we will not create our own promises. We will just use promises that are returned and deal with them.

resolve is a function we call if the promise is successful, while the reject is a function we call if the promise is unsuccessful. But how do we determine what resolve and reject are?

myPromise.then((result) => {
    console.log(result); // Handle the successful result
}).catch((error) => {
    console.error(error); // Handle the error
});

We will use the .then() and .catch() for those. .then() is a function that will be called if we're resolved, and .catch is a function that will be called if we're rejected. If the promise is resolved, we will see "The operation was successful!" that came from the result variable that was passed from the resolve() and if not, we will see "The operation failed." that came from the error variable that was passed from the reject().

When making API requests, we will only use .then() and .catch() most of the time, meaning when the request is made, .then() we will do something, and if there are errors in the request, then we are going to .catch() that errors.

There is also a finally case where it will be called regardless of whether the promise is resolved or rejected.

myPromise.then((result) => {
    console.log(result); // Handle the successful result
}).catch((error) => {
    console.error(error); // Handle the error
}).finally(() => {
    console.log("Promise Finished") // Will be called regardless if resolve or reject
});

Returning to the code that results in Promise { <pending> }. Fetching data from API is asynchronous, but the program is synchronous, so the pending promise is getting printed because the fetch returns a Promise instead of the actual data.

Fetching Data

const fetchCatPictures = () => {
  const picturesOfCats = fetch("https://api.thecatapi.com/v1/images/search?limit=5")
  picturesOfCats
    .then(response => {
      return response.json()
    })
    .then(data => {
      console.log(data); // log the data when the Promise resolves
    })
    .catch(error => {
      console.error("Error fetching data:", error); // handle any errors
    }).finally(() => {
      console.log("This is the end of the request");
    });
};

// Call the function
fetchCatPictures();

Here is an example of fetching data from an API. Here, if the promise is resolved successfully, it returns a Response object. This Response object represents the HTTP response from the server. To extract meaningful data from this response, we need to parse it using the json() method.

Async + Await

There is actually a different approach for fetching and waiting data, which uses async + await, which allows JavaScript to wait for asynchronous operations to complete sequentially.

const fetchCatPictures = async () => {
  try {
    const response = await fetch("https://api.thecatapi.com/v1/images/search?limit=5");
    const data = await response.json();
    console.log(data); // log the data when the Promise resolves
  } catch (error) {
    console.error("Error fetching data:", error); // handle any errors
  } finally {
    console.log("This is the end of the request");
  }
};

// Call the async function
fetchCatPictures();

In this code snippet, we convert the code that uses .then() with async + await. async is used to declare asynchronous functions which return promises. It also allows await keyword to be used inside that function. await is used to pause the execution of an async function until a Promise is settled.

Basically, async is needed to use await. Also, await
waits for the fetch to be done, then we can do something with the data after.

To handle errors when fetching data, we use the try-catch block, and for the .finally(), we just replace it with finally.

In a try-catch block, we basically try some codes, and if there are errors, then those will be caught by the catch.

Both .then() method chaining and async + await are fundamentally the same because async + await is syntactic sugar that simplifies working with promises. This syntax allows for a more synchronous style of writing asynchronous code, which enhances readability. Both approaches are equally valid for handling asynchronous operations in JavaScript.

Other Ways Of Fetching Data From API

There are many ways to fetch data from an API. We can use the fetch() like the codes above or use Javascript libraries such as Axios.

First, you need to install Axios if you haven't already. You can do this using npm or yarn:

npm install axios

or with yarn:

yarn add axios

Make sure you add "type": "module" in your package.json or if you don't have one, you can put .mjs on your file instead of .js.

const axios = require("axios"); // Import Axios (use `import axios from "axios"` if using ES modules)

const fetchCatPictures = async () => {
  try {
    const response = await axios.get("https://api.thecatapi.com/v1/images/search?limit=5");
    console.log("Data fetched successfully:", response.data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

// Call the async function
fetchCatPictures();

Note: The new way of importing in Javascript uses the import keyword, just like in my previous article. But the old way require can still be used. For more info, check out this article.

Also, Axios offers numerous features, including direct access to the data property from the response, which is already parsed as a JSON object. This eliminates the need for manually invoking .json(), making data handling more convenient.

8. Optional Chaining

The optional chaining ?. operator prevents errors when trying to access properties or call methods on null or undefined values. If a reference is null or undefined, the expression will return undefined instead of throwing an error. When used with function calls, it returns undefined if the specified function does not exist.

const student = {
    name: "Mark",
    age: 19,
    address: {
        city: "Davao City",
        country: "Philippines"
    }
}

const studentSchool = student.school?.name;
console.log(studentSchool); // Expected output: undefined 

console.log(student.someNonExistentMethod?.()); // Expected output: undefined

In this example, we are trying to get the values of nonexistent property and method, which will throw an error, but with the optional chaining ?. operator, it will only result in an undefined value.

In React or even plain Javascript, when fetching and dealing with data, sometimes your app can break when you are not specific with the data you are receiving or dealing with. Similarly above, if you are trying to access fields inside objects where those fields don't exist, your application will break.

const fetchData = async () => {
    const data = await fetch("exampleapi.com");
    const name = data.student?.name
}

Here, assuming we are fetching data from an imaginary API, and student property may or may not exist. We can prevent breaking our app by using optional chaining ?. operator. This ensures safely accessing properties and calling methods on objects that may have nullish values.

The optional chaining ?. operator also helps to simplify code because there is no need for verbose conditional checks (if statements or ternary ? operators).

9. Template Literals

Template literals are very useful, especially in React. They are string literals that allow embedded expressions and multiline strings. They are enclosed by backticks instead of single or double quotes, making creating complex strings with dynamic content easier.

It seems I cannot show backticks in this platform as backticks are reserved for markup, but they are usually located below the Esc Key.

const fetchData = async (animalName) => {
    const data = await fetch("exampleapi.com/searchitem=" + animalName);
};

In this simple code snippet, assuming that we can add a search term, we can do something like this where we concatenate the API link with the argument containing our desired animalName using + operator. The API can send back pictures of animals or, in this case, cats.

const fetchData = async (animalName) => {
    const data = await fetch(`exampleapi.com/searchitem=${animalName}`);
};

However, we can also use a template literal by replacing the quotes with backticks and adding ${}. This makes it much more readable and easier to manage, especially when constructing complex strings with dynamic content.

Basically, you can now add Javascript inside your strings :>

I hope you were able to grasp the concepts of both my articles. This article is a little bit shorter than the first, but it still contains important concepts for you to learn. With this, you will have an advantage when transitioning from Javascript to React. Before I conclude this article, I would like to show an inspiring quote from my references.

Sometimes, overpreparing will hold you down and prevent you from actually progressing.

Just learn the essentials and don't delve too deep, as JavaScript and React are two separate coding experiences.

Happy Coding!

I will probably delve into backend soon. Anyways, thanks for reading!

References:
https://www.youtube.com/watch?v=ACaT1Gfhe6I

All The Javascript Concepts You Need To Know Before Learning React (Part 1)

Mark Jaily Peña — Mon, 01 Jul 2024 06:21:47 +0000

Newbie here don't bash :D

Recently, I was sparked with the inspiration to improve my web development skills by learning new technologies, which include React. React is a popular open-source JavaScript library used for building user interfaces.

When exploring new technologies, adequate preparation will ensure smooth sailing and make life much easier. With this, I would like to share Javascript concepts that will help you in your journey towards learning React. You should have at least understood the fundamentals of Javascript before reading this article :>

1. Arrow Functions

When creating functions in Javascript, the keyword function is used, combined with the function name and, optionally, its arguments.

function DoSomething(args) {
    // your code here
}

However, there is another way to create functions without using function.

const DoSomething = (args) => {
    // your code here
}

It is like creating a variable and assigning it to a function. You can choose let instead of const if you want to reassign your variable, but const is more standard.

At first, you may think that you are writing much longer code compared to the default way of creating a function. That was my first thought also, but it is actually helpful when dealing with callbacks, which is a common thing in React. There are some instance where it is actually much concise when using arrow function.

// Using "function" keyword
function add(a, b) {
    return a + b;
};

// Using arrow function
const add = (a, b) => a + b;

When using the arrow function without the curly braces {}, the function implicitly returns the expression directly following the arrow =>.

Exporting Using Arrow Function

Another perk of using the arrow function is that it can export a function in a "concise" way.

// Using "function" keyword
export default function add(a, b) {
    return a + b;
};

You need to use export default keyword to export the function to be used in another file.

// Using arrow function
export const add = (a, b) => a + b;

You can remove default when exporting a function.

Make sure you add "type": "module" in your package.json.

Exporting is important, especially in React, as you will export your components or functions to improve code readability.

export myComponent = () => {
    return <div></div>;
}

In case you are not aware, React uses JSX as its markup syntax which lets you write HTML elements within Javascript.

Above is an example of how to export a component in React.

Anonymous Function

Arrow functions are helpful, especially when using anonymous functions.

<button onClick={() => {
    console.log("Hello World");
}}>
</button>

In normal Javascript, inside the onclick function is your chosen named function. However, in React, you can also utilize anonymous functions, which are commonly used. Anonymous functions, or lambda functions, are functions without function names.

2. Ternary Operator

I know you probably learned about ternary operator ? , but for those who don't know, ternary operator is just a concise version of if-else. It is useful in React for conditionally rendering components and making your code less compact.

let age = 25;
let message = age >= 18 ? "You are an adult" : "You are not yet an adult"; // Output: You are an adult

The ? serves as a conditional trigger: if the condition before ? evaluates to true, the statement immediately before : executes; otherwise, the statement after : executes instead.

const App = () => {
  let isLoggedIn = true;

  return isLoggedIn ? <p>User is logged in</p> : <p>User is not logged in</p>
  // The function returns the first p tag because isLoggin is true
}

In this React example, the function App will conditionally render p tag depending on the value of isLogginIn. The ternary operator ? provides explicit control for both true and false conditions.

3. Short Circuit `&&` and `||`

&& and || are logical operators that play important roles in conditionally rendering components based on certain conditions in React.

let age = 25;
let message = age >= 18 && "You are an adult"; // Output: You are an adult

Here, when age >= 18 is true, "You are an adult" is assigned to the message variable. Otherwise, nothing will be assigned to the message variable.

Basically, the code after && will only work if the condition before && is true. Do this/these if the condition/s is/are satisfied.

const App = () => {
  let isLoggedIn = true;

  return isLoggedIn && <p>User is logged in</p> 
  // The function returns the p tag because isLoggin is true
}

In this React example, if isLoggedIn is true, the p element with the text "User is logged in" will be rendered. If isLoggedIn is false, nothing will be rendered.

const App = () => {
  let message = null;

return <p>{message || "No new messages"}</p>
  // The function returns "No new messages" since message is null 
}

const App = () => {
  let message = "Message received";

return <p>{message || "No new messages"}</p>
  // The function returns "Message received" since message has a truthy value.
}

|| has the unique quality of rendering fallback or default component or element. If message is null (or any falsy value), the text "No new messages" will be rendered. If message has a truthy value, that value will be displayed instead.

Basically, if there is no value, do this/these; if there is a value, use that value.

Here is a vanilla javascript example.

let userInput = ""; // User did not provide any input

// Use the logical || operator to provide a default value
let message = userInput || "Default message";

The && (logical AND) and || (logical OR) operators in JavaScript are called "short-circuit" operators because they evaluate expressions from left to right and stop (short-circuit) as soon as the outcome is determined:

4. Objects

Understanding objects is essential not only in React but in other libraries/frameworks, as well. Objects can be used to store and group data flexibly, and this knowledge will be helpful when dealing with APIs as they rely heavily on objects for configuration, event handling, and data management. Objects follow key-value pair structures, making it easy to access, update, and manage data efficiently.

Destructuring Objects

const person = {
  name: "Makku",
  age: 19,
  isStudent: true,
};

// Accessing object properties without destructuring
const name = person.name;
const age = person.age;
const isStudent = person.isStudent;

Here, we have a person object with keys as the properties and values as their corresponding data. To access the properties of the person object without destructuring, you would need to reference each property by its key individually, which is tiresome.

const person = {
  name: "Makku",
  age: 19,
  isStudent: true,
};

// Destructring an object
const { name, age, isStudent } = person;

Destructuring assigns variables name, age, and isStudent with the corresponding values from the person object. You can then use these variables in your program. Destructuring objects is useful, especially when you're working with props in React.

Defining Objects

const name = "Makku";
const age = 19;
const isStudent = true;

const person = {
  name,
  age,
  isStudent,
};

There are many ways to create objects in Javascript and an example of one is the code snippet above. You can create objects by putting defined variables directly inside the curly braces, creating an object with the keys as the variable names and the values as the data of the referenced variables.

const person = {
  name: "Makku",
  age: 19,
  isStudent: true,
};

const person2 = {...person, name: "Kuma" };

The code block above creates another object with the same properties and values as person, except that the name property is replaced with "Kuma". This is done using the spread operator ..., which allows an iterable (like an array or object) to be expanded into individual elements or properties.

5. `.map` and `.filter` Functions

let names = ["Yldevier", "Precious", "Francis", "Lance", "Adriel", "Karl" ];

Let's say we have an array of names, and we want to add er in the end of each name. We can use the for loop or forEach to do this, but we can also utilize .map, which will make this concise and easy.

The .map function creates a new array by applying a provided callback function to each element of the original array.

let names = ["Yldevier", "Precious", "Francis", "Lance", "Adriel", "Karl" ];

let namesList = names.map((name) => {
  return name + "er";
}); 

/* Output 
[
  "Yldevierer",
  "Preciouser",
  "Franciser",
  "Lanceer",
  "Adrieler",
  "Karler"
]
*/

In this code snippet, the .map function is used on the names array. The .map function iterates over each element (name) in the names array and applies a transformation function name => name + "er".

const App = () => {
    let names = ["Yldevier", "Precious", "Francis", "Lance", "Adriel", "Karl"];

    const NamesList = () => {
      return (
        <div>
          {names.map((name) => (
            <h1>{name}</h1>
          ))}
        </div>
      );
    };
}

In this React example, the .map function is used to iterate over the names array and dynamically generate <h1> elements for each name. This approach leverages JavaScript's array function within JSX to render a list of names as headers <h1> elements inside a React functional component.

On the other hand, the .filter function creates a new array containing all elements of the original array that pass a specified test implemented by a provided callback function.

let names = ["Yldevier", "Precious", "Francis", "Lance", "Adriel", "Karl" ];

let nameList = names.filter((name) => {
    return name.length > 5;
}); // Output: [ "Yldevier", "Precious", "Francis", "Adriel" ]

In this code snippet, we filter the names array and create a new array containing elements with lengths greater than 5.

These functions .map and .filter are fundamental in React for managing dynamic content and efficiently rendering lists based on specific conditions or transformations of data.

This concludes the first part of the discussion, as I want to grasp the next concepts more. The second article will be posted as soon as I am confident about it.

I hope you learn something from this article! Happy Coding!

References:
https://www.youtube.com/watch?v=m55PTVUrlnA