DEV Community: Praveen Alluri

React JS Basics

Praveen Alluri — Tue, 01 Nov 2022 19:18:53 +0000

What is React JS?

React is a javascript library to create a (UI) user interface based on UI Components. Jordan Walke created it at Facebook in 2011. They made it open source in 2013. React is one of the most used JS libraries to create web-based applications.
The DOM updates can be managed with ease by React. It's a lightweight and speedy library for implementing JS applications with scalability and reusable code. It uses less memory to keep the representation of virtual DOM elements.

Let me introduce the vocabulary in the javascript world.

What are .JS and .JSX files?

JavaScript code is included in JS (JavaScript) files, which run JavaScript on web pages. The .Js extension is used to hold JavaScript files. If the JS file has the HTML code and Javascript code, it's called .JSX (JS XML files or JS HTML files.)

React -DOM?

In order to provide an effective approach to controlling DOM components of the web page, ReactDOM is a package that offers DOM-specific functions that can be used at the top level of a web application.

The following methods are available in ReactDOM's API for developers.

render()
findDOMNode()
unmountComponentAtNode()
hydrate()
createPortal()

Babel

A JavaScript transpiler called BabelJS converts new features into out-of-date standards. This makes it simple to use the functionalities on both outdated and modern browsers. Sebastian McKenzie, an Australian programmer, founded BabelJS.

We require a program that will build our final code in ES5 if we want to leverage new ECMA Script capabilities and run it on any accessible browser.

The same thing is done by Babel, which is referred to as a transpiler that transpiles the code into the desired ECMA Script version.

COMPONENTS

The vital part of the React application is components. a component is a piece of (UI) user interface. When we build web applications, we build independent, reusable components. Then we use all these components to build a complex UI. Every react application has one root component. This root component has child components and an internal application. so every react application is a tree of components.
For example, if we take the FB page as a web application project, we split this application into components like Navbar, Feed, and profile, so the feed component has several child components such as like, share components, and these are reusable components which means you can use these components in somewhere else or sometimes in different applications.

Component implemented as a javascript class, and some state, render method.

`State` is the data we want to display when the component is rendered.

`Render method` is responsible for describing how UI should look like.

The output of the render method is a react element, which is a simple JS object mapped to a virtual-DOM element. When we change the state of a component, then we get a new react element. Then will compare this element and its children with the previous one to find out the changed one, and it will update in the real DOM to keep it synchronized with the virtual DOM.

That means when building applications with reactJS, unlike Jquery and vanilla JS, we no longer have to work with DOM API in browsers.

Real-time Environment

Let's build the basic configurations for creating react applications in real time.

Go to your terminal and run the below command.

create-react-app <name of the app>

It will automatically install react and all other third-party libraries we need. It will install a development server, Webpack for files, babel for compiling JS code, and other tools. all config will be done for you. You don't need to do anything. You can customize this configuration per your organization's environment needs.

Let's go to our app myapp and run NPM start (Node Package Manager). It will launch a development server on port 3000 on your local browser.

cd myapp

npm start

Let's go back to our editor to see what kind of folders we got.

Here we have three folders.

node_Modules: It will have all third-party libraries.
Public: This folder holds public assets of the application, including index.html.
src: The raw source code files are kept in this folder before minification. It's the heart of our APP.

Below highlighted markup code inside the javascript file is .jsx (javascript XML), which is responsible for how UI looks.

The output looks like the above image ( 3: browser output image).

As we mentioned earlier, babel works as a compiler. To understand this code, babel turns this JSX code into pure javascript code for the browser to understand. Check the below image for more understanding.

We will delete all those default files in the SRC folder and build from scratch.

Now my app is down. The first thing it will look for src folder is Index.Js, so I will create a new index file.
And I run the below commands.


import React from "react";
import ReactDOM  from "react-dom";

const Home = <h1> Hello world </h1>;

ReactDOM.render (Home, document.getElementById("root"));

