DEV Community: Dennar David

ReactJS VS NextJS

Dennar David — Sat, 29 Jun 2024 20:01:54 +0000

Though they are related, and in my perspective, like father and son, ReactJs and NextJs have several distinct characteristics as frontend technologies that are now widely used.

This article was inspired by the HNG internship program; this internship attempts to simulate an actual fast-paced tech working environment in which tasks are shipped out on a regular basis and are expected to be completed on or before deadlines, and failure to submit before the deadline results in being kicked out of the program. They offer a certification that may be obtained by subscribing to the HNG premium and completing stage 10 of the program. I aspire to make it to the final stage and build as many awesome things as possible along the road while honing my frontend talents.

Enough of HNG, let's get back to why we're here. ReactJS vs. NextJS. React is a Javascript Library (Libraries are intended to handle certain challenges in programming) developed by Facebook (Meta) for creating user interfaces (UI). React employs a functional programming style in which pure functions are used to solve complex issues. It also employs components, which are similar to basic building blocks integrated to produce the end product (UI).

On the other side, Vercel created NextJS, which is a React framework (a framework that strives to give everything required to design a complete application, including instructions). Next, utilize the same functional programming technique as React, but also use components to build the UI. As previously stated, it is a React framework, which is why I referred to them as father and child; there are small differences between these two frontend web technologies. So, what are the distinctions, you may ask?

First let's talk about the peculiarities of each frontend technology, starting with React.

Reacts Peculiarities:

The following are some of the unique features provided by React js, but they are not exhaustive.

Component-Based Architecture: React employs a component-based approach to developing web applications, which entails dividing the UI's content into smaller pieces that can then be assembled to form the entire web app. This approach is advantageous because it facilitates code maintenance, reuse, and avoids code repetition (DRY codes).
JSX (Javascript XML): React employs JSX, an extension that allows you to write HTML-like code in JavaScript. This method or strategy focuses development in Javascript, React also provides a method (BABEL) that enable the browser translate JSX to Javascript that it understands. Here's a brief description of what JSX code looks like.

const element = <h1>Hello, world!</h1>;

Virtual DOM: The Virtual DOM (Document Object Model) is a replicate of the browser's actual DOM. It helps to minimize the amount of interaction with the DOM and updates just the contents that need to be updated on the browser DOM, resulting in a faster browser reload time.

NextJS peculiarities:

Let's now look at some NextJS peculiarities. As previously said, NextJS is a React framework, which means that it supports all of the features that React does. However, there are a few characteristics that should be highlighted.

File-Based Routing: NextJS enables file-based routing, which is essentially page routing using the name of the file as the route to the page. In contrast to React, which relies on external libraries for page routing, NextJS does this automatically. This is one nice aspect of NextJS because it takes away the burden of setting up routes on your own while still getting the routes to be completely functioning.
Server-Side Rendering (SSR): Here's a brief description of how SSR operates. When someone visits a website, the web page is fully built on the server side before being delivered to the client side or the visitor's perspective. This leads to faster initial load time, improved SEO, and the ability to display dynamic information.
API Routes: NextJS is a frontend framework, but when API routes are enabled, it helps to create backend functionality within the framework, which helps to handle requests sent to the frontend of the web app. API routes work similarly to file-based routing, accepting data, processing it, and returning responses.

ReactJS vs NextJS Comparison

After all these peculiarities offered by these two frontend technologies, how do you choose which to use over which??

Well, as I previously stated, the similarity between React and Next is similar to that of a father and a child, and Next is a React framework, Next is obviously designed to provide more simple methods of completing jobs than React. Routing, for example, is handled automatically in NextJS, whereas in React, routing must be accomplished through the use of additional routing libraries such as React Router, which must also be understood in order to be utilized.

NextJS also allows both client-side and server-side rendering, whereas React only supports client-side rendering. NextJS's client-side rendering makes SEO (search engine optimization) easier to do, but SEO in React requires more effort.

React is a Javascript library designed primarily for constructing user interfaces, whereas NextJS is an upgraded version of React that not only considers UI development but also ensures that the web project runs smoothly and with minimal stress.

In conclusion, React is a powerful Javascript library that is used for creating user interfaces and serves as the foundation for developing modern web applications. Despite its power, more effort is still required to create a fully optimized web app. NextJS, on the other hand, is a React-based framework that enhances React's existing features while also adding additional features that focus not only on building UI but also on providing a good developer experience.

#10daysofcodechallenge by Ingressive for Good (#Day 10)

Dennar David — Fri, 30 Sep 2022 22:16:18 +0000

I made it to the end of a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 5 of the challenge.

Let me briefly describe how the challenge works before I share my experience with you. From September 21 through October 30, 2022, the challenge is to solve one common algorithm problem every day for ten days.

Today's algorithm problem was “Valid Number." It is the 65th algorithm challenge on "Leetcode.com".

The work for today was not particularly difficult; it included providing a string into a function, which would determine whether the string is a number or not and return true or false accordingly. For this, I first used the isNaN JavaScript function to determine whether the input was a number or not before checking for extreme instances like infinity. I had to adjust the code because it had not worked the first time, the result was still the same.

