DEV Community: Hardik Mirg

Stop Using Create-React-App!

Hardik Mirg — Sun, 03 Apr 2022 08:34:21 +0000

STOP USING CREATE-REACT-APP, USE THIS INSTEAD~

Every React Developer starting its react journey starts either with The React.js Documentation or with YouTube Tutorials.

The problem with that is both of them teach us to initialize our app with Create-react-app, or CRA for short.

Now, You might think, what's wrong with that?

Well, The actual problem with CRA is that it's too good!
A better way to say it will be, "It's just not for beginners"

CRA provides a bunch of tools not required for basic applications, which surely makes it overwhelming for beginners and makes our app slow in various ways.

Due to the excessive amount of libraries required by CRA, It takes a lot longer bundling time than VITE!

Vite makes it a lot easier for developers.

It doesn't require excessive libraries, making the bundling time drop at a significant rate!

It supports HMR, which is extremely useful for developing state based react components.

An insane feature that makes Vite faster than any bundling tool out there is that in a React app, instead of bundling our app and then sending it to the browser, it loads our raw JSX or TSX files!

CRA is not even close when compared to speed tests.

To get started with Vite JS, open a new Terminal Window and make sure you have NodeJS installed.

npm init vite

Enter your project's name and select the framework of your choice.
You can even choose between JS and TS.

And just like that, your React projects it set up literally under 5 seconds!

Just CD into your folder and install the necessary dependencies using npm i or npm install

Use npm run dev to start your local development server!

Or, to do all that quickly, just run:

cd <project-name> && npm i && npm run dev

JUST VISIT http://localhost:3000 AND HERE YOU GO!

Congrats! Now you can develop your React apps faster than ever!

Hope you learnt something useful today, See you later!

Escape Sequence Characters in JavaScript

Hardik Mirg — Wed, 23 Mar 2022 18:05:04 +0000

Escape Sequence Characters

Escape Sequence Characters, as the name suggests, is used to escape a particular sequence or to display special characters. They can also be used withing strings.

\' Single quote
\" Double Quoted
\ Backslash
\b backspace
\f form feed
\n newline
\r carriage return
\t horizontal tabulator
\v vertical tabulator

Hope you learned something useful today! Peace Out ✌️

Truthy - Falsy Values in JavaScript

Hardik Mirg — Wed, 23 Mar 2022 17:58:42 +0000

Truthy and Falsy Values

Anything in JavaScript is either True or False.

There are different values to denote whether something is True or False.

Falsy Values

false
0
null
Undefined
NaN
Empty String

Truthy Values

Anything that isn't Falsy.
Empty arrays and objects are Truthy.

Hope you learned something useful today! Peace Out ✌️

Conditional Statements

Hardik Mirg — Wed, 23 Mar 2022 16:47:29 +0000

Conditional statements

Conditional Statements, as the name suggests, only execute a statement, or a bunch of statements only if a condition is true.

Before learning about the different types of Conditional statements, let's have a look at some, not so frequently used, terms.

Condition: An expression whose value is considered as a condition.
ExprIfTrue: An expression that is executed if the condition is Truthy.
ExprIfFalse: An expression that is executed if the condition is Falsy

Posts on Truth and Falsy values coming soon~

Ways to implement Conditional Statements in JavaScript

To make use of Conditional statements, we need to use the operators provided in JavaScript, or, if we don't use any operator but just a variable, The condition will be considered true if the variable provided is anything accepted being a falsy value.

If statements

"If statements" are the most frequently used Conditional statements in JavaScript.
It has a very simple, elegant, function-like, and self-explanatory syntax. We just need to use the "if" keyword instead of "function".

let hour = 5

if (hour < 12) {
    console.log("It's not afternoon yet.")
}

What if we have more than 1 condition?

For that we have:

If-else statements

They are very similar to if statements and in fact can only be used once a statement is started.

We use the "else" keyword to provide another "if" condition or we can simply use the "else" keyword to provide a statement that will only execute if none of the provided statements were true.

Let's learn to write "If-else" Statements by writing a program to determine whether a number is odd or even.

let num = 5

if (num % 2 === 0){
    console. log(`${num} is even`)
}
else console. log(`${num} is odd`)

Here we used the modulus operator than returns the remainder when the first operand is divided by the second, in this case, the remainder when 5 is divided by 2 is not 0, so it moves to the next else statement and prints that it's odd.

Switch Case Statements

switch(expression) {

 case x:
   // some code
 break;
   // some code
 case y:
   // some code
 break;
 default:
   // some code
}

The switch expression is evaluated once.
The value of the expression is compared with the values of each case.
If there is a match, the associated block of code is executed.
If there is no match, the default code block is Executed

Ternary Operator

The Ternary Operator can be considered a short-hand method to writing if statements, it's used in the following way:

condition? ExprIfTrue: ExprIfFalse

Hope you learned something useful today! Peace Out ✌️

Functions In JavaScript

Hardik Mirg — Tue, 22 Mar 2022 16:56:16 +0000

Functions

Functions are important, vastly used, reusable code blocks, or just a piece of code that you can use again and again.

Functions accept parameters as variables, which makes them even more useful based on the Value Accepted by it as a parameter.

