Forem: Sephjoe

Step-by-Step Tutorial: Create a React Vite Project in 7 Easy Steps

Sephjoe — Thu, 18 Jul 2024 09:15:22 +0000

Introduction

In the past, Create React App was the go-to tool for building React applications. However, it had a major drawback: it significantly slowed down the build and development time, making it take longer to develop the server or reflect file changes.

This issue is now a thing of the past. Thanks to Vite, you can easily set up your React application and reduce the wait time for your file changes to be updated.

Vite , pronounced as "Veet," is a faster and lightweight way to easily build up your React applications. It was introduced in 2020 by the Vue.js creator, Evan You.

In this article, you would learn how to setup your React Application and start your development server.

Prerequisites

Ensure you have Node.Js installed on your system, if you don't, visit Node.Js official website to install the package.
A basic knowledge on how to use the terminal.
A Code editor or IDE (prefferably VS code for this tutorial).

Steps for Setting up a React project with Vite

Create a New Folder

Navigate to File Explorer or Finder if you are on a Mac, and create a new folder. Then, open that folder in your text editor. In this tutorial, we will be using VS Code as our text editor.
Create a New React Vite Project

Open your terminal and type the following command prompt to create a new React Vite Project.
```
npm create vite@latest <project-name>
```
In the above example, The "<project name>" is important because it will be the directory name where Vite sets up your project structure. You can use any name of your choice. In this tutorial, we will use "React-Project".
Select your Framework

You'll be presented with a list of frameworks. Use the arrow keys to navigate and select React.
Select your Variant

Choose the language or transpiler of your choice. In this tutorial, we're using JavaScript.

After running this command successfully, you should have a project structure containing all your files and resources, the project structure should look like this.

5 Change Directory into Your Folder

Run the next command to change the directory into the folder we created, "React-app".

 cd "React-Project"

6 Install Dependencies

Run the following command to install your project dependencies.

npm install

7 Start Project

To view your website live in your browser, enter the following command.

  npm run dev

Next, you will receive a link like this http://localhost:5173 with a default port of 5173 . Click on the link to view your application in your browser. You should see a display like the one below.

Conclusion

In this article, you successfully learned how to set up a new React project with Vite. Vite provides a faster way of setting up your development environment compared to Create-React-App. I hope you build more React apps with Vite in the future. Happy coding!

JavaScript Loops for Beginners: Learn the Basics

Sephjoe — Wed, 17 Jul 2024 18:44:03 +0000

It's a gloomy Monday, and you are at work. We all know how depressing Mondays can be, right? Your boss approaches you and says, "Hey, I have 300 unopened emails we've received over the weekend. I want you to open each one, write down the sender's name, and delete the emails once you're done."

This task looks very tiring if you try to do it manually. The next thing on your mind is probably to get on Google and look for software that can automate this process and make your life easier, right?

Well, we have similar situations in programming. There are times when you need to perform repeated tasks until they're done. How do you solve this issue? In JavaScript, we have what we refer to as loops. Loops allow us to solve repeated tasks by reducing the amount of code needed to complete the task.

In this article, we'll discuss what a loop is, how it works, and the various methods we can use to apply it in our programs.

What is a loop?

Loops are used in JavaScript to perform repeated actions easily. They are based on a condition that returns true or false.

A condition is an expression that must be passed to keep a loop running. A loop runs when the specified conditions returns a true value and stops when they return a false value.

When do you need to use a loop?

Loops are useful for carrying out repetitive tasks. For example, using a loop shortens the code needed to solve a problem. It saves time, optimizes memory usage, and improves flexibility.

A loop true significance extends beyond reducing code length and limiting repetition. They also help when working with data in an array, object, or other structures. Moreover, loops promote code modularity by reducing repetitive code and increasing code reusability, which makes it possible to create codes that can be used within different parts of your project.

Types of loops

There are two major categories of loops: entry-controlled loops and exit-controlled loops.