This task was completed in javaScript, took 112 milliseconds to execute, and consumed 44.2MB of memory.

I'd want to take this time to thank ingressive for Good for hosting such incredible challenges. I appreciate the fact that you forced me to explore places I never would have thought to go.

#10daysofcodechallenge by Ingressive for Good (#Day 9)

Dennar David — Thu, 29 Sep 2022 22:14:05 +0000

I am close to the end of a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 5 of the challenge.

Today's algorithm problem was “Merge k Sorted Lists." It is the 23rd algorithm challenge on "Leetcode.com".

The algorithm for today involved sorting a linked list. The issue appeared straightforward at first glance because all you had to do to address it was take each element from each list, sort them, and then add them to a new list. But after trying numerous fruitless codes, I had to go look for linked list on Google.
I then developed a solution based on my studies. The solution was to divide the list into the smallest possible unit, take two lists at a time and arrange the elements in each list in the appropriate order. Repeat this process for all the pairs of lists.
The final list will be the necessary response.

This task was completed in javaScript, took 138 milliseconds to execute, and consumed 49 MB of memory.

I never believed I would make it this far thank you Ingressive for Good.

#10daysofcodechallenge by Ingressive for Good (#Day 8)

Dennar David — Wed, 28 Sep 2022 21:21:26 +0000

I am close to the end of a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 8 of the challenge.

Today's algorithm problem was "Combine Two Tables" It is the 175th algorithm challenge on "Leetcode.com".

Write an SQL query to report the first name, last name, city, and state of each person in the Person table. If the address of a personId is not present in the Address table, report null instead.
Return the result table in any order.

I visited w3schools.com to learn more about MySQL because I had never used it to resolve issue. As a result, I used the SELECT command to retrieve fields from the person table and the LEFT JOIN command to join the address table to the person table.

This task was completed in MySQL, took 525 milliseconds to execute, and consumed 0B of memory.

#10daysofcodechallenge by Ingressive for Good (#Day 7)

Dennar David — Tue, 27 Sep 2022 22:48:38 +0000

I am close to the end of a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 7 of the challenge.

Today's “UTF-8 Validation" It is the 393rd algorithm challenge on "Leetcode.com".

Here is the question:

Given an integer array data representing the data, return whether it is a valid UTF-8 encoding (i.e. it translates to a sequence of valid UTF-8 encoded characters).

A character in UTF8 can be from 1 to 4 bytes long, subjected to the following rules:

For a 1-byte character, the first bit is a 0, followed by its Unicode code. For an n-bytes character, the first n bits are all one's, the n + 1 bit is 0, followed by n - 1 bytes with the most significant 2 bits being 10.
This is how the UTF-8 encoding would work:

 Number of Bytes   |        UTF-8 Octet Sequence
                   |              (binary)
        1          |   0xxxxxxx
        2          |   110xxxxx 10xxxxxx
        3          |   1110xxxx 10xxxxxx 10xxxxxx
        4          |   11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

x denotes a bit in the binary form of a byte that may be either 0 or 1.

Note: The input is an array of integers. Only the least significant 8 bits of each integer is used to store the data. This means each integer represents only 1 byte of data.

I'll now discuss my algorithm solving experience. I created a variable and initialized it with a value of zero. The homogeneity of each byte in the array was verified by comparing it to the UTF-8 constant. The value of the variable was increased if there was no homogeneity.

This task was completed in javaScript, took 111 milliseconds to execute, and consumed about 44 MB of memory.

#10daysofcodechallenge by Ingressive for Good (#Day 6)

Dennar David — Mon, 26 Sep 2022 21:22:18 +0000

I've just begun a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 6 of the challenge.

Today's algorithm problem was "Fizz Buzz Multithreaded." It is the 1195th algorithm challenge on "Leetcode.com".
Here is the question:

You have the four functions:

printFizz that prints the word "fizz" to the console,
printBuzz that prints the word "buzz" to the console,
printFizzBuzz that prints the word "fizzbuzz" to the console, and
printNumber that prints a given integer to the console.
You are given an instance of the class FizzBuzz that has four functions: fizz, buzz, fizzbuzz and number. The same instance of > FizzBuzz will be passed to four different threads:

Thread A: calls fizz() that should output the word "fizz".
Thread B: calls buzz() that should output the word "buzz".
Thread C: calls fizzbuzz() that should output the word "fizzbuzz".
Thread D: calls number() that should only output the integers.
Modify the given class to output the series [1, 2, "fizz", 4, >"buzz", ...] where the ith token (1-indexed) of the series is:

"fizzbuzz" if i is divisible by 3 and 5,
"fizz" if i is divisible by 3 and not 5,
"buzz" if i is divisible by 5 and not 3, or

i if i is not divisible by 3 or 5.

I'll now discuss my algorithm solving experience. Since the challenge began, this algorithm has proven to be the most challenging. I used the Python threading module for this task (The problem required multi threading). I added some conditionals to a function to determine when to utilize the acquire() and release() methods on a particular instance. Then, each thread of the "fizzbuzz" made a call to this function.