Parameters in functions can be of any data type, ranging from a simple integer, an array, or even an Array full of Arrays!

Ways to declare a function

There are several ways to declare a function. Something they all have in common is Parentheses () and Curly Braces {}

You can accept a parameter in a function just by writing it inside the Parentheses.

All the code executed by the function is contained within the curly braces.

1) The Classic Way

function sayHello () {
    console.log("Hello Dev!")
}

2) Function contained in a variable

const sayHello = function () {
    console.log("Hello Dev!")
}

3) The ES6 way; Arrow Functions

const sayHello = () => {
    console.log("Hello Dev!")
}

The javascript ES6 version introduced many amazing features to the language but one of the most useful was Arrow Functions.

They have a few differences from Normal Function, which we'll talk about in an upcoming post.

They're just functions stored in a variable but do not use the "function" keyword. Assign a pair of Parentheses to a variable and make an arrow => to determine that it's an arrow function and continue with curly braces as normal.

Note: Arrow Functions can't be used in any version before ES6

Calling (Running) a function

To call a function, first declare it in your code.

(Here, we'll use the arrow function we declared a while ago.)

const sayHello = () => {
    console.log("Hello Dev!")
}

We have our function declared!
Now, to call it anywhere within our file, we just need to mention the function name with parentheses.

sayHello()

// This prints out "Hello Dev!"

Accepting Parameters

To make our function use parameters provided by the user, we just need to name them within the Parentheses.

Let's make a simple arrow function that squares a number provided as a parameter and prints it to the console.

const square = (num) => {
    console.log (num * num)
}

// We mentioned "num" within the Parentheses of our function to denote that we need a parameter for "num".

// Notice how we don't use any quotation marks though we've never declared "num"

// To call this function, we'll simply name it with parentheses, but within the Parentheses, we can provide a value that will be given to "num"

square(5) // returns 25.

// We can have multiple parameters like this:

const person = (name, age, city) => {
    console.log(`
        Name: ${name}
        Age: ${age}
        City: ${city}
    `)
}

// We can provide values to multiple parameters like this:

person("Josh", 21, "London")

The above example returns:

Name: Josh
Age: 21
City: London

Note: While printing the name, age, and City provided by the user, we used something known as Template Literals, more posts on that topic soon!

We need to provide all possible parameters, We could just possibly add 2 parameters and it'll be considered as the first 2 parameters declared in the function body.

If we only want to provide the 1st and 3rd parameters, we can skip the 2nd parameter like this:

person("Mike", ,"Paris")

This will return:

Name: Mike
Age: Undefined
City: Paris

Nested Functions

We can create new functions inside of other functions but functions are block-scoped, i.e. You can only refer to the function within the function you declared it and not anywhere else in your code.

Hope you learned something useful today! Peace Out ✌️

Operators in JavaScript

Hardik Mirg — Sun, 20 Mar 2022 12:18:21 +0000

Operators in JavaScript

Basic Operators
Comparison Operators
Logical Operators
Bitwise Operators

Basic Operators

+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
() Group

Comparision Operators

== Equal Value
=== Equal Value And Same Type
!= Not Equal Value
!== Not Equal Value And Different Type
> Greater Than
< Less Than
>= Greater than and Equal to
<= Lesser than and Equal to.

Logical Operators

&& Logical And
|| Logical OR
! Logical Not

BitWise Operators

& AND statement
| OR statement
~ NOT
^ XOR
<< Zero fill left shift
>> Signed right shift
>>> Zero Fill right shift

Hope you learned something useful today! Peace Out ✌️

Data Types in JavaScript

Hardik Mirg — Sat, 19 Mar 2022 10:51:51 +0000

Data Types in JavaScript

Primitive Data Types
Non-Primitive Data Types

Primitive Data Types

Integer: 1, 2, 3, etc.
String: "Hello World" etc.
Boolean: True/False.
Null: Used to depict no value.
Undefined: Variables with no defined value.

Non-Primitive Data Types

Object: Instance of key-value pairs; Similar to JSON; Contained within curly braces {}.
Array: A group of variables of any Data Types contained together within brackets []; Similar to lists in Python.
RegExp: Refers to "Regular Expression"

Hope you learned something useful today! Peace Out ✌️

Var vs Const vs Let (JavaScript)

Hardik Mirg — Thu, 17 Mar 2022 10:04:16 +0000

Variable Declarations

There are several ways of declaring values to variables in javascript:

Var
Const
Let

Var

var stands for "variable" is used to declare variables that can be reassigned and are only available inside the function they're created in. They're function scoped.

var word = "hello"
console.log(word) // returns "hello"

word = "bye" // can be re-assigned ✅
console.log(word) // returns "bye"

Const

const stands for "constant" and is used to declare variables that cannot be reassigned and are not accessible before they appear within the code. They're block scoped.

const word = "hello"
console.log(word) // returns "hello"

word = "bye" // cannot be re-assigned ❌
console.log(word) // throws an error as constants cannot be re-assigned

Let

Variables declared using let can be reassigned but are similar to const i.e. block scoped. If variables are not created inside a function or block they are globally scoped.

Block

A block is a set of opening and closing curly brackets.

Hope you learned something useful today! Peace Out ✌️