Forem: Passionate Coder

List Rendering in React

Passionate Coder — Sat, 05 Jun 2021 06:21:09 +0000

Why we need List Rendering in React

Whenever we need to render same type of components or elements multiple time (with different data) than we use List rendering to automate rendering

How to do List Rendering in React

Javascript map() operator (Introduced in ES6) is used for List Rendering.

Benefits

Reduces Line of code
Automates Rendering

STATIC WAY : NOT EFFICIENT

USING MAP

You can follow me on my youtube videos channel.

Videos in Hindi

React Interview Questions

Passionate Coder — Tue, 01 Jun 2021 11:43:01 +0000

1) What is React?
Ans :

React is an open-source frontend JavaScript library.
Used for building user interfaces especially for single page applications.
It is used to handle presentation layer for web and mobile apps.
It was developed by Facebook in 2011.

2) What is JSX in react?
Ans :

JSX stands for JavaScript XML.
JSX allows us to write HTML elements in JavaScript

3) What is component in react?
Ans :

Components are main building block of react.
Components are independent and reusable bits of code.

4) What are props in react?
Ans:

Props are properties of a component.
Props are read only/ Immutable
Makes component dynamic
Data can be shared with the help of props.
Props are arguments passed into React components.

5) What is Fragments in React?
Ans :

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

6) What are defaultProps in React?
Ans:

defaultProps is a property in React component used to set default values for the props argument. It will be changed if the prop property is passed.

7) What is props.children in react?
Ans :
props.children represents the content between the opening and the closing tags when

8) What is Lifting State Up in React?
Ans :
In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called “lifting state up”.

9) Why fragments are better than container divs?
Ans :

1) Reduces un-necessary adding of elements in DOM.
2) Helps to keep html elements structure like in table

If you like you can visit my YouTube videos

10) What is reconciliation?
Ans :

Reconciliation is the process through which React updates the DOM.

Positioning text on image/div using css position and transform properties

Passionate Coder — Sun, 30 May 2021 14:02:35 +0000

Use Case :

Sometimes we need to put some text on image/div on different positions. We can do this by using positions like below

HTML

<div class="container">
      <div class="top-left">Top Left</div>
      <div class="top-right">Top Right</div>
      <div class="center">Center</div>
      <div class="bottom-left">Bottom Left</div>
      <div class="bottom-right">Bottom Right</div>
 </div>

CSS

.container {
  font-size: 20px;
  color: red;
  font-weight: bold;    
  background-image: url("https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY");
  background-size: cover;
  width: 500px;
  height: 500px;
  position: relative;
}

.top-left {
  position: absolute;
  top: 15px;
  left: 50px;
}

.top-right {
  position: absolute;
  top: 15px;
  right: 50px;
}

.bottom-left {
  position: absolute;
  bottom: 15px;
  left: 50px;
}

.bottom-right {
  position: absolute;
  bottom: 15px;
  right: 50px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Thanks for reading this. You can follow me on YouTube

::before / ::after in css

Passionate Coder — Sat, 29 May 2021 15:14:06 +0000

Insert some text/image etc before of after and after an element without adding html elments

Use case

Sometimes we need to style element like above in such case we can use before and after like below

html

<p>This is paragraph</p>

css

p {
    display: flex;
    align-items: center;
  }

  p::before {
    content: "";
    margin-right: 10px;
    flex: 1;
    border-bottom: 1px solid #ccc;
  }

  p::after {
    margin-left: 10px;
    content: "";
    flex: 1;
    border-bottom: 1px solid #ccc;
  }

Thanks for reading this if you have any other suggestions to do this better please comment below

For react beginner you can follow me on youtube ( If you want )

React/Javascript Videos (IN Hindi) :

Clean Code #1 : React, Javascript

Passionate Coder — Fri, 30 Apr 2021 15:41:24 +0000

Example

lets say we have a object like below

const user = {
  firstName: 'Vijay',
  lastName: 'Singh'
}

Note : firstName and lastName can be empty string or undefined or null.

const fullName = user.firstName 
? ( user.lastName ? `${user.firstName} ${user.lastName}`: user.firstName) 
: user.lastName

Using || Operator

const fullName = `${user.firstName || '' } ${user.lastName || ''}`.trim()

Hoisting in Javascript

Passionate Coder — Tue, 27 Apr 2021 08:53:05 +0000

Definition
In JavaScript is a behavior in which a function or a variable can be used before declaration.

Types of Hoisting

Variable Hoisting : Only variable declared with var is hoisted (not let and const)

Function Hoisting : Only Simple functions is hoisted (not function expressions)

Use of for in loop

Passionate Coder — Sat, 03 Apr 2021 12:27:05 +0000

We have so many loops now in javascript to optimize our code and ignore using old for loop. One such case can be seen in below example.

We have given two array and asked to achieve an object like below

const keys = ["name", "city","gender", "job"];
const values = ["Test User", "Pune", "Female", "Developer"];

Desired Output
{
    name:"Test User"
    city:"Pune"
    gender:"female"
    job:"Developer"
}

Using for loop:

const obj = {}
for(let i = 0; i<keys.length; i++){
     obj[keys[i]] = values[i]
}

using for in loop:

const obj = {}
for(let i in keys) {
    obj[keys[i]] = values[i]
}

using for in loop our code looks more clean and its less complex and more efficient

I hope it will help someone

Template Literals in ES6

Passionate Coder — Wed, 31 Mar 2021 15:41:10 +0000

Uses/ Benefits

1) Template literals are used to concatenate strings.
2) Placeholders/variables can be easily interpolated with template literals.
3) Makes code more readable and Clean