This task was completed in Python, took 34 milliseconds to execute, and consumed about 13.6 MB of memory.

#10daysofcodechallenge by Ingressive for Good (#Day 5)

Dennar David — Sun, 25 Sep 2022 22:30:42 +0000

I've just begun a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 5 of the challenge.

Today's algorithm problem was "sorting a string in decreasing order based on the frequency of the characters." It is the 451st algorithm challenge on "Leetcode.com".

I'll now discuss my algorithm solving experience. To do this, I made a map that iterates through the string and stores the characters while keeping track of how often each character appears. The mapped values are then saved in an array, which is sorted after which the array's elements are merged to create the string.

This task was completed in javaScript, took 76 milliseconds to execute, and consumed about 43.9 MB of memory.

#10daysofcodechallenge by Ingressive for Good (#Day 4)

Dennar David — Sat, 24 Sep 2022 22:39:20 +0000

I've just begun a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 4 of the challenge.

Today's algorithm problem was "The printing in order challenge " It is the 1114th algorithm challenge on "Leetcode.com".

Today's challenge was the most perplexing I have found since the contest began. The program's inability to execute in JavaScript was a problem in and of itself. Before I even understood what the question was attempting to say, I had to read it about ten times.

Here is the question:
Suppose we have a class:

public class Foo {
  public void first() { print("first"); }
  public void second() { print("second"); }
  public void third() { print("third"); }
}

The same instance of Foo will be passed to three different threads. Thread A will call first(), thread B will call second(), and thread C will call third(). Design a mechanism and modify the program to ensure that second() is executed after first(), and third() is executed after second().

I'll now discuss my algorithm solving experience. I had to read up on the Python idea of threading in order to figure this out. Threading facilitates the execution of multiple tasks simultaneously and aids in the process flow of tasks.
Therefore, I created an event handler that would run after the first thread has finished.

This task was completed in Python, took 83 milliseconds to execute, and consumed about 14.5MB of memory.

#10daysofcodechallenge by Ingressive for Good (#Day 3)

Dennar David — Fri, 23 Sep 2022 22:37:03 +0000

I've just begun a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 3 of the challenge.

Today's algorithm problem was "The problem states that we need to determine if a given integer is a palindrome." It is the 9th algorithm challenge on "Leetcode.com".

How do you define a palindrome? An Oxford dictionary definition of a palindrome is a word, phrase, or sequence that reads the same both forward and backward.

I'll now discuss my algorithm solving experience. There are numerous techniques to determine whether a word, phrase, or sequence is a palindrome, but the crucial question is how to determine this using codes.

I had to apply the two pointer algorithm to address the problem I was presented with. I initialized two position pointers, one at the beginning of the string and the other at the end, after first converting the number to a string. After then, a while loop was utilized to iterate through each element of the string while comparing and, as necessary, increasing and reducing the pointers. The sequence is not a palindrome if the values at any of the position pointers are not equal.

This task was completed in javaScript, took 162 milliseconds to execute, and consumed about 50 MB of memory.

#10daysofcodechallenge by Ingressive for Good (#Day 2)

Dennar David — Thu, 22 Sep 2022 22:30:52 +0000

I've just begun a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 2 of the challenge.

Today's algorithm problem was "Removing all occurrences of a particular value in an array". It is the 27th algorithm challenge on "Leetcode.com"

I'll now share my experience. Like day 1, this wasn't as difficult. The task was to delete a certain value from an array while it was still in place without creating a new array, and to return the length of the array as it now stood without the removed values.

I chose to use the programming language javaScript to address this issue, I created a "for loop" to help me solve the algorithm. A condition is added when the loop traverses the array.
if(nums[i] === val){ nums.splice(i,1); i--; }.
Using the built-in javaScript function splice, this would find any value that we didn't want to be in the array and remove it. The loop's counter would then be decreased to go on to the next element in the array.

This had a runtime of 78 ms and used roughly 42 megabytes of memory.

#10daysofcodechallenge by Ingressive for Good (#Day 1)

Dennar David — Wed, 21 Sep 2022 22:10:18 +0000

I've just begun a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 1 of the challenge.

Today's algorithm problem was "Removing duplicates from a sorted list". It is the 26th algorithm challenge on "Leetcode.com"

I'll now share my experience. This was a little difficult for me because I had never really dealt with algorithm issues before. To do this, I had to understand the two pointer algorithm's basic principles. I created a solution utilizing nested for loops, which worked on my local system but was rejected by Leetcode since it did not adhere to their specifications.

For my final solution, I created a variable to act as a position pointer and a for loop to iterate through the array. At each position of the pointer, the loop is run to compare the value at that position and the pointers position; if they are the same, the values at the two positions are swapped, and the pointer is incremented. The last sorted array, where "n" is the "final pointer value," is returned if its first "n" elements are unique.

I utilized javaScript to solve the issue, which had a runtime of 88 milliseconds and consumed roughly 44.4 MB of memory.