<h2 id="introduction">Introduction</h2>
JavaScript supports a variety of data types such as strings, numbers, floats, etc. A string is a collection of characters such as &quot;John Doe&quot;. Typically, you create them by enclosing characters in double or single quotes. Alternatively, you can make a string by using the <code>new String()</code> constructor:
<pre><code class="hljs">let myString = &#x27;John Doe&#x27;;
let myString2 = new String(&quot;John Doe&quot;);
</code></pre>
<blockquote>
When performing specific operations, you may face a situation that demands you to verify that a specific variable is a string before processing it - lest an error be thrown. We'll cover that situation in this article! First, we'll take a look at how to check if a particular variable is a string in JavaScript and then show you an alternative approach that uses the Lodash library.
</blockquote>
<h2 id="standardsolutionusingtypeofoperator">Standard Solution - Using typeof Operator</h2>
In JavaScript, the <code>typeof</code> operator is the most used method to check the type of any variable. Alternatively, you can use the <code>typeof()</code> method:
<pre><code class="hljs">let myString = &#x27;John Doe&#x27;;

typeof myString; // string
typeof(myString); // string
</code></pre>
If used with a string, the <code>typeof</code> operator returns <code>&quot;string&quot;</code>. Let's create a simple example to confirm this:
<pre><code class="hljs">let myString = &quot;John Doe&quot;;

if (typeof myString === &quot;string&quot;) {
 console.log(&quot;This variable is a string&quot;);
} else {
 console.log(&quot;This variable is not a string&quot;);
}
</code></pre>
Indeed, the <code>myString</code> is a string:
<pre><code class="hljs">This variable is a string
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Even if the variable contains a number that is wrapped in single/double quotes, it still would be considered a string.

 </div>
 </div>
 </div>
 One interesting problem with the <code>typeof</code> operator is that it doesn't recognize strings created using the <code>new String()</code> constructor. The <code>new</code> keyword creates a new JavaScript object that is the instance of the <code>String</code> type. Therefore, the <code>typeof</code> operator won't correctly recognize strings created using the <code>new String()</code> constructor:
