Forem: Shivraj gurjar

Upload repository preview image for github topics

Shivraj gurjar — Wed, 11 Oct 2023 15:13:33 +0000

Go to reposatory main page.
Go to setting section.
Here you can see social preview.

Upload an image according to your project.

String in JavaScript

Shivraj gurjar — Sun, 08 Oct 2023 05:45:48 +0000

Single and Double Quotes in JavaScript Strings

Strings in JavaScript are contained within a pair of either single quotation marks '' or double quotation marks "". Both quotes represent Strings but be sure to choose one and STICK WITH IT. If you start with a single quote, you need to end with a single quote. There are pros and cons to using both IE single quotes tend to make it easier to write HTML within Javascript as you don’t have to escape the line with a double quote.

console.log('This is a string. 👏') 
// output: This is a string. 👏
console.log("This is the 2nd string. 💁"); 
// output: This is the 2nd string. 💁

Enclosing Quotation Marks

Let’s say you’re trying to use quotation marks inside a string. You’ll need to use opposite quotation marks inside and outside of JavaScript single or double quotes. That means strings containing single quotes need to use double quotes and strings containing double quotes need to use single quotes.

console.log("It's six o'clock.");
// output: It's six o'clock.
console.log('Remember to say "please" and "thank you."');
// output: Remember to say "please" and "thank you.

Alternatively, you can use a backslash \ to escape the quotation marks. This lets JavaScript know in advance that you want to use a special character.

Here’s what that looks like reusing the examples above:

console.log('It\'s six o\'clock.');
// output: It's six o'clock.
console.log("Remember to say \"please\" and \"thank you.\"");
// output: Remember to say "please" and "thank you".

String Methods and Properties

Strings have their own built-in variables and functions, also known as properties and methods. Here are some of the most common ones.

String Length

A string’s length property keeps track of how many characters it has.

// EXAMPLE
console.log("caterpillar".length);
// output: 11

toLowerCase Method

A string’s toLowerCase method in JavaScript returns a copy of the string with its letters converted to lowercase. Numbers, symbols, and other characters are not affected.

console.log("THE KIDS".toLowerCase());
// Example
// output: the kids

toUpperCase Method

A string’s toUpperCase method returns a copy of the string with its letters converted to capitals. Numbers, symbols, and other characters are not affected.

// EXAMPLE
console.log("I wish I were big.".toUpperCase());
// output: I WISH I WERE BIG.

trim Method

A string’s trim method returns a copy of the string with beginning and ending whitespace characters removed.

// EXAMPLE
console.log("   but keep the middle spaces   ".trim());
// output but keep the middle spaces

Fragment tag in React

Shivraj gurjar — Thu, 05 Oct 2023 04:59:02 +0000

React Fragments: A Cleaner Way to Group Elements

In React, when you want to return multiple elements from a component, you typically need to wrap them in a single parent element. This is because React enforces a rule that each component can only render a single parent element. While this makes sense from a structural perspective, it can lead to unnecessary wrapper elements in the rendered HTML, which can affect the page's layout and styling.

This is where React Fragments come to the rescue. A React Fragment is a lightweight way to group multiple elements without adding extra nodes to the DOM. They allow you to group elements together without introducing a new parent element in the HTML output.

Before Fragment

// Rendering with div tag  
  class App extends React.Component {   
       render() {    
        return (   
           //Extraneous div element   
           <div>  
             <h2> Hello World! </h2>   
             <p> Welcome to the Shiv's Blog. </p>   
           </div>   
        );   
       }   
  }

To solve this problem, React introduced Fragment from 16.2 and above version. Fragments allows you to group a list of children without adding extra node to DOM.

syntax

<React.Fragment>  
  <h2> child1 </h2>   
  <p> child2 </p>   
  .. ..... .... ...  
</React.Fragment>

Example 1

// Rendering with fragments tag  
  class App extends React.Component {   
      render() {   
       return (   
         <React.Fragment>  
              <h2> Hello World! </h2>   
              <p> Welcome to the Shiv's Blog. </p>   
           </React.Fragment>  
       );   
      }   
  }

Keyed Fragments

This shorthand syntax does not accept key attributes. You need a key for mapping a collection to an array of fragments such as to create a description list. If you need to provide a keys, you have to declare the Fragments with the explicit syntax.

Function  = (props) {  
    return (  
      <Fragment>  
        {props.items.data.map(item => (  
          // Without the 'key', React will give a key warning  
          <React.Fragment key={item.id}>  
            <h2>{item.name}</h2>  
            <p>{item.url}</p>  
            <p>{item.description}</p>  
          </React.Fragment>  
        ))}  
      </Fragment>  
    )  
  }

The Avengers and React Fragments: A Web Development Saga

In a parallel digital universe, the Avengers decided to venture into the world of web development. Each Avenger was assigned a web development task to save the day, and they soon discovered the power of React Fragments.

Iron Man's Dilemma:

Tony Stark, also known as Iron Man, was tasked with creating a superhero team display on the Avengers' website. He had to list the team members, their images, and a brief description. However, Iron Man was a perfectionist. He didn't want any unnecessary HTML elements cluttering up the web page.

At first, he wrote his code like this:

function AvengersTeam() {
  return (
    <div className="team">
      <div className="hero">
        <img src="ironman.jpg" alt="Iron Man" />
        <h2>Iron Man</h2>
        <p>Tony Stark, the genius billionaire.</p>
      </div>
      <div className="hero">
        <img src="captainamerica.jpg" alt="Captain America" />
        <h2>Captain America</h2>
        <p>Steve Rogers, the super-soldier.</p>
      </div>
      {/* More heroes here */}
    </div>
  );
}

Iron Man felt that these extra

elements were like unnecessary bulky armor. He wanted a sleeker solution.

Enter React Fragments:

One day, while tinkering in his lab, Iron Man had a breakthrough. He discovered React Fragments, a tool that would help him achieve his goal of cleaner code.

With React Fragments, Iron Man transformed his code into a more elegant and efficient form:

function AvengersTeam() {
  return (
    <>
      <div className="hero">
        <img src="ironman.jpg" alt="Iron Man" />
        <h2>Iron Man</h2>
        <p>Tony Stark, the genius billionaire.</p>
      </div>
      <div className="hero">
        <img src="captainamerica.jpg" alt="Captain America" />
        <h2>Captain America</h2>
        <p>Steve Rogers, the super-soldier.</p>
      </div>
      {/* More heroes here */}
    </>
  );
}

With React Fragments, Iron Man's code became streamlined, just like his Iron Man suit. There were no unnecessary wrapper elements, and the website loaded faster, just in time to save the world from poorly structured HTML.