DEV Community: Hassib Moddasser

What is React JS? An introduction to the "Whats & Whys" of React Library

Hassib Moddasser — Tue, 16 Nov 2021 21:18:46 +0000

React (also known as React.js or React JS) is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies. Wikipedia

In this article, I'll discuss the topics below in a simple describing language:

What is React JS?
What React can do?
React is a Library, not a Framework
Why should you learn React?
React Job Market
Top 10 organizations that use React
Final thoughts

So what are you waiting for? Let's dive in!

Introduction

React JS is a free and open-source client-side library for building dynamic User Interfaces or UI components. A component is a combination of HTML and JavaScript code that contains all of the functionality needed to show a small section of a larger user interface.

React renders everything as a component. It can make HTTP requests and loads data without reloading the page. It is referred to as the V in MVC. Stack Overflow Insights from 2021 states that React is the most wanted, desired by one in four developers. Insights 2021

React is a Library, not a Framework

React JS is technically a library, not a framework because it does not have a few key things that frameworks do include like Router, HTTP, and etc. For example, React doesn't have a routing mechanism in its core, but you can install it using package managers, or React uses fetch native JavaScript API but something like Angular has an HTTP client.

One key difference between libraries like React and frameworks like Ember.js and Angular JS is that React is specifically concerned with rendering the user interface, leaving many things up to each project to put together.

For developing a React application, a standard collection of tools, referred to as a stack, is as follows:

Application code: React, Redux, react-router
Build tools: Webpack, Uglify, npm/yarn, Babel, babel-preset-env
Testing tools: ESLint, Enzyme, Mocha/Jest

While the stack for Ember JS is Ember JS. Oreilly

Note: React is completely different than jQuery but is nearly similar to libraries/frameworks like Angular, Vue, and Ember.

Why should you learn React?

React JS is one of the most demanding frameworks on the market, with 31.3 percent of global experts using it at the moment.

Increased app development speed: React organizes the UI through reusable components, so you don't need to write duplicate HTML in your application anymore.
Robust toolkit: React has a wide range of debugging and interface design tools.
Strong user community: Since a large number of teams are deploying the framework, the tool is regularly updated. There's also no shortage of user-generated content, with dozens of useful React tutorials and case studies available to help you get the most out of the framework.
React is Light: React is lighter than most other libraries/frameworks and available to use in multiple ways.
Desired by one in four developers: React is the most wanted in 2021, desired by one in four developers.
Affordable remote react developer salary: It’s one of the most in-demand frameworks at the moment — that’s why business owners are willing to find professionals to hire.

React Job Market

React JS is commonly regarded as one of the most popular JavaScript libraries. It's widely chosen on over 9,670,000 websites, according to SimilarTech. Along with its growth, the demand for remote React developers and React JS services have been growing too. Based on a survey that StackOverflow performed, 85.3% of developers who took the survey were using JavaScript as their main programming language.

With these data in hand, there is no doubt that the need for JavaScript developers is higher than it has ever been. Furthermore, the popularity of React among remote frontend devs grew considerably in 2016 till now.

According to the Zip Recruiter statistics, on Nov 9, 2021, a React JS developer is getting paid an average salary of $108,175 per year which is equivalent to an hourly rate of $52, $2,080 per week, or $9,015 per month.

Looking at these statistics, is there a better time than today to learn React?

Top 10 organizations that use React

Facebook: React was invented by a Facebook software engineer. Facebook has maintained the framework since then, despite the fact that it is still open-source. As such, it would be unusual if Facebook does not use it while others do.
Instagram: Instagram is an American photo and video sharing social networking service.
Twitter: The bird app is a great example that is built using React which provides high client-side performance.
BBC (British Broadcasting Corporation): This is another one of the top websites built with React. The BBC has migrated its website since 2015 and it's still in use.
Netflix: Netflix is another fantastic React app example. Many beginners trained by building Netflix clones at some point in their development. The library has become so closely tied with the video streaming platform. Netflix uses it to render the server side of its web pages, especially for its registration flow. This has resulted in improved performance.
Salesforce: Salesforce is another example that is built with React and was an early adopter.
CNN: CNN is a news website which is created 40 years ago. Now CNN is a great React JS website example, which provides high performance and a rich user interface.
Airbnb: Airbnb is an online community marketplace for people to list, discover, and book accommodations around the world.
Asana: Asana is a web and mobile application designed to help teams organize, track, and manage their work.
PayPal: PayPal Holdings, Inc. is an American multinational financial technology company operating an online payments system in the majority of countries that support online money transfers,