<pre><code class="hljs">let myString = new String(&#x27;John Doe&#x27;);

console.log(typeof myString); // &quot;object&quot;
</code></pre>
In this case, instead of the <code>typeof</code> operator, we need to use the <code>instanceof</code> operator - it can detect that the object created with the <code>new String()</code> constructor is the instance of the <code>String</code> type:
<pre><code class="hljs">let myString = new String(&quot;John Doe&quot;);

if (myString instanceof String) {
 console.log(&quot;This variable is a string&quot;);
} else {
 console.log(&quot;This variable is not a string&quot;);
}
</code></pre>
Since the <code>myString</code> is a string, this code will produce the following output:
<pre><code class="hljs">This variable is a string
</code></pre>
<h2 id="usinglodashlibrary">Using Lodash Library</h2>
If you're already using the Lodash library in your project, there's no harm in using it for checking whether a variable is a string or not! It's absolutely not necessary to have a dependency if we don't need Lodash for something else, but, if we already have that dependency, we can make use of the <a rel="nofollow noopener noreferrer" target="_blank" href="https://underscorejs.org/#isString"><code>_.isString()</code></a> method, which returns <code>true</code> if the specified value is a string primitive or a <code>String</code> object, making it fit for both explicitly and implicitly created strings:
<pre><code class="hljs">let myString = new String(&quot;John Doe&quot;);

if (_.isString(myString)) {
 console.log(&quot;This variable is a string&quot;);
} else {
 console.log(&quot;This variable is not a string&quot;);
}
</code></pre>
Output:
<pre><code class="hljs">This variable is a string
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we've learned how to check if a variable is a string in JavaScript. Also, we've learned how this works with an external library like Lodash.

Dimitrije Stamenic

Joel Olawanle

In this tutorial, learn how to check whether a variable is a string or not in JavaScript - both for implicitly and explicitly created Strings, with or without the new keyword, as well as with Lodash.

JavaScript: Check if Variable Is a String

<h2 id="introduction">Introduction</h2>
An array is used to store an ordered collection of values. These values could be a combination of either the same data type or numerous data types - integers, floats, strings, boolean, objects, and lots more.
Getting the number of elements in an array with JavaScript is a common operation when consuming data or working with APIs in JavaScript. This can be accomplished either by utilizing the <code>length</code> property or iterating through an array and counting the elements.
<blockquote>
In this article, we will learn how to get the number of elements in an array with JavaScript and much more - how to count unique elements and how to count elements of an array based on certain conditions.
</blockquote>
<h2 id="usingthebuiltinlengthproperty">Using the Built-in length Property</h2>
The standard way to get the total number of elements in an array is to use the built-in <code>length</code> property:
<pre><code class="hljs">let myArray = [99, 101.5, &quot;John Doe&quot;, true, { age: 44 }];
let total = myArray.length;
console.log(total); // Output: 5

// Alternatevly:
let total = [99, 101.5, &quot;John Doe&quot;, true, { age: 44 }].length;
console.log(total); // Output: 5
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: <code>length</code> refers to a cached value of the length of the array, computed when the array is being created. Therefore, you don't iterate the array by calling <code>length</code> explicitly, nor implicitly. This ensures that <code>length</code> scales up to an arbitrary level and doesn't impact the performance of your application, such as the impact you'd feel when manually looping through.

 </div>
 </div>
 </div>
 <h2 id="usingloopsinjavascript">Using Loops in JavaScript</h2>
JavaScript loops can also be used to count the length of an array by iterating through the array and incrementing the counter variable by one for each element in the array. This is mostly used when you want to perform certain operations on the elements themselves or on a particular element since we are iterating through all the elements in the array.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: This approach harder compared to the previously described <code>length</code> property, though, it's pretty simple in and of itself. It's worth noting that longer arrays take longer to iterate through, while <code>length</code> returns the cached value with a constant lookup time.

 </div>
 </div>
 </div>
 <h3 id="forloop">for Loop</h3>
<pre><code class="hljs">let myArray = [99, 101.5, &quot;John Doe&quot;, true, { age: 44 }];

// Counter variable
let total = 0;

for (let i = 0; i &lt; myArray.length; i++) {
 total++;
}

console.log(total); // Output: 5
</code></pre>
<h3 id="forinloop">for...in Loop</h3>
<pre><code class="hljs">let myArray = [99, 101.5, &quot;John Doe&quot;, true, { age: 44 }];

let total = 0;
for (i in myArray) {
 total++;
}

console.log(total); // Output: 5
</code></pre>
<h2 id="getthenumberofuniqueelementsinanarray">Get the Number of Unique Elements in an Array</h2>
Arrays in JavaScript can have multiple elements of different data types and these elements could include some duplicates. If we want to get the number of unique elements we can use the <code>Set()</code>constructor.
It creates a set out of the array passed as its argument. Therefore it helps us remove duplicates and returns only unique elements (a set is a collection of unique elements). When duplicates are removed, we can use the <code>length</code> property to get the number of unique elements.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Hint: If you want to learn more about how to remove duplicates from an array in JavaScript, you should read <a target="_blank" href="https://stackabuse.com/how-to-remove-duplicates-from-an-array-in-javascript/">How to Remove Duplicates From an Array in JavaScript</a>!

 </div>
 </div>
 </div>
 For example, suppose we have an array of names that has a total of 7 elements, among which 6 are unique. We can get the unique elements first and then make use of the <code>length</code> property to get the length:
<pre><code class="hljs">let names = [&quot;John&quot;, &quot;Dan&quot;, &quot;Jane&quot;, &quot;Sam&quot;, &quot;Alisa&quot;, &quot;John&quot;, &quot;Pete&quot;];
let uniqueNames = [...new Set(names)];
let totalPeople = uniqueNames.length;

console.log(totalPeople); // Output: 6
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: This can also work with loops. After we get the unique elements stored in a new array, all we have to do is to loop it through and count elements as we've done earlier.

 </div>
 </div>
 </div>
 <h2 id="whatifanarraycontainsotherarraysaselements">What If an Array Contains Other Arrays as Elements?</h2>
As we've stated before, arrays in JavaScript can contain elements of many data types - including an <code>Array</code> data type. This may be a bit confusing at first, but when you get a grasp on how <code>length</code> property counts those subarrays, you are going to be able to handle this situation without any problems.
The first method that probably goes to mind is to use the <code>length</code> property:
<pre><code class="hljs">let myArray = [[&quot;John&quot;, &quot;Pete&quot;], [90, 2], [], [34, 45, 2], [9,4], &quot;John Doe&quot;, true, [19]];
let total = myArray.length;

console.log(total); // Output: 8
</code></pre>
Note how the <code>length</code> property treats each subarray as one element. It doesn't consider the contents of subarrays - no matter if it's empty or it has a large number of elements, it is counted as one element of the original array (in this case, <code>myArray</code>).
<h3 id="getthenumberofelementsinanarraycontainingotherarrays">Get the Number of Elements in an Array Containing Other Arrays</h3>
Let's now learn how to count the number of all elements in an array - including those elements inside subarray elements. We can use a couple of approaches, such as a <code>for</code> loop or a <code>for...in</code>, etc.
We'll first initialize the <code>totalLength</code> to 0, then create a function (<code>myLength()</code>) which will be used to loop through the array and count the number of its elements. First of all, we need to loop through the original array and consider each of its elements. If the element is not an array, we'll just increase the <code>totalLength</code> by 1. On the other hand, if the current element is an array (subarray of the original array), we'll recursively call the <code>myLength</code> method to calculate the number of its elements:
<pre><code class="hljs">let myArray = [[&quot;John&quot;, &quot;Pete&quot;], [90, 2], [], [34, 45, 2], [9,4], &quot;John Doe&quot;, true, [19]];

let totalLength = 0;
const myLength = (array) =&gt; {
 // For each element of the `myArray`
 for (let i in array) {
 // If the element is an array
 // recursively call `myLength` to calculate
 // the length of the current element
 // Otherwise, just increment the `totalLength`
 if (Array.isArray(array[i])) {
 myLength(array[i]);
 } else {
 totalLength++;
 }
 }
};

myLength(myArray);
console.log(totalLength); // Output: 12
</code></pre>
Alternatively, you can simply call the <code>flat()</code> method on <code>myArray</code>, which flattens it by recursively concatenating all of the elements into a 1D array, and then call <code>length</code> on the new array:
<pre><code class="hljs">console.log(myArray.flat().length) // Output: 12
</code></pre>
<h2 id="countbasedonconditions">Count Based on Conditions</h2>
Like we've mentioned earlier, we can also count the number of elements in an array based on certain conditions. For example, suppose we have an array of students which consists of objects, each object containing students name and score:
<pre><code class="hljs">const students = [
 { name: &quot;John Doe&quot;, score: 70 },
 { name: &quot;Jane Doe&quot;, score: 40 },
 { name: &quot;Sarah Jane&quot;, score: 33 },
 { name: &quot;John Tough&quot;, score: 84 },
 { name: &quot;Jabes Tough&quot;, score: 64 }
];
</code></pre>
We can count the total number of students that score above 60, by looping through each element and counting ones that passed the predefined condition:
<pre><code class="hljs">let total = 0;

students.forEach((student) =&gt; {
 if (student.score &gt;= 60) {
 total++;
 }
});

console.log(total); // Output: 3
</code></pre>
This would also work for other iteration methods like the <code>for</code> loop:
<pre><code class="hljs">let total = 0;

for (let i = 0; i &lt; students.length; i++) {
 if (students[i].score &gt;= 60) {
 total++;
 }
}

console.log(total); // Output: 3
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we learned how to get the number of elements in an array and we saw various scenarios that could warrant us getting the length of an array and how we could achieve each of them.

In this tutorial, learn how to get the number of elements in a JavaScript array/list, using the length property, a manual for loop with a counter, how to count elements of nested arrays by flattening arrays and manually counting through, etc. with practical code examples.

JavaScript: How to Get the Number of Elements in an Array

<h2 id="introduction">Introduction</h2>
When consuming APIs or retrieving data from an array, you may encounter data that repeats itself, but you only want to select the unique values.
For example, assume you have an array representing a restaurant menu, as shown below. You might need to retrieve available categories from that array - in that case, you would need to filter through the array to get the categories only once, avoiding duplicates:
<pre><code class="hljs">const menu = [
 {
 name: &quot;buttermilk pancakes&quot;,
 category: &quot;breakfast&quot;
 },
 {
 name: &quot;diner double&quot;,
 category: &quot;lunch&quot;
 },
 {
 name: &quot;godzilla milkshake&quot;,
 category: &quot;dinner&quot;
 },
 {
 name: &quot;country delight&quot;,
 category: &quot;breakfast&quot;
 },
 {
 name: &quot;egg attack&quot;,
 category: &quot;lunch&quot;
 }
];
</code></pre>
<blockquote>
In this article, we will learn how to remove duplicates from an array in JavaScript, essentially creating an array of unique values. We'll be taking a look at several different methods so you'll be able to select the one that fits the best with your project.
</blockquote>
<h2 id="thebestsolutionusethesetconstructor">The Best Solution: Use the Set() Constructor</h2>
A Set is a collection of items which are unique, meaning, no element can be repeated. Suppose we have an array of school subjects, and we want to remove all duplicates from it:
<pre><code class="hljs">let subjects = [&quot;mathematics&quot;, &quot;french&quot;, &quot;english&quot;, &quot;french&quot;, &quot;mathematics&quot;];
</code></pre>
JavaScript provides us with a handy constructor for creating sets - <code>Set()</code>. It can accept an array as its argument. In that case, it creates a set and fills it with unique values from the passed array. The problem with this approach is that a <code>Set()</code> constructor creates a set, not an array (which we need).
We'll bypass the undesired behavior by using the <a target="_blank" href="https://stackabuse.com/spread-operator-in-javascript/">spread operator</a> - also known as the three dots operator (<code>...</code>). When combined with a set (produced with a <code>Set()</code> constructor), the spread operator can spread the set values into an array:
<pre><code class="hljs">let uniqueSubjects = [...new Set(subjects)];

console.log(uniqueSubjects); // [&quot;mathematics&quot;, &quot;french&quot;, &quot;english&quot;]
</code></pre>
We can also do this for an array of objects, let’s illustrate that on the example of the <code> menu</code> array:
<pre><code class="hljs">let categories = [...new Set( menu.map((menu) =&gt; menu.category))];

console.log(categories); // [&quot;breakfast&quot;,&quot;lunch&quot;,&quot;dinner&quot;]
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Removing duplicates from an array using the <code>Set()</code> constructor takes linear time - <code>O(n)</code> (<code>n</code> is the number of elements in the original array). All the other methods of removing duplicates take <code>O(n²)</code> time. Therefore, we highly advise you to use the <code>Set()</code> constructor in any case possible.

 </div>
 </div>
 </div>
 <h2 id="usingthefilterandindexofmethods">Using the filter() And indexOf() Methods</h2>
The <code>filter()</code> method is used to loop through an array and return a new array consisting only of elements that met the given criteria, whereas the <code>indexOf()</code> method is used to return the index of the element's first occurrence in the array.
For example, suppose we have an array of subjects, and we want to check the index of each element:
<pre><code class="hljs">let subjects = [&quot;mathematics&quot;, &quot;french&quot;, &quot;english&quot;, &quot;french&quot;, &quot;mathematics&quot;];

let subjectsIndex = [];
subjects.map((subject) =&gt; {
 subjectsIndex.push(subjects.indexOf(subject));
});

console.log(subjectsIndex); // [0,1,2,1,0]
</code></pre>
Because we know that the filter method returns a new array based on the given criteria, we can now use it to include only the elements whose indexes match their <code>indexOf()</code> values:
<pre><code class="hljs">let subjects = [&quot;mathematics&quot;, &quot;french&quot;, &quot;english&quot;, &quot;french&quot;, &quot;mathematics&quot;];

let uniqueSubjects = subjects.filter((subject, index) =&gt; {
 return subjects.indexOf(subject) === index;
});

console.log(uniqueSubjects); // [&quot;mathematics&quot;,&quot;french&quot;,&quot;english&quot;]
</code></pre>
Suppose we want to make use of the <code>menu</code> array, we would first have to loop through the array to store the categories in a new array, then now make use of the <code>filter()</code> and <code>indexOf()</code> method:
<pre><code class="hljs">let categoriesArray = menu.map((menu)=&gt;menu.category)

let uniqueCategories = categoriesArray.filter((category, index) =&gt; {
 return categoriesArray.indexOf(category) === index;
});

console.log(uniqueCategories); // [&quot;breakfast&quot;,&quot;lunch&quot;,&quot;dinner&quot;]
</code></pre>
<blockquote>
If you'd like to read more about the <code>filter()</code> method - read our <a target="_blank" href="https://stackabuse.com/guide-to-javascripts-filter-method/">Guide to JavaScript's filter() Method</a>!
</blockquote>
<h2 id="usingreduceandincludesmethods">Using reduce() and includes() Methods</h2>
Reduce is always a little more difficult to grasp but performs a very powerful reduction operation, borrowed from functional programming. The <code>reduce()</code> method is used to reduce the array's elements and combine them into a final array based on some reduction function that you pass in, whereas the <code>includes()</code> method returns true if an element is in an array and false otherwise.
The following example iterates over the elements of an array and checks if a particular element is in the result, else we add it:
<pre><code class="hljs">let subjects = [&quot;mathematics&quot;, &quot;french&quot;, &quot;english&quot;, &quot;french&quot;, &quot;mathematics&quot;];

let uniqueSubjects = subjects.reduce((result, subject) =&gt; {
 return result.includes(subject) ? result : [...result, subject];
}, []);

console.log(uniqueSubjects); // [&quot;mathematics&quot;,&quot;french&quot;,&quot;english&quot;]
</code></pre>
Suppose we want to make use of the menu array, we would first have to loop through the array to store the categories in an array, then now make use of the <code>reduce()</code> and <code>includes()</code> method as earlier explained:
<pre><code class="hljs">let categoriesArray = menu.map((menu)=&gt;menu.category)

let uniqueCategories = categoriesArray.reduce((result, category) =&gt; {
 return result.includes(category) ? result : [...result, category];
}, []);

console.log(uniqueCategories); // [&quot;breakfast&quot;,&quot;lunch&quot;,&quot;dinner&quot;]
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Note how we've also used the spread operator in this section.

 </div>
 </div>
 </div>
 <h2 id="usingtheforeachandincludesmethods">Using the forEach() and includes() Methods</h2>
This works almost like using the <code>filter()</code> and <code>includes()</code> methods. We are simply using the <code>forEach()</code> method to iterate through the array and then add to a new array only elements that are not already there:
<pre><code class="hljs">let subjects = [&quot;mathematics&quot;, &quot;french&quot;, &quot;english&quot;, &quot;french&quot;, &quot;mathematics&quot;];

let uniqueSubjects = [];
subjects.forEach((subject) =&gt; {
 if (!uniqueSubjects.includes(subject)) {
 uniqueSubjects.push(subject);
 }
});

console.log(uniqueSubjects); // [&quot;mathematics&quot;,&quot;french&quot;,&quot;english&quot;]
</code></pre>
Suppose we want to make use of the <code>menu</code> array, we would first have to loop through the array to store the categories in an array, then now make use of the <code>forEach()</code> and <code>includes()</code> method as earlier explained:
<pre><code class="hljs">let categoriesArray = menu.map((menu)=&gt;menu.category)

let uniqueCategories = [];
categoriesArray.forEach((category) =&gt; {
 if (!uniqueCategories.includes(category)) {
 uniqueCategories.push(category);
 }
});

console.log(uniqueCategories); // [&quot;breakfast&quot;,&quot;lunch&quot;,&quot;dinner&quot;]
</code></pre>
<h2 id="conclusion">Conclusion</h2>
We've seen four different methods for removing duplicates from an array in this article. The introduction of <code>Set()</code> in ES6 made this a lot easier and more efficient. Removing duplicates from an array using the <code>Set()</code> constructor takes linear time - <code>O(n)</code> (<code>n</code> is the number of elements in the original array). All the other methods of removing duplicates take <code>O(n²)</code> time. Therefore, we highly advise you to use the <code>Set()</code> constructor in any case possible.

In this tutorial, learn how to remove duplicates from an array in JavaScript with a Set, forEach(), reduce(), includes() and filter().

How to Remove Duplicates From an Array in JavaScript

<h2 id="introduction">Introduction</h2>
More often than not we find ourselves counting the number of days from or to a particular date. Luckily, doing just that in Java is not very hard, and there are also quite a few ways to do it.
<blockquote>
So, in this article, we'll be taking a look at how to get the number of days between two dates in Java.
</blockquote>
<h2 id="findingthedifferencebetweentwodatespriortojava8">Finding the Difference Between Two Dates Prior to Java 8</h2>
This is one of the easiest and most straightforward ways to calculate the difference in days between two dates. In order to do it, we need to have two <code>Date</code> objects. Using the <code>getTime()</code> from <code>java.util.Date</code> class, we'll be getting the number of milliseconds since January 1, 1970, 00:00:00 GMT represented by a specific <code>Date</code> object.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: This specific time is no coincidence either, as it's often referred to as the beginning of the UNIX Epoch or UNIX Time.

 </div>
 </div>
 </div>
 After getting the time in milliseconds, we'll get the difference between two values by subtracting them and converting the new value to days - either manually (by doing a simple calculation) or by using <code>TimeUnit.DAYS.convert</code> method from <code>java.util.concurrent.TimeUnit</code>.
We can get dates either as a <code>Date</code> or a <code>String</code> object. In the second case, we need to convert a <code>String</code> to a <code>Date</code> using the <code>parse</code> method from the <a target="_blank" href="https://stackabuse.com/java-format-dates-with-simpledateformat/"><code>SimpleDateFormat</code> class</a>.
Let's calculate the number of days of two example dates:
<pre><code class="hljs">Date dateBefore = new Date(2022, Calendar.APRIL, 21);
Date dateAfter = new Date(2022, Calendar.APRIL, 25);

long dateBeforeInMs = dateBefore.getTime();
long dateAfterInMs = dateAfter.getTime();

long timeDiff = Math.abs(dateAfterInMs - dateBeforeInMs);

long daysDiff = TimeUnit.DAYS.convert(timeDiff, TimeUnit.MILLISECONDS);
// Alternatevly: 
// int daysDiff = (int) (timeDiff / (1000 * 60 * 60 * 24));
System.out.println(&quot; The number of days between dates: &quot; + daysDiff);
</code></pre>
Since there are four days between our example dates, the previous code will produce the following output:
<pre><code class="hljs">The number of days between dates: 4
</code></pre>
As mentioned earlier, if we've used a <code>String</code> instead of a <code>Date</code> object, we'd first need to convert it for it to be usable. In order to convert a <code>String</code> to a <code>Date</code>, we need to first define which date format we'll be using in order to parse the values correctly. In our example, we'll be using the <code>MM/dd/yyyy</code> format. After that, we parse the <code>String</code> to a <code>Date</code>, and do the same as we did in the previous example:
<pre><code class="hljs">try {
// Convert `String` to `Date`
 SimpleDateFormat sdf = new SimpleDateFormat(&quot;MM/dd/yyyy&quot;, Locale.ENGLISH);
 Date dateBefore = sdf.parse(&quot;04/21/2022&quot;);
 Date dateAfter = sdf.parse(&quot;04/25/2022&quot;);

// Calculate the number of days between dates
 long timeDiff = Math.abs(dateAfter.getTime() - dateBefore.getTime());
 long daysDiff = TimeUnit.DAYS.convert(timeDiff, TimeUnit.MILLISECONDS);
 System.out.println(&quot;The number of days between dates: &quot; + daysDiff);
}catch(Exception e){
 e.printStackTrace();
}
</code></pre>
We first defined a new <code>SimpleDateFormat</code> so that we know how to parse out the dates given through the <code>String</code>, after which we use the method <code>parse</code> to do just that. The only thing we need to pay attention to here is that we need to surround this portion of the code with a <code>try-catch</code> block, since the <code>parse</code> method can cause an error breaking our program. Finally, after we've calculated the time difference, we again apply the <code>TimeUnit.DAYS.convert</code> method to convert it to days and produce the following output:
<pre><code class="hljs">The number of days between dates: 4
</code></pre>
<h2 id="findingthedifferencebetweentwodatesusingjavatimetemporalchronounit">Finding the Difference Between Two Dates Using java.time.temporal.ChronoUnit</h2>
<code>ChronoUnit</code> is an <code>enum</code> that implements the <code>TemporalUnit</code> interface, which provides the standard units used in the Java Date Time API (essentially, a standard set of date periods units). This set of units provides unit-based access to manipulate a date, time, or date-time.
<code>ChronoUnit</code> has only a few methods, and the one that interests us the most is the <code>between()</code> method. This method takes in two <code>Temporal</code> objects and calculates the amount of time between them. The start and end points must be of compatible types. The implementation will convert the second type to be an instance of the first type before calculating the amount. The calculation returns a whole number, representing the number of complete units between the two temporals.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The result will be negative if the end date is before the start date.

 </div>
 </div>
 </div>
 There are two different ways of using the <code>between()</code> method. The first is to invoke this method directly. The second is to use <code>Temporal.until(Temporal, TemporalUnit)</code> which invokes it implicitly:
<pre><code class="hljs">try {
 LocalDate dateBefore = LocalDate.parse(&quot;2022-04-21&quot;);
 LocalDate dateAfter = LocalDate.parse(&quot;2022-04-25&quot;);

 // Approach 1
 long daysDiff = ChronoUnit.DAYS.between(dateBefore, dateAfter);
 System.out.println(&quot;The number of days between dates: &quot; + daysDiff);
 
 // Approach 2
 long daysDiff = dateBefore.until(dateAfter, ChronoUnit.DAYS);
 System.out.println(&quot;The number of days between dates: &quot; + daysDiff);
 
}catch(Exception e){
 e.printStackTrace();
}
</code></pre>
Both of these produce the same result:
<pre><code class="hljs">The number of days between dates: 4
</code></pre>
<h2 id="findingthedifferencebetweentwodatesusingjavatimeperiod">Finding the Difference Between Two Dates Using java.Time.Period</h2>
The <code>Period</code> class is a date-based class, meaning that it models a quantity (amount) of time in terms of years, months, and days - for example '3 years, 5 months, and 7 days'. It has a time-based equivalent, the <code>Duration</code> class, that models the amount of time in terms of seconds and nanoseconds.
Durations and periods differ in their treatment of daylight savings time when added to <code>ZonedDateTime</code>. A <code>Duration</code> will add an exact number of seconds, thus the duration of one day is always exactly 24 hours. By contrast, a <code>Period</code> will add a conceptual day, trying to maintain the local time.
The <code>Period</code> class has a <code>between()</code> method - just as the previously discussed <code>ChronoUnit</code>. This method takes in two <code>LocalDate</code> objects, one representing the starting date, and the second being the end date. It returns a <code>Period</code> consisting of the number of years, months, and days between two dates. It's important to note that the start date is included, while the end date is not.

Let's see an example of how we can use this method:
<pre><code class="hljs">LocalDate dateBefore = LocalDate.of(2022, 4, 21);
LocalDate dateAfter = LocalDate.of(2022, 4, 25);

Period period = Period.between(dateBefore, dateAfter);
long daysDiff = Math.abs(period.getDays());

System.out.println(&quot; The number of days between dates: &quot; + daysDiff);
</code></pre>
This works fine and will produce the same result as all the previous examples we had. However, there's a big problem with this approach if you want to calculate the time of days between months:
<pre><code class="hljs">LocalDate dateBefore = LocalDate.of(2022, 2, 21);
LocalDate dateAfter = LocalDate.of(2022, 4, 25);
</code></pre>
If we calculated the difference between these two dates, the expected answer should be 63 days. However, the output we get again is 4 days. The reasoning behind this is that again - Periods include the number of years, months and days as separate entities. We can't &quot;sum up&quot; the months and years into days natively, so you'd have to create an extra method for that:
<pre><code class="hljs"> static long getDayDiff(Period period) {
 long years = period.getYears();
 long months = period.getMonths();
 long days = period.getDays();

 return (years*365)+(months*30)+days;
}
</code></pre>
Though, this is still only an approximation that doesn't take leap years into account, nor whether a month has 30 or 31 days. All of the if-clauses and checks could get pretty verbose quickly, so it's highly advised to stick to the <code>between()</code> method for getting the number of days between dates.
<h2 id="findingthedifferencebetweentwodatesusingjodatime">Finding the Difference Between Two Dates Using Joda-Time</h2>
The standard date and time classes before Java 8 were known to be poor, and so <code>Joda-Time</code> became the standard date and time library that was most widely used at the time. The design allows for multiple calendar systems, while still providing a simple API. Most of the calendar systems were included, as well as supporting classes for time zones, duration, format, and parsing.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: This section was added for legacy systems that still use Joda-Time, instead of the new Date/Time API. If you're using a newer version of Java, it's preferable, easier and more performant to not include new dependencies.

 </div>
 </div>
 </div>
 Adding <code>Joda-Time</code> to our project requires adding the following dependency from Maven Central:
<pre><code class="hljs">&lt;dependency&gt;
 &lt;groupId&gt;joda-time&lt;/groupId&gt;
 &lt;artifactId&gt;joda-time&lt;/artifactId&gt;
 &lt;version&gt;2.10.14&lt;/version&gt;
&lt;/dependency&gt;
</code></pre>
We won't be diving deeper into everything that the <code>Joda-Time</code> library offers, and if you're interested further you can check the official <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.joda.org/joda-time/">Joda-Time website</a>.
Now that we've added the library to our project, getting the difference between dates is very simple, and not at all different to the approaches prior:
<pre><code class="hljs">org.joda.time.LocalDate dateBefore = org.joda.time.LocalDate.parse(&quot;2022-04-21&quot;);
org.joda.time.LocalDate dateAfter = org.joda.time.LocalDate.parse(&quot;2022-04-25&quot;);

long daysDiff = Math.abs(Days.daysBetween(dateBefore, dateAfter).getDays());
System.out.println(&quot; The number of days between dates: &quot; + daysDiff);
</code></pre>
Although useful, this library is practically &quot;overrun&quot; by the overhaul of how time and dates are formatted in Java 8, and offers practically no benefits compared to the previous approaches discussed. However, if you're for whatever reason using a version older than Java 8, this is the best way to do it.
<h2 id="conclusion">Conclusion</h2>
In this article we've taken a look at how to do one of the most basic tasks in programming - find the number of days between two dates. Firstly, we did this in the simplest way possible, and then examined several alternative approaches - the <code>ChronoUnit</code> enum, the <code>Duration</code> and the <code>Period</code> classes from <code>java.time</code>. Finally, we've taken a look at how to calculate the number of days between two dates it using a widely popular external library like <code>Joda-Time</code>, for a much more elegant approach to solving this problem.

Branko Ilic

In this tutorial, learn how to calculate/get the number of days between two dates in Java - whether they're LocalDate objects, or Strings, using ChronoUnit, Joda-Time, Period, etc.

How to Get the Number of Days Between Dates in Java

<h2 id="introduction">Introduction</h2>
A website's carousel or slider is an effective way to display multiple images or content in a single space. It encourages visitors to concentrate on important website content while also improving overall visual appeal by saving screen space.
<blockquote>
In this article, we will learn how to create a draggable carousel from scratch using vanilla JavaScript. This will be very detailed and explanatory so that everyone can understand it.
</blockquote>
<img src="https://s3.stackabuse.com/media/articles/how-to-create-a-draggable-carousel-using-vanilla-javascript-1.gif" alt="">

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The source code is available on <a href="https://github.com/StackAbuse/draggable-carousel">GitHub</a>.

 </div>
 </div>
 </div>
 <h2 id="gettingstarted">Getting Started</h2>
To build the draggable carousel from scratch in vanilla JavaScript, we'd need to use a set of unique mouse events, such as:
<ul>
<li><code>mousedown</code>: When a mouse button is pressed while the pointer is inside an element, the <code>mousedown</code> event is triggered.</li>
<li><code>mouseenter</code>: When a mouse is first moved into an element, the <code>mouseenter</code> event is triggered.</li>
<li><code>mouseleave</code>: When the cursor of a mouse moves out of an element, the <code>mouseleave</code> event is triggered (this is the opposite of <code>mouseenter</code>).</li>
<li><code>mouseup</code>: The <code>mouseup</code> event is triggered when the pointer is within the element and a button on a mouse is released.</li>
<li><code>mousemove</code>: When a mouse is moved while the cursor is inside it, the <code>mousemove</code> event is triggered.</li>
</ul>
Let's begin by creating our HTML file; basically, we'd have as many cards as we want with whatever content we want. To avoid pasting HTML code of more than 80 lines, I'd remove the content from the cards and rather make use of boxes:
<pre><code class="hljs">&lt;div class=&quot;slider-container&quot;&gt;
 &lt;div class=&quot;inner-slider&quot;&gt;
 &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>
Let’s also add some basic styles to the <code>slider-container</code>, <code>inner-slider</code> and the <code>card</code>:
<pre><code class="hljs">.card {
 height: 300px;
 width: 400px;
 border-radius: 5px;
}
.card:nth-child(odd) {
 background-color: blue;
}
.card:nth-child(even) {
 background-color: rgb(0, 183, 255);
}
.slider-container {
 width: 80%;
 height: 350px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 overflow: hidden;
}
.inner-slider {
 width: 150%;
 display: flex;
 gap: 10px;
 pointer-events: none;
 position: absolute;
 top: 0;
 left: 0;
}
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: <code>overflow: hidden;</code> was added to <code>slider-container</code>, so it hides the other cards that are outside the specified <code>width</code>. We also used <code>position: absolute;</code> alongside <code>top</code> and <code>left</code> in the <code>inner-slider</code>, so we can make use of the <code>left</code> position later with JavaScript.

 </div>
 </div>
 </div>
 At this point, your page should look like this:
<img src="https://s3.stackabuse.com/media/articles/how-to-create-a-draggable-carousel-using-vanilla-javascript-2.png" alt="">
<h2 id="makingthecarouseldraggable">Making the Carousel Draggable</h2>
The first step will be to select the slider element, the slider itself, and the slider container. Then we'll set up three variables that we'll use later.
<pre><code class="hljs">let sliderContainer = document.querySelector(&#x27;.slider-container&#x27;);
let innerSlider = document.querySelector(&#x27;.inner-slider&#x27;);

let pressed = false;
let startX;
let x;
</code></pre>
As previously stated, we will use a large number of mouse <code>eventListeners</code> to handle various operations. We will mostly be attaching them to the parent slider element.
The first event we'll watch for is the mousedown event, which is similar to but not exactly the same as a click. This is where we'll specify what we want to happen when a user clicks around the slider container.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: This differs from the <code>click</code> event in that the <code>click</code> event is fired after a full click action has occurred; that is, the mouse button is pressed and released while the pointer remains inside the same element. While, the <code>mousedown</code> is executed the moment the button is pressed for the first time.

 </div>
 </div>
 </div>
 <pre><code class="hljs">sliderContainer.addEventListener(&#x27;mousedown&#x27;, () =&gt; {
 ...
})
</code></pre>
To demonstrate that the <code>pressed</code> variable, which we previously initialized as <code>false</code>, is pressed, we will first assign <code>true</code> to it. We'll also set the <code>startx</code> value to the offset value in the <code>x</code> direction minus the <code>innerSlider</code> offset value to the <code>left</code>, which is currently <code>0</code>. We can see what this means by attempting to log out the value of <code>startx</code>.
We'll also style the <code>cursor</code> for better interaction. This is going to be set to <code>grabbing</code> (to check what this does, try clicking within the <code>slidercontainer</code>).
<pre><code class="hljs">sliderContainer.addEventListener(&quot;mousedown&quot;, (e) =&gt; {
 pressed = true;
 startX = e.offsetX - innerSlider.offsetLeft;
 sliderContainer.style.cursor = &quot;grabbing&quot;;
});
</code></pre>
The next event we'd look for is <code>mouseenter</code>; we're doing this to add basic interactivity by styling the <code>cursor</code> to indicate that the slider or a specific slider card has been grabbed.
<pre><code class="hljs">sliderContainer.addEventListener(&quot;mouseenter&quot;, () =&gt; {
 sliderContainer.style.cursor = &quot;grab&quot;;
});
</code></pre>
After that, we would listen for the <code>mouseup</code> event and set the <code>cursor</code> style to <code>grab</code>, so that when a user stops grabbing or clicking, the <code>cursor</code> would change back to <code>grab</code> rather than <code>grabbing</code>. We'll also return the <code>pressed</code> value to <code>false</code>.
<pre><code class="hljs">sliderContainer.addEventListener(&quot;mouseup&quot;, () =&gt; {
 sliderContainer.style.cursor = &quot;grab&quot;;
 pressed = false;
});
</code></pre>
We've been able to add some interactivity up to this point, but we haven't yet implemented the main functionality, a draggable carousel.
<h3 id="handlingthecorelogic">Handling the Core Logic</h3>
Let's now take care of the core logic; we'll still be targeting the <code>sliderContainer</code>, but this time we'll be listening for a <code>mousemove</code> event. In the call back function, we would check if <code>pressed</code> is <code>false</code> so that we could return the function, and it would do nothing.
<pre><code class="hljs">sliderContainer.addEventListener(&quot;mousemove&quot;, (e) =&gt; {
 if (!pressed) return;
 ...
});
</code></pre>
But, if <code>pressed</code> is <code>true</code>, we can proceed to some other logics. The first step will be to prevent default behaviors, followed by setting <code>x</code> to <code>offsetX</code> (the x-coordinate of the mouse pointer relative to the container slider element).
<pre><code class="hljs">sliderContainer.addEventListener(&quot;mousemove&quot;, (e) =&gt; {
 if (!pressed) return;
 e.preventDefault();

 x = e.offsetX;
});
</code></pre>
You'll notice that when we styled the <code>innerSlider</code> CSS class, we added <code>position: absolute</code> and a <code>left</code> value of <code>0</code>. Now we're going to change the <code>left</code> value to <code>x-startX</code> dynamically when the user drags the carousel. (we are subtracting our current position from the offset of the parent div).
<pre><code class="hljs">sliderContainer.addEventListener(&quot;mousemove&quot;, (e) =&gt; {
 if (!pressed) return;
 e.preventDefault();

 x = e.offsetX;

 innerSlider.style.left = `${x - startX}px`;
});
</code></pre>
At this point, you'll notice that everything works fine because our slider now drags properly, but there's no limit to where the scroll can stop.
<img src="https://s3.stackabuse.com/media/articles/how-to-create-a-draggable-carousel-using-vanilla-javascript-3.gif" alt="">
Let's take care of it now by defining a new function. The first thing will be to get the position of the inner and outer slider containers, then we can now create two conditional statements to work for both sides.
<pre><code class="hljs">const checkBoundary = () =&gt; {
 let outer = sliderContainer.getBoundingClientRect();
 let inner = innerSlider.getBoundingClientRect();

 if (parseInt(innerSlider.style.left) &gt; 0) {
 innerSlider.style.left = &quot;0px&quot;;
 }

 if (inner.right &lt; outer.right) {
 innerSlider.style.left = `-${inner.width - outer.width}px`;
 }
};
</code></pre>
Once this is done, we can now call this function within the <code>mousemove</code> event listener as the last thing:
<pre><code class="hljs">sliderContainer.addEventListener(&quot;mousemove&quot;, (e) =&gt; {
 ...
 checkBoundary();
});
</code></pre>
We were able to successfully create a draggable slider with JavaScript from scratch using this method.
<img src="https://s3.stackabuse.com/media/articles/how-to-create-a-draggable-carousel-using-vanilla-javascript-4.gif" alt="">
<h2 id="conclusion">Conclusion</h2>
In this article, we have learned how to create a draggable carousel from scratch using vanilla JavaScript, we also learned the difference between all the mouse events used.

How to Create a Draggable Carousel Using Vanilla JavaScript

Guide to React Component

<h2 id="introduction">Introduction</h2>
Objects are used to store a set of properties, each of which can be thought of as a link between a name (or key) and a value (a collection of key-value pairs).
<blockquote>
In this guide, we will learn how to get the length of a JavaScript object.
</blockquote>
Checking the length of an Object is not a common and basic operation; however, it is critical to understand how this can be accomplished and to avoid some unnecessary bugs. The object does not have a <code>length</code> property by default. The <code>length</code> property is only available to arrays and strings.
For example:
<pre><code class="hljs">let myObject = {firstName: &quot;John&quot;, lastName: &quot;Doe&quot;};
let myString = &#x27;John Doe&#x27;;
let myArray = [71, 32, 78, 54];

console.log(myObject.length); // undefined
console.log(myString.length); // 8
console.log(myArray.length); // 4
</code></pre>
There are basically two ways to get the length of an object in JavaScript: using any of the object static methods or the <code>for...in</code> loop method. Let's start by creating an object, either with the object literal syntax or using the new keyword:
<pre><code class="hljs">let subjectScores = {
 chemistry: 40,
 mathematics: 70,
 physics: 90,
 english: 68,
 biology: 77
};

//Or

let subjectScores = new Object();

subjectScores[&quot;chemistry&quot;] = 40;
subjectScores[&quot;mathematics&quot;] = 70;
subjectScores[&quot;physics&quot;] = 90;
subjectScores[&quot;english&quot;] = 68;
subjectScores[&quot;biology&quot;] = 77;
</code></pre>
<h2 id="getlengthofobjectwithobjectstaticmethods">Get Length of Object With Object Static Methods</h2>
Static methods are predefined methods that we can access on any object. To determine the length of an object, we can use object static methods such as <code>Object.keys()</code>, <code>Object.values()</code>, and <code>Object.entries()</code>. These methods return either the key, values, or key-value pairs as arrays, allowing us to use the <code>length</code> property to determine the object's length.
<blockquote>
Note: Properties are key-value pairs that define an object. Each property in an object is given a name (also known as a key) and a value (also known as a value). Depending on which properties you want to enumerate, you can extract <code>keys()</code> and <code>values()</code> separately, or <code>entries()</code>, which are key-value pairs.
</blockquote>
<h3 id="getlengthofobjectwithobjectkeys">Get Length of Object With <code>Object.keys()</code></h3>
The <code>Object.keys()</code> method returns an array of properties of the <code>Object</code>, we will then make use of the <code>length</code> property to get the number of elements in the array (length of the object). For example, making use of the object we created at the beginning of this article:
<pre><code class="hljs">let objectLength = Object.keys(subjectScores).length; 
console.log(objectLength); // 5
</code></pre>
<h3 id="getlengthofobjectwithobjectvalues">Get Length of Object With <code>Object.values()</code></h3>
The <code>Object.values()</code> method returns an array which contains the values of the <code>Object</code>. We will also make use of the <code>length</code> property to get the number of elements. For example, making use of the object we created at the beginning of this article:
<pre><code class="hljs">let objectLength = Object.values(subjectScores).length; 
console.log(objectLength); // 5
</code></pre>
<h3 id="getlengthofobjectwithobjectentries">Get Length of Object With <code>Object.entries()</code></h3>
The <code>Object.entries()</code> method returns an array of the key-value pair of an <code>Object</code>. We can use the <code>length</code> property to get the number of elements. For example, making use of the object we created at the beginning of this article:
<pre><code class="hljs">let objectLength = Object.entries(subjectScores).length; 
console.log(objectLength); // 5
</code></pre>
<h2 id="getlengthofobjectusingforinloop">Get Length of Object Using <code>for…in</code> Loop</h2>
The <code>for…in</code> loop is used to iterate the properties of the object. To get the length, all we would do is to create a variable and increase the counter as long as the loop continues.
<pre><code class="hljs">let objectLength = 0;

for (let key in subjectScores) {
 objectLength++;
}

console.log(objectLength); // 5
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we have learned how to get the length of an object via either static methods or looping through via the <code>for…in</code> method.

Get Length of JavaScript Object

Guide to React Event Management

<h2 id="introduction">Introduction</h2>
Deployment is the process of moving our code from a source control system to a hosting platform where it gets stored, and can be served as an application to end users. Typically, this is done either in the cloud or on a local server.
Prior to the advent of cloud platforms such as Netlify, hosting was only done by hosting providers who required a re-upload of all static assets (build files generated after running <code>npm run build</code>) every time you make a change. This upload was done using either FTP software or a web hosting management system like cPanel, which can be very stressful and technical.
Netlify is meant to solve that problem! It provides you with three simple methods to deploy an app - drag and drop interface, project import interface, and command-line interface (CLI). Even though all of them are made to be simple, each one is tailored with a different use case in mind.
<blockquote>
In this guide, we'll take a look at how to deploy a React app to Netlify and cover the pros and cons of each way to deploy a React app. After that, we'll quickly explain how to deal with the 404 Page Not Found error in Netlify.
</blockquote>
<h2 id="whyusenetlify">Why Use Netlify?</h2>
Netlify is a cloud hosting provider which provides serverless backend services for static websites. It is designed to maximize productivity in the sense that it enables developers (especially frontend oriented), and engineers to quickly build, test, and deploy websites/applications.
It works by connecting to your GitHub repository from where it pulls the source code. Following that, it will run a build process to pre-render the pages of our website/application into static files.
There are numerous reasons in favor of using Netlify, here are just a few of them:
<ul>
<li>Netlify is less expensive - creating and hosting a static website will save you money in the long run. Netlify boosts site speed significantly through a global distribution and automated pre-rendering.</li>
<li>Netlify makes it incredibly simple to deploy a website - in fact, the simplest way to accomplish this is to use GitHub, GitLab, or Bitbucket to set up continuous deployment.</li>
<li>Netlify makes it super easy to launch a website with its built-in DNS management solution.</li>
<li>We could easily deploy only a specific branch of our Git project - this is useful for testing new features that may or may not make it to the master/main branch, or for quickly determining how a PR will affect your site.</li>
<li>Netlify allows you to preview any deployment you make or want to make - this allows you and your team to see what changes will look like in production without having to deploy them on your existing site.</li>
<li>Netlify provides a handy form submission feature that allows us to collect information from users.</li>
</ul>
<h2 id="gettingstarted">Getting Started</h2>
In this guide, we'll deploy a <a rel="nofollow noopener noreferrer" target="_blank" href="https://github.com/StackAbuse/color-shades-generator">color tints and shades application</a> to Netlify. It is a simple React app that pulls tints and shades from the <a rel="nofollow noopener noreferrer" target="_blank" href="https://noeldelgado.github.io/values.js/">values.js</a> package.
Before we get started, let's go over some of the prerequisites for using Netlify:
<ul>
<li>Have an account with any Git provider - GitHub, GitLab, or Bitbucket.</li>
<li>Have <code>npm</code> installed - it comes preinstalled with <a rel="nofollow noopener noreferrer" target="_blank" href="https://nodejs.org/en/">Node</a> or <a rel="nofollow noopener noreferrer" target="_blank" href="https://yarnpkg.com/en/docs/install">Yarn</a>.</li>
<li>Basic understanding of how to use the <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.linode.com/docs/guides/using-the-terminal/">terminal</a> (optional).</li>
</ul>
<h3 id="pushingyourcodetogithub">Pushing Your Code to GitHub</h3>
We must first push our project to any Git provider before we can deploy our applications to Netlify. For this guide, we'll use the terminal to push our React app to GitHub.
But let's start with creating a GitHub repository first. Then ensure you fill in the necessary information and click Create repository:
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-1.png" alt="">
Back in the terminal, let's start by staging all our files, so we can commit them to the repository, then create a new branch <code>main</code> using the following commands:
<pre><code class="hljs">$ git init
$ git add .
$ git commit -m &quot;first commit&quot;
$ git branch -M main
</code></pre>
Once this is done, we can now push to the created remote repository using the following commands:
<pre><code class="hljs">$ git remote add origin https://github.com/username/git-repo.git
$ git push -u origin main
</code></pre>
Our code should appear when we refresh the repository! Moving on, there are three major methods for making Netlify deployments. Let's look at all of the methods and compare them at the end.
<h2 id="deployingapptonetlify">Deploying App to Netlify</h2>
Netlify offers a free plan which allows us to create an account or log in using any one of the options listed on the <a rel="nofollow noopener noreferrer" target="_blank" href="https://app.netlify.com/login">login page</a> (as seen in the image below).
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-2.png" alt="">
After logging in, we'll be taken to our Netlify dashboard, where we'll use both the drag and drop method and the project import method to deploy our app to Netlify.
<h3 id="deployapplicationtonetlifywithdraganddrop">Deploy Application to Netlify with Drag and Drop</h3>
We'll start by creating a build of our application by running the command below:
<pre><code class="hljs">$ npm run build
</code></pre>
Once this is completed successfully, our build folder will be created, which will contain all of the production-ready files (these are the files we'll be uploading to Netlify using the drag and drop method).

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: This will only work for static files such as HTML, CSS, and JS. This is why we had to first build our project so that it could generate our static files.

 </div>
 </div>
 </div>
 Click &quot;Add New Site&quot; &gt; &quot;Deploy Manually&quot; on our Netlify Overview page. This will take us to the page where we'll drop our static files. We can also access the <a rel="nofollow noopener noreferrer" target="_blank" href="https://app.netlify.com/drop">drop page here</a> as long as we are logged in.
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-3.png" alt="">
The next step would be to drop the build folder that was generated so it immediately gets deployed to a live URL as seen below:
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-4.gif" alt="">
<h3 id="deployapplicationtonetlifywithnetlifyscli">Deploy Application to Netlify with Netlify's CLI</h3>
Netlify's command-line interface (CLI) allows us to deploy our app directly from the command line, as well as configure continuous deployment so that Netlify automatically deploys new versions of our site when we push commits to our connected Git repository.
The first step would be to install the CLI using the following command:
<pre><code class="hljs">$ npm install netlify-cli -g
</code></pre>
This command will install Netlify globally. In case you want to install Netlify CLI locally, run the following command from the root directory of our project:
<pre><code class="hljs">$ npm install netlify-cli --save-dev
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Once this has been installed successfully, we can run <code>netlify</code> in our terminal to see a list of all Netlify commands and what they do.

 </div>
 </div>
 </div>
 The first step in deploying our React app using Netlify CLI is to authenticate and obtain an access token via the command line by running the following command from any directory:
<pre><code class="hljs">$ netlify login
</code></pre>
This will open a browser tab in order to authenticate us and grant us access to the Netlify CLI:
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-8.png" alt="">
Once this is successful, we can now deploy our app using the <code>deploy</code> command:
<pre><code class="hljs">$ netlify deploy
</code></pre>
This will prompt some questions, regarding the setup:
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-9.png" alt="">
Since we already have our react app hosted on GitHub, then we just need to &quot;Link this directory to an existing site&quot;. This will now bring up the next question:
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-10.png" alt="">
This folder will be linked to the GitHub repository where we pushed our code, and it will appear automatically as long as it is added as the remote origin. After that, our site will be created and deployed to a draft URL, which we can view by copying and pasting the URL into the browser:
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-11.png" alt="">
According to our console, &quot;if everything looks good on your draft URL, deploy it to your main site URL with the <code>--prod</code> flag.&quot; This allows us to preview any deployment we make so that we and our team can see how changes will look in production without having to deploy them on our existing site.
So, to make our app live, we'll execute the following command:
<pre><code class="hljs">$ netlify deploy --prod
</code></pre>
Once this is completed successfully, we'll be given two important URLs: the Unique Deploy URL (which represents the unique URL for each individual deployment) and the Live URL (which always displays your latest deployment):
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-12.png" alt="">
So, each time we update and deploy our website, we'll get a unique URL for that deployment. Essentially, if we deploy multiple times, we'll have multiple unique URLs you can use to direct users to a specific version of your application. However, the live URL always displays our most recent changes at the same URL.
<h3 id="importingprojecttonetlifydashboard">Importing project to Netlify Dashboard</h3>
So far, we've seen how to deploy a React app via drag and drop as well as the Netlify CLI. If we don't want to use the CLI, we can do everything manually by importing the project from your Git provider into our Netlify page. This can also perform functions similar to the Netlify CLI.
The first step would be to visit our Netlify team page, then click on &quot;Add new site&quot; &gt; &quot;Import an existing project&quot; as seen below:
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-5.png" alt="">
After that, it will take us to a page where we can select the Git provider where your site/app's source code is hosted. In our case, we went with GitHub. We can now search for the GitHub repository once it has been authorized:
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-6.png" alt="">
We can now handle deployment once we've identified the project. This takes us to a page where we can specify which branch we want to deploy, for example, if we're testing a specific release. This page also allows us to specify the build command and the location of the build file (this is automatically handled by Netlify except we wish to change it). When we have finished, we'd click the &quot;Deploy Site&quot; button.
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-7.png" alt="">
When our deployment is successful, we should get a Live URL. We can also tweak the settings on the settings overview page, such as domain settings, view deployment logs, etc.
<h2 id="comparingdeploymentoptions">Comparing Deployment Options</h2>
The first three methods all help us with deployment, but the last two methods help with other features such as continuous deployment, deploying specific branches, handling tests, and so on.
The drag and drop interface is useful when you want to deploy build files quickly without having to push your code to any Git provider. The Netlify CLI and Dashboard perform the same functions under the hood. The Netlify CLI accepts all of the commands through a clean terminal, so you won't have to deal with the unnecessary navigation, and can expect it to change less frequently than a webpage.
Choosing the best is a matter of the personal preference of a developer, with many preferring the CLI because of the lower overhead required - you can use it from the IDE, it's clean and succinct, and doesn't change as much through time.

<h2 id="handlingpagenotfounderror">Handling Page Not Found Error</h2>
If we're using a router, such as React Router, we'll need to configure redirects and rewrite rules for our URLs. Because we get a 404 error page when we click on any navigation item to change the page (route) and refresh the browser.
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-13.gif" alt="">
As a result, Netlify makes configuring redirects and rewriting rules for our URLs really easy. We'll need to add a file called <code>_redirects</code> to our app's build folder, for this to happen automatically, we'll put it in the <code>public</code> folder. The following rewrite rule must be included within the file:
<pre><code class="hljs">/* /index.html 200
</code></pre>
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-14.png" alt="">
No matter what URL the browser requests, this rewrite rule will serve the index.html file instead of returning a 404. So, in order to see the most recent changes in the live URL, we must re-deploy using any of the preferred methods. We'll no longer see the 404 error page after changing our route and refreshing the app:
<img src="https://s3.stackabuse.com/media/articles/guide-to-deploying-a-react-app-to-netlify-15.gif" alt="">
<h2 id="conclusion">Conclusion</h2>
Deployment is the process of moving our code from a source control system to a hosting platform where it gets stored, and can be served as an application to end users. Typically, this is done either in the cloud or on a local server.
Prior to the advent of cloud platforms such as Netlify, hosting was only done by hosting providers who required a re-upload of all static assets (build files generated after running <code>npm run build</code>) every time you make a change. This upload was done using either FTP software or a web hosting management system like cPanel, which can be very stressful and technical.
In this guide, we've seen how to easily deploy a React app to Netlify in three ways - via the drag and drop interface, the Netlify CLI and the Netlify Dashboard. We also learned how to fix the 404 error that occurs when your React app uses a router.

In this guide, learn how to deploy a React JavaScript application to a live Netlify server, via the drag and drop interface, Netlify CLI, Netlify Dashboard, from a Git provider like GitHub, GitLab and BitBucket.