Now my web app is up and running. We will make a little tweak to this file for better understanding.
We will create a component that can be reusable, and you can call or use it as many times as you need.
So I will create a subfolder called components inside src, and I will also create an App.js file inside this components folder. and I will insert the below code into App.js. Now the app will run smoothly without errors using components.

function App() {
    return <h1> Hello world </h1>;
 }

 export default App;

So This is it. These are the basics or an intro to react world. in real time it will be much fun with little difficulty.

Enjoy the rest of the day, Folks... Cheers!

JavaScript Interview Crib Notes

Praveen Alluri — Thu, 22 Sep 2022 02:48:21 +0000

This article will explain the *Scope, Single Thread, Call Stack, and Hoisting * concepts to reduce confusion during interviews. Similar to a brief reminder before an interview.

What are scopes in JavaScript?

As the name says, the scope is nothing but "the extent of the area." In other words, its limitations.
In terms of coding, where is the variable declared? And from where can it be accessed?
It's simple, right, so now we will discuss why and what those limitations are or Scopes.
There are three essential Scopes in JS. One is the Global level Scope, the second is the Function level, and the Block level Scope.

Global Scope

In the global scope, the variables inside of this scope can be accessed from anywhere inside the JS application. Example:

var a = 10;
let b = 20;

function write () {
    console.log(b);
}
write();

Output:

The above example shows that the variable can be accessed inside and outside a function/block.

Here, only a is visible under the window object. In a way, You can consider the Window object as a global scope. But we cannot view the b from the above example. It uses the ** Let/const ** properties to declare a variable. However, b can be accessed by calling the write() function, which proves our global scope theory. Although using a global variable is not a good practice except in exceptional cases. You will know the reasons later in this article.

function scope

you can also refer to the local scope; It is only accessible within the function. It can not access any variables/values declared outside the function. For an Example:

var a = 10;
let b = 20;

function write () {
    var c = 30;
}

console.log(c);

Output: you can see that when we try to print the c value, it's throwing a reference error saying that c is not defined. Because we declared the variable c inside the function, it is not accessible outside of that function.

The problem with var is that if it is a for loop, while loop, if statement, switch statement, or any block asides of a function, it is not scoped locally. It works like a global scope except in function. So we can say var only has functional scope.
For example:

if (true) {
    var c = 'hello';
}

console.log(c)

Output: 
(base) praveenalluri@Praveens-MacBook-Air training % node test.js
hello

See, though defining c inside a local scope/object, c is still accessible outside the local scope. This may create name clash conflicts in your JS application. This is why let and const are introduced to address this issue in the form of block scope.

Blockscope

So what is a block? Anything in between the curly braces is called a block. Unlike Var, LET/CONST are locally scoped. Not just to functions but all call blocks. So you can call LET and CONST are block scoped.
Let's see a real-time example.

let a = 10;

if(true) {
    let a = 2000;
    console.log(a);
}
console.log(a);

Output: 
(base) praveenalluri@Praveens-MacBook-Air training % node test.js
2000
10

In the above example, you can see that there is no name conflict though we defined a twice using LET/CONST. That's because the inside block scope variable a doesn't know or can not access the outside variable a.

That's all about scopes related to Var, Let, and Const in Javascript. The scope is all about where the program uses the variable.

Let's move to our next topic, Single Thread.

Is Javascript Single threaded Async language?

In fact, JavaScript is a single-threaded synchronous language with asynchronous capabilities. It means In the core of JS, it works synchronously. However, we do have asynchronous capabilities. We have web APIs that can help us do things asynchronously. In JS, one thread of execution runs at a time, and this has caused confusion among some people. Let's understand with this a simple demo.

function hi(){
setTimeout(() => {
    console.log('hi number 1')
}, 1000);
};

hi();
console.log('hi number 2')

Output:
(base) praveenalluri@Praveens-MacBook-Air training % node test.js
hi number 2
hi number 1