Entry-controlled loops evaluate the condition at the "entrance of the loop" before executing the loop's body. If the condition is true, the body runs. If not, the body doesn't run. The for and while loops are examples of entry-controlled loops.

Exit-controlled loops focus on the loop's body over the test condition, ensuring that the loop's body is executed at least once before evaluating the test condition. A good example of an Exit-controlled loop is the do-while loop.

Let's examine some examples of entry-controlled loops:

while Loop

A while loop has the following syntax.

while (condition) {
  //  loop's body
}

The following list explains the functionality of a while loop:

The while loop takes a test condition inside parentheses.
The program checks the condition to see whether it passes or fails.
The code within the loop's body executes as long as the condition is passed.
The program terminates its operation once the test condition fails.

Below, let's take a practical example on the while loop:


let arr = [];
let i = 1;
let number = 5;

while (i <= number) {
arr.push(i)
i++
}

console.log(arr)

The code snippet above initializes the "arr", "i", and "num" variables.
The "arr" variable is an array that holds the values that pass the test condition.
The "i" variable keeps track of each increment after each iteration.
The "number" variable compares the value of "i" to it value (5) after each iteration.
The code within the loop's body pushes each value of "i" after each iteration into the array as long as "i" is less than or equal to "number".
Once the current value of "i" fails the condition, in this case, where the value of "i" is greater than "number" which is 6, the loop stops running.

The push() method is a built-in JavaScript function that adds a new item to the end of an array.

Output

[1, 2, 3, 4, 5]

do-while Loop

A do-whileloop closely resembles the while loop; the main difference between the while and the do-whileloop is that the do-while loop ensures code execution at least once before evaluating the loop's condition, the do-while loop has the following syntax below.