How to write

4) Strings or placeholders needs to be wrapped inside backtick
5) variables needs to wrapped like ${variable}

Usecases

1) Display : The sum of 10 and 15 is 25.

let a = 10;
let b = 15;

"The sum of "+a+" and "+b+" is "+(a+b) +"." // ES5
`The sum of ${a} and ${b} is ${a+b}` // ES6

2) Display :
I am a Developer.
I love to code.

"I am a Developer.\nI love to code." // ES5
`I am a Developer. 
 I love to code.` // ES6 no need to use \n for new line. It will keep format same as written

3) Display : Let's code together

"Let's code together"  // ES5
'Let\'s code together' // ES5
`Let\'s code together` // ES6

For more information follow
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

You can also watch this:

Javascript Interview Questions : Optional chaining (?.)

Passionate Coder — Wed, 24 Mar 2021 09:53:20 +0000

1) What is chaining operator?
Ans ) According to MDN official docs, The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid

Note : The optional chaining ?. stops the evaluation if the value before ?. is undefined or null and returns undefined.

2) In which version of Javascript optional chaining is intoduced?

Ans ) ECMAScript 2020

3) Example

lets we have one object like below

const user = {
  name: 'Test User',
  address: {
    city: 'mumbai',
  }
};

if we try to access user.address.city => We will get mumbai but if we access something like this

user.jobtitle.name => this will gives as error as jobtitle is not a property of user and we are trying to access name property of undefined so earliar to ?. operator we need to do something like below to avoid this kind of error

if(user.jobtitle && user.jobtitle.name) {
   // code related to use of user.jobtitle.name
}

This code can be minimized like below with the help of ?. operator

if(user.jobtitle?.name) {
  // code related to use of user.jobtitle.name
}

Official Documentation

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

checkout more such questions

Interview questions related to event bubbling in Javascript?

Passionate Coder — Tue, 23 Mar 2021 15:39:19 +0000

1) What is Event bubbling in Javascript. Give Example

Event bubbling is the method of event propogation in which event travels from innermost element to the outermost parent element.

Like if we have below structure

<section onclick="alert('section')">
   <div onclick="alert('div')">
     <p onclick="alert('paragraph')"> 
        This is paragraph
     </p>
   </div>
</section>

If click event of paragraph invoked it will call click handlers of all in below order

p>div>section

Event bubbling is also known as Event Propagation or Event Delegation

2) How can event bubbling can be stopped?

stopPropagation() method of javascript used for stopping event bubbling

For more such videos you can check my channel

JS Interview Problem : Create a new array by adding one element at the beginning and one element at the end of an given array.

Passionate Coder — Sun, 21 Mar 2021 08:24:22 +0000

let arr = [3,5,6,1]
Add 9 at the starting of arr and 19 at the end of arr using ES6.

This is very common problem statement which can be asked in Interview. Now a days questions from ES6 or higher is being asked to test latest knowledge of developer.

This Problem can be solved in one line with the help of javascript spread operator.

Soluion

let newArr = [9, ...arr, 19]

I have this will help someone

For more such question visit

Difference between let and var

Passionate Coder — Sun, 21 Mar 2021 07:38:05 +0000

So I am here with a problem statement which is being asked in interview many times.

let a = 'some value'
var b = 'some other value'

what will the output of

window.a and window.b

So the answer is

window.a will be undefined
window.b = 'some other value'

Reason :

var creates properties of the window object when declared globally

but let (same with const) does not create properties of the window object when declared globally

Difference between var and let

https://www.youtube.com/watch?v=e0QcsWWFXkc

Hope this helped somebody and thank you for reading!