If you see the above code, it started executing the first line of code and all those declarations. Later it called function hi() and it called set timeout and then passed the parameters. It past something that says hey! Here's some code to be executed later, and here's the timeout. But it doesn't run that last, get queued up somewhere. (you will learn how and where it's storing those values later in this article).
There is some event Queue that was eventually going to process this. It's scheduled for execution in about 1000 milliseconds. And finally, it is called console.log(hi number 2). So our application started up. It wrote console.log(), a second went by, and hi() executed.

Now, I will add some confusion to the code. I will add something into the main threaded execution that will never have a chance to process the things in the event queue. I'm adding a while loop with no parameters.

Now we run it again, and I got my hi number 2, and I never get hi number 1, and that's to be expected if you understand how this works. This is queued up as soon as the system has time to process the event Queue it will process. But our main thread execution is stuck right now, just doing nothing. Now there's a technique that you should know about JS. There are times when you do have to do things that will take a long time, and you do want to allow your javascript to process items that are queued up that are ready to run. Let's understand this with a small demo.

Like before, this will get stuck; however, it gets stuck by putting things in the event queue. So think about this, It will execute the same things before it looks at your 'console.log(hi)', and it will call a function that will call this set timer and execute the set timeout right away. And then queue up something for execution later. So we'll get stuck in this loop, but it's going through the events queue now. If it's something else on the event queue, it will have an opportunity to run.

In simple words, when I run this above code, It gives the output value hi number 2 followed by hi number 1, and then it is stuck. Because even though we've put this lock-up function **"hi3()" **in the middle of our application. We're still going through the event queue and processing the other things in the event queue.
That's it. I think you now understand the async and single-threaded concepts in javascript language.

call stack in JS

A call stack keeps track of our functions. It is a stack of functions it manages, which we call the execution contexts. At the bottom of the call stack is our global execution context. That will always be at the bottom, and our functions will be stacked on top. A Stack is a data structure, so it doesn't have to be the JavaScript call stack. You can create any stack, just like in an array or queue. Stacks are LIFO which stands for “last in first out” what that means is the last thing in is always going to be the first thing out. Let's look at some sample code and what that would look like on the call stack.

function one() {
  console.log("one");
  two();
}

function two() {
    console.log("two");
    three();
}

function three() {
    console.log("three");  
}

one();

Output: 
(base) praveenalluri@Praveens-MacBook-Air training % node test.js
one
two
three

Let's see the below example.