do {
  // loop's body
}
while (//condition)

The do-while is an excellent example of an exit-controlled loop. This lies in the fact that exit-controlled loops give priority to the loop's body before the test condition, now let's delve into a practical code example utilizing the do-while loop.

Example:

let i = 1;
let num = 5;

do {
  console.log(i);
  i++;
} while (i <= num);

Now let's break down this code snippet:

We initialized the "i" and "num" variables.
The console logs in the value of "i" (1) before evaluating the loop's condition.
The condition is checked, and the value of "i" increments with +1 after each iteration.
The loop ends its operation once "i" is greater than "num".

Output

Although the do-while loop is very much similar to the while loop, there are subtle differences we must note, let’s take another example that compares the difference between the while and do-while loop.


let i = 5;
let num = 4

while( i < num)
{
  console.log(i)
}

This while loop above won't return any result to the console, now why is this so?

We initialized the "i" and "num" variables with values of 5 and 4, respectively.
The condition checks if the value of "i" is less than "num".
If true, it logs in each respective value.
Since the initial value of "i" exceeds that of "num", the loop never runs.

now let's take a similar example with the do-while loop.

let i = 5;
let num = 4;

do {
  console.log(i)
}
while ( i < num)

Output

The do-while loop ensures the execution of the code block, which returns 5 into the console, although "i" has a higher value than "num" initially, it's still logged in the console once. This representation shows you the difference in functionality between the do-while and while loop.

For loop

The for loop is a unique type of loop and one of the most commonly used loop by programmers, the for loop is a loop that runs a code block for a specific number of time depending on a condition. The for loop has the following syntax below.

for (Expression1...; Expression2....; Expression3...{
     //code block
}

Expression1: This part of a for loop is also known as the initialization area, it's the beginning of our for loop and the area where the counter variable is defined; the counter variable is used to track the number of times the loop runs and store that as a value.

Expression2: This is the second part of the loop, this part defines the conditional statement that would execute the loop.

Expression3: This is where the loop ends; the counter variable in this section updates its value after each iteration either by increasing or decreasing the value as specified in the condition.

Let's dive into an example using the for loop.

for (let i = 0; i < 100; i++) {
    console.log("Hello World" )
}

From the code snippet above, let's break it down together.

First, we've initialized the counter variable "i" with a value of zero.
Next, we've created the conditional statement that would keep the code running.
We compared the value of "i" with 100, if it passes this test, "Hello World" is logged.
This process repeats while the counter increases with +1 after each iteration.
The loop ends once the counter's value reaches 100.

Output

Hello World
Hello World
Hello World

...

//repeated 97 more times making it 100 "Hello World" in total
...

for-each loop

The for-each loop is a method in JavaScript that travels through an array and applies a callback function on each element in that array; a callback function is simply another function passed as a parameter into a function, the callback function works by running sequentially after the main function is done executing.

Let's examine the basic syntax of a for-each loop.


array.forEach(function(currentValue, index, arr))

The provided code above explains the workings of a for-each loop.

This loop accepts three parameters, which are the current value, an index, and an array.
The current value represents the present value of the element in the array.
The index is an optional parameter that tells you the numbered position of the current element in that array.
The arr is another optional parameter that tells you what array the element belongs to.


let myArray = [1, 2, 3, 4, 5];

array.forEach((num, index, arr) => {
  arr[index] = num * 2;

  console.log(array);
});

Let's break down the example above:

We initialized an array with the variable name "myArray" and stored it with integers ranging from 1 to 5.
The for-each array method takes three parameters and applies a callback function on the array.
This line; arr[index] = num * 2 multiplies the value of the current element by 2 and assigns the returned value to the current element's index.

Take note, the for-each array method does not return a new array; rather, it modifies the original array and returns it.

Output

[2, 4, 6, 8, 10]

What are for... in and for... of loops in JavaScript?

The for... in and for... of loops are very useful when it comes to iterating over iterable objects, iterable objects refers to any element that is capable of being looped over, common examples of iterables objects are arrays, strings, sets, etc.

The for... in and for... of are similar in how they iterate/move through objects, the main difference between them is shown on how they return values.

for... in loops

A for... in loop is useful when you need to extract the key(s)/properties from an object and it corresponding properties from the parent object, the for... in loop at times might iterate through an object in a manner that is different from the way it was defined in that particular object, let's take an example of a for... in loop in action.

let namesArray = [];

const studentScores = {
John: 60,
Dan: 53,
Tricia: 73,
Jamal: 45,
Jane: 52
}

for(const name in studentScores){
  namesArray.push(name);
}

console.log(namesArray);

In the example above, we have defined an object named studentScores that contains several student names and their corresponding scores, by using for... in, we were able to retrieve only the names of the students, which represent the keys of the object studentScores, and store them in an array by using the push() method.

Output


["John", "Dan", "Tricia", "Jamal", "Jane"]

for... of loops

The for... of loop is a special type of loop that iterates over the values of iterable objects such as arrays, strings, maps, e.t.c., for... of loops does not concern itself with the keys or properties of an object, rather it shows priorities on the values only, the for... of loop is unable to iterate over regular objects and will throw an error since they are not iterable. Let's take an example using the for.. of loop.

let numArray = [1,2,3,4,5]

for (const value of numArray) {
    console.log(value)
}

// Output = 1,2,3,4,5
In summary, the for... in and for... of loops are great way to loop through iterable objects, the main difference is a for... in loop returns the key of an Object while the for... of loop returns only the values of iterable objects.

What is an infinite loop and how can we avoid it?

An infinite loop refers to a loop that continues to run indefinitely; this occurs when a loop has no defined exit condition. Infinite loops are dangerous because they can crash your browser and lead to unwanted actions in your program.

// infinite loop sample
while (true) {
console.log("keep on running")
}
To prevent infinite loops in your program, always ensure that there is an exit condition defined within your loop.

Conclusion

Thank you very much for getting to the end of this article, loops in Javascript are important concept every developer needs to master as it is very valuable to creating a good and optimizable program, I believe with this article you would be able to understand the basics and intricacies of using loops in your program.