Final thoughts

React is a free and open-source front-end JavaScript library for building user interfaces. It's maintained by Meta and a community of open-source developers. React makes it painless to create interactive UIs and developers can build encapsulated components that handle their own state to create complicated user interfaces.

React JS is commonly regarded as one of the most popular JavaScript libraries as one of four developers uses it as a go-to tool for Front-end development. It's widely chosen on over 9,670,000 websites. The average salary of a React JS developer is $108,175 per year.

Some of the world’s top tech teams use the tool to design scalable, easy-to-maintain solutions — Netflix, PayPal, Twitter, eBay, Airbnb, and more.

Can you imagine a better time than today to learn React? Dive in and start creating awesome things.

Before you leave

If you would love to read even more content like this, feel free to visit me on Twitter and LinkedIn.

The React Lessons are going to be a series of articles, so press the follow button and don't miss any of the incoming articles. I'd love to count you as my ever-growing group of awesome friends! :)

Ten+ Math Functions Every JavaScript Developer Should Know

Hassib Moddasser — Fri, 29 Oct 2021 09:56:18 +0000

In this article, I want to show you the commonly used Math functions that every JavaScript developer should know. In addition to general examples, I have provided different use-case examples to clarify the context of functions.

Let's dive in and have fun!

Introduction

Math is a built-in object that provides properties and methods for mathematical constants and functions to execute mathematical operations. Unlike many other global objects, the Math object has no constructor. All properties and methods of Math are static.

The Math works with the Number type. It doesn't work with BigInt.

Following is a list of commonly used Math object methods:

`Math.abs`

The Math.abs function returns the absolute value of a number. It takes a number as its parameter and returns its absolute value.

console.log(Math.abs(5));
// Output: 5

console.log(Math.abs(5.2));
// Output: 5.2

console.log(Math.abs(-5.2));
// Output: 5.2

Bonus Tip: It is useful when you have a case where you should find the difference between the two numbers. Let's take a look at the example below:

function difference(a, b) {
  return Math.abs(a - b);
}

console.log(difference(4, 7));
// Output: 3

console.log(difference(7, 4));
// Output: 3

`Math.ceil`

The Math.ceil function always rounds a number up to the next largest integer. It takes a number as its parameter and returns its upward round value.

console.log(Math.ceil(0.8));
// Output: 1

console.log(Math.ceil(-0.8));
// Output: -0

console.log(Math.ceil(4));
// Output: 4

console.log(Math.ceil(3.004));
// Output: 4

console.log(Math.ceil(-3.004));
// Output: -3

`Math.floor`

The Math.floor function rounds a number down to its nearest integer. It takes a number as its parameter and returns its downward round value.

console.log(Math.floor(0.8));
// Output: 0

console.log(Math.floor(-0.8));
// Output: -1

console.log(Math.floor(4));
// Output: 4

console.log(Math.floor(3.004));
// Output: 3

console.log(Math.floor(-3.004));
// Output: -4

`Math.round`

The Math.round function rounds a number to its nearest integer. It takes a number as its parameter and returns its nearest rounded value.

console.log(Math.round(0.8));
// Output: 1

console.log(Math.round(-0.8));
// Output: -1

console.log(Math.round(5));
// Output: 5

console.log(Math.round(5.95));
// Output: 6

console.log(Math.round(5.5));
// Output: 6

console.log(Math.round(5.05));
// Output: 5

Description: If the fractional portion of the argument is greater than 0.5, the argument is rounded to the integer with the next higher absolute value. If it is less than 0.5, the argument is rounded to the integer with the lower absolute value. If the fractional portion is exactly 0.5, the argument is rounded to the next integer in the direction of +∞.

Consider the following examples for better clarity:

console.log(Math.round(10.49));
// Output: 10

console.log(Math.round(10.5));
// Output: 11

console.log(Math.round(22));
// Output: 22

console.log(Math.round(-10.5));
// Output: -10

console.log(Math.round(-10.51));
// Output: -11

`Math.trunc`

The Math.trunc function takes a number as its parameter and returns its integer part of a number by removing any fractional digits.

console.log(Math.trunc(0.8));
// Output: 0