%[https://youtu.be/wdbIMqz4aM8]

Now, I'm going into the sources tab and putting a breakpoint right at first where this whole thing starts, and I will reload the browser, so it's paused right now. You can see we have created the global execution context. It's in our call stack, and I'm going into the first function one(), so I'll click this arrow key on the right top. Now you can see that function one pushed onto the stack. Then we're going to go to the console.log, and once again, I click this arrow key again, it's going to run function two(). So notice now that one is still there. It means we're still in the first function, one(), because that's where two() is called, so two() is now on the stack and then call three() so click the arrow again, three() now three gets pushed onto the stack, and then I will go ahead and execute three() now it gets popped off, later two() that gets popped off and then one(). So it's always last in, first out, OK, so that's a pretty basic example of how the call stack works. As you build big projects, pop into the sources tab and look at the call stack. Obviously, it'll be much more complicated when you're working on an actual project.

Hoisting

Hoisting is a phenomenon in JavaScript by which you can access these variables and functions even before you have initialized or given some value to them. You can access them without any errors. So wherever this let variable is present in the program, it does not matter; you can access it anywhere. So let me show you some examples.

hoist();

console.log(x);

var x=7;

console.log(hoist);

function hoist(){
    console.log('hoisting test');
}

Output :
(base) praveenalluri@Praveens-MacBook-Air training % node test.js
hoisting test
undefined
[Function: hoist]

If you observe correctly, I called the function and variable before initializing them, but you can see the values in the output without errors. If it is any other programming language, it will throw an error. because hoisting concept in Javascript it wont throw any errors. When ever the Js program runs it creates Global execution context which has two components, Memory and code. the first phase will be scan the entire JS program and allocate space to variables and functions in the memory component before executing the program. That is why our second result is saying undefined because it already allocated undefined memory to x before knowing it's value.

That's all folks. see you in the next article. Watch out for more space.

Stay peace

VAR vs LET vs CONST

Praveen Alluri — Sat, 10 Sep 2022 23:17:01 +0000

Why not VAR?

In general, the let keyword is used to declare variables. Although, there is another way to do it using the 'var' keyword. We find this in a lot of online JavaScript tutorials and blogs. We'll examine the var keyword in this article, and you'll learn about its drawbacks and reasons to stay away from it. So let's discuss Defining a function.

function numbers() {
    for (let i = 0 ; i < 6 ; i++ ) {
        console.log(i);
    }
}
numbers();

In the above code, i is only accessible inside { } the block. You will receive an error if you try to access i outside of the block. Saying i is not defined. See below code snippet for reference.

function numbers() {
    for (let i = 0 ; i < 6 ; i++ ) {
        console.log(i);
    }

    console.log(i);
}
numbers(); 


//Output//

ReferenceError: i is not defined

To be clear, even if I remove these curly braces, the error will remain the same.

function numbers() {
    for (let i = 0 ; i < 6 ; i++ ) 
        console.log(i);

    console.log(i);
}
numbers();

// output //

ReferenceError: i is not defined

Let's see what happens when we swap out "let" with "var." Apparently, 'I' is reachable outside of this block. The loop ends after the last iteration and displays the result.
Hence, the problem with the var keyword is. A variable's scope is not constrained to the block in which it is defined when it is declared with the var keyword. It is restricted to the function level. It is one of those peculiar things that JavaScript has long possessed. From ES6, commonly known as ES 2015, two new keywords are introduced, let and const, to generate variables and constants. These two keywords produce block-scoped variables, whereas var creates function-scoped variables.

function numbers() {
    for (var i = 0 ; i < 6 ; i++ ) 
        console.log(i);

    console.log(i);
}
numbers();

// output //

0
1
2
3
4
5
6

There is another issue with Var concerning global variables.
Avoid using global variables or use them sparingly in JavaScript. This is due to the ease with which other scripts can replace global variables. Although they are not inherently evil or particularly security-related, global variables shouldn't override the values of other variables. A maintenance problem might arise if we use more global variables in our code. Consider the case when the same-named variable was added. Prepare yourself for some significant bugs in that situation. Use local variables and enclose your code in closures to prevent using global variables. Var variables can be reassigned multiple times by re-declaring the variable.

In other words, One of the biggest problems with the var keyword for declaring variables is that it allows you to overwrite variables accidentally that you didn't mean to overwrite. Because usually, when you declare a variable with the keyword var or let, constant you're thinking this is the first time this variable is being declared, so if you were able to overwrite variables by doing this, you might accidentally overwrite variables that you don't intend to which is the biggest problem with var and let takes care of that problem because it won't let us do that ever, which will save us from making those simple mistakes.

Const and let are virtually identical, except that const prevents you from redeclaring the variable. Thus, as an example.

const name = 'praveen'
let name1 = 'alluri'

name = 'marthanda'
name1 = 'varma'

// output //

TypeError: Assignment to constant variable.

But const allows us to change the properties of an object. For an example

const person = {name :'praveen'}
let name1 = 'alluri'

person.name = 'marthanda'
name1 = 'varma'

console.log(person)

// Output//

{ name: 'marthanda' }

As you can see, we don't truly experience an error. Const thus only stops us from modifying the variable's actual value or assigning it a new value but not changing different properties in that value. Const and let are pretty comparable so you may use them both. However, unless you need to modify the variable's value, I would advise using const rather than let since you can be sure you won't mistakenly change the value if you choose not to. That's the essential difference between cost, var, and let.

Because of this and several other factors, I believe you should nearly and always use const and let when defining variables unless you have a specific situation for doing so. Even in that instance, I strongly advise you to consider why you want to use var. Because switching from using var to const or let in your design is always preferable.

That's all, folks

These are brief yet crucial lessons for our everyday work lives.

Learn more things, and share most stuff... Easy life with no worries.

Let's Rock!!!

Before you leave

If you like the content, please follow my social hangouts for exciting discussions.

References

links

Why should you learn to

Praveen Alluri — Thu, 08 Sep 2022 01:26:33 +0000

Yes, you should learn code. Everyone should know the code. Even if you are not trying to change your career, WHY? It's the same question throughout history "Why should I educate myself?" Computers rank on par with humans regarding cognitive ability in this digital age. Yes! How a computer operates, and the human brain does are almost identical. Coding, then, aids in problem-solving and sharpens your reasoning skills. It will be 2x times higher if you are a woman as your brain can multitask.

As Artificial Intelligence is replacing humans in many jobs, You should be in a position to give instructions rather than taking one. At the very least, you must know what's happening around your programming world. We don't exist anymore without programming running around us. It's hard to avoid technology irrespective of your Background. Here are the reasons why you should code.

Work flexibility: The fact that you can work from home must make our ancestors jealous. It's time to say goodbye to 8 hours of dull office space! You can work from your couch. Avoiding the commute to work will save you a lot of time. You can do whatever fudge you want in that time. If you are married, well!... that's vice versa.

Money: There is a lot of money, dude, yes, a lot. Who doesn't like the money? That's the driving force of our boring busy lives. Isn't it? You can earn a lot of money by learning to program. You don't believe me. Check out the top billionaires. They all are tech firm founders. Techies can make a lot of money. Software Developers made a median salary of $110,140 a year.

Holy cow! Well, my young grasshopper, that's not the case for everyone. Hey, but compared to other industry engineers, you are making more money than a seasoned man.

Career Options: you got a lot of career options. Especially these covid times, You can easily land a job if you know how to code it. You can become a web designer, backend developer, App developer, Technical content writer, freelancer for programming jobs, YouTuber, Blogger, and Program manager. There are a ton lot of things you can do if you know how to code.

Automation: Yes, it's an underrated reason, but you can automate things you do regularly by using small scripts and, for example, checking your favorite merchandise on sale. An automated program checks those sites and lets you know when they are in the deal. Same for Data Entry, making groceries list, etc.

This is my opinion to conclude. You are welcome to your thoughts, but I genuinely believe learning to code will open new doors in life. Happy Coding! Folks

My portfolio

my insta

Array Methods In JS

Praveen Alluri — Thu, 08 Sep 2022 00:35:30 +0000

What is Array?

In simple terms, An ordered list of values makes up an array. The term "Element" designated by an index refers to each value.
In another way, everything in square brackets becomes an array. Items inside an array are called elements. It can be boolean values or integer/numbers, floating values or string values, etc.

Array Methods

There are many array methods, but I only cover the most used ones in this article.
Array methods play a vital role in the JS programming world. If you master these methods, your soft life will be a cakewalk. There are many parameters in each array method. I'm discussing only the basics to understand their significance in the JS world.

array.filter()

As the name says, the filter method will return specific elements from the array based on filter method properties.

let people = [
    {name : 'jaan', height: 6.2 , weight : 85, haircolor: 'brown'} ,
    {name : 'shane', height: 5.11 , weight : 75, haircolor: 'black'},
    {name : 'praveen', height: 6.1 , weight : 79, haircolor: 'black'},
    {name : 'marco', height: 5.9 , weight : 80, haircolor: 'brown'},
    {name : 'kim', height: 5.6 , weight : 67, haircolor: 'black'},
];

let result = people.filter (feature => feature.haircolor == 'black');

console.log(result)

# output : [
  { name: 'shane', height: 5.11, weight: 75, haircolor: 'black' },
  { name: 'praveen', height: 6.1, weight: 79, haircolor: 'black' },
  { name: 'kim', height: 5.6, weight: 67, haircolor: 'black' }
]

Here, I filtered the elements in the array called people based on the hair color property.

callbackfn: Any function passed as an argument to another function so that it can be executed in that other function is called a callback function. You can see this in the above example.

Many JavaScript operations are asynchronous, which means that unlike how you're probably used to them, they don't stop the program (or a function) from running until they're finished. For this reason, callback functions are necessary. Instead, while the rest of the code runs, it will run in the background.

array.find()

This method returns the first satisfying element value in the array among the other elements based on index position.

let x = [1,2,4,3,6,9]

let y = x.find(element => element > 2);

console.log(y)

# output: 4

As per the math theory, the "3" should be the answer, but if we observe the array index positioning, "4" is on the 2nd index, and "3" is on the 3rd index; hence the answer is 4.

array.forEach()

The forEach() method iterates through an array's items while calling a function. Maps and Sets can both be utilized using the forEach() method.

Note: There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.

let x =[2,4,7,3];
let y = x.forEach(z => console.log(z+2));

#output: 
4
6
9
5

array.every()

The every method determines if every component satisfies the requirement. The method only returns true after that. False is given if just one element fails the test.

let x =[5,4,12,3];
let y = x.every(z => z>10);
console.log(y)

# output: false

Each element should satisfy the condition mentioned in every() method. Then it results as a true output. If any element in the array fails to meet the requirement, this returns false. In the above example, not all the numbers are greater than ten; hence the output is false.