console.log(Math.trunc(-0.8));
// Output: -0

console.log(Math.trunc(5));
// Output: 5

console.log(Math.trunc(5.95));
// Output: 5

console.log(Math.trunc(5.5));
// Output: 5

console.log(Math.trunc(5.05));
// Output: 5

Description: Unlike the other Math methods, the way Math.trunc works is very simple. It truncates (cuts off) the dot and the digits to the right of it, no matter whether the argument is a positive or negative number.

The Math.trunc is one of the new features of ECMAScript 6 and before that, the following method was used:

// In ECMAScript 5
function mathTrunc(num) {
  return (num < 0 ? Math.ceil(num) : Math.floor(num));
}

`Math.max`

The Math.max function returns the largest of 0 to n numbers given as input parameters.

let largestNumber = Math.max(2, 5, 15, 3);

console.log(largestNumber);
// Output: 15

`Math.min`

The Math.min function returns the smallest of 0 to n numbers given as input parameters.

let smallestNumber = Math.min(2, 5, 15, 3);

console.log(smallestNumber );
// Output: 2

Note: Both Math.max & Math.min are variadic functions. A variadic function takes a variable number of arguments. In other words, a variadic function is a function where the total number of parameters are unknown and can be adjusted when the method is invoked.

Bonus Tip: You can also find the largest/smallest number in an array with the help of the Spread Syntax, which unpacks array values. Take a look at the example below:

let salaries = [1000, 2500, 400, 14000, 800];

let highestSalary = Math.max(...salaries);
console.log(highestSalary);
// Output: 14000

let lowestSalary = Math.min(...salaries);
console.log(lowestSalary);
// Output: 400

`Math.pow`

The Math.pow function returns the base to the exponent power. It takes two number parameters and returns as base^exponent.

console.log(Math.pow(2, 5));
// Output: 32

console.log(Math.pow(2, 0));
// Output: 1

`Math.sqrt`

The Math.sqrt function takes a number as a parameter and returns the square root of the number.

console.log(Math.sqrt(9));
// Output: 3

console.log(Math.sqrt(2));
// Output: 1.4142135623730951

console.log(Math.sqrt(-9));
// Output: NaN

`Math.cbrt`

The Math.cbrt function returns the cube root of a number taken as a parameter.

console.log(Math.cbrt(64));
// Output: 4

console.log(Math.cbrt(-1));
// Output: -1

console.log(Math.cbrt(1));
// Output: 1

`Math.random`

The Math.random function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, and exclusive of 1).

console.log(Math.random());
// Output: 0.9785027066546665

console.log(Math.random());
// Output: 0.4401509062770659

console.log(Math.random());
// Output: 0.04055758334158077

You can also generate random integer numbers, one can pass the Math.random() as an argument to the parseInt method.

let randomNumber = parseInt((Math.random() * 100), 10);

console.log(randomNumber);
// Output: 80

In the above code, the Math.random function returns a random integer between 0 and 1. To convert that to a random number up to 100, multiply it by 100. So if you want a random number up to 10, multiply it by 10. The parseInt function casts the generated random number to an integer by the radix of 10, which indicates to convert from a decimal number.

Bonus Tip: To get a random integer within a specific range you can use the following method instead:

function generateRandomNumber(min, max) {
  return parseInt((Math.random() * (max - min + 1)), 10) + min;
}

console.log(generateRandomNumber(20, 50));
// Output: 32

console.log(generateRandomNumber(80, 100));
// Output: 89

Final thoughts

The Math object allows you to perform mathematical instructions. It has 8 static properties and more than 30 static methods.

Let's look at a glance at what common Math functions are:

Function	Description
Math.abs(x)	Returns the absolute value of a number.
Math.ceil(x)	Rounds a number up to the next largest integer.
Math.floor(x)	Rounds a number down to its nearest integer.
Math.round(x)	Rounds a number to its nearest integer.
Math.trunc(x)	Returns the integer part of a number.
Math.max(n1, n2, n3, ..., nx)	Returns the number with the highest value.
Math.min(n1, n2, n3, ..., nx)	Returns the number with the lowest value.
Math.pow(x, y)	Returns the base to the exponent power.
Math.sqrt(x)	Returns the square root of a number.
Math.cbrt(x)	Returns the cubic root of a number.
Math.random()	Returns a random number between 0 (inclusive) and 1 (exclusive).