array.some()

some is a special array method. It tests whether at least one element within the array tests positive for a specific condition. If so, some returns true; otherwise, it returns false.

let x =[5,4,12,3];
let y = x.some(z => z>10);
console.log(y)

# output: true

some() is the other way around of every() method.

array.includes()

In simple terms, includes works like a checklist. It will check whether the element is present in the array or not. Based on the result, it returns true or false. It contains the exact matching of an object.

let x =['Ramesh', 'suresh', 'mahesh', 'naresh', 'Rajesh',]
let y = x.includes('ramesh');
console.log(y)

#output : false

If you observe close enough, the condition is not met in the above example. As I said, it follows the strict equality principle. The case sensitivity is the reason for the False result in the above example.

array.map()

One of the most significant array techniques available is map. It is the method to use if you wish to alter every value in an array.

let x =[5,4,12,3];
let y = x.map(z => z*2);
console.log(y)


output: [ 10, 8, 24, 6 ]

So y is the whole new array now holding the above output elements, and x is still the same. It won't change any element in the x array. It only uses the elements to form a new array.

array.reduce()

The most effective array approach currently in use is reduce() It is the most versatile and may be used to reimplement all current array methods. It would require a whole post to discuss all the benefits it provides, but you will quickly get a taste of it.

Returning the total of an array's elements may be the simplest use case for reduce().
Example:

let x =[5,4,12,3];
let z= 1;
let y = x.reduce((ftvalue,sdvalue) => ftvalue + sdvalue,z );
console.log(y)

output: 25

The backend operation of the above example is 1+5+4+12+3 = 25

reduce is difficult to understand. It does the same as all other array methods, reduce iterates through every element. The procedure must first determine whether an initialValue was provided. If not, the array's first element is assumed to be such. The callback's output is then substituted for the accumulator each time it is called and is ultimately returned in its complete form.

array.sort()

The name already tells you everything. This technique must always be used if you wish to sort an array.

let x =[22,45,17,81,23,15,93,54,36,75];
let y = x.sort();
console.log(y);

output:  [
  15, 17, 22, 23, 36,
  45, 54, 75, 81, 93
]

The default sort order is ascending, built upon converting the elements into strings and comparing their UTF-16 code unit value sequences.

array.findIndex()

You may use the function findindex() to determine an element's index inside an array. Similar to find, it ends at the first element that meets the requirement. Thus, it will never return anything other than the index of the first element that passes the test.

let x =[22,45,17,81,23,15,93,54,36,75];
let y = x.findIndex(z => z>70);
console.log(y)

output: 3

Here, the condition satisfies the 4th element in the array. Its index is 3 as indexing starts from0.

That's It for now

you have now learned some most used array methods in javascript. They are all similar to miner distinguishes. Once you understand the significance, you will know where and how to use them.

Before you leave

If you like the content, please follow my social hangouts for exciting discussions.

That's it all, folks... Keep Learning & Keep Sharing !!!

Cheers

References

link