Using Fragments to solve the problem of </div> Soup When writing a component in React, you can’t have more than one root JSX element. So if you return a value or if you store a value in a variable, that value must only be exactly one JSX element not two or three or four side by side adjacent elements. Due to which, you have to wrap a <div> around all the elements in the return statement, this technically make the return statement to return only one value as a whole....

Type Annotations The following example declares variables with different data types, where the type is specified using :Type syntax after the name of the variable, parameter or property. : var age: number = 32; // number variable var name: string = "John";// string variable var isUpdated: boolean = true;// Boolean variable function display(id:number, name:string) { console.log("Id = " + id + ", Name = " + name); } var employee : { id: number; name: string; }; employee = { id: 100, name : "John" } These are type annotations....

The nullish coalescing (??) operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. Earlier, when one wanted to assign a default value to a variable, a common pattern was to use the logical OR operator (||): let foo; // foo is never assigned any value so it is still undefined const someDummyText = foo || "Hello!...

In JavaScript we’re often working in the context of deeply nested functions and objects. When debugging our code, it may be necessary to traverse through the stack trace of our code. In order to do that, we can use console.trace() in the function that we would expect to be at the top of the call stack. Using console.trace() we can see exactly what happened before our function was pushed on to the top of the call stack....

Inline CSS This is the CSS styling sent to the element directly using the HTML or JSX. You can include a JavaScript object for CSS in React components, although there are a few restrictions such as camel casing any property names which contain a hyphen. Example: import React from "react"; const spanStyles = { color: "#fff", borderColor: "#00f" }; const Button = props => ( <button style={{ color: "#fff", borderColor: "#00f" }}> <span style={spanStyles}>Button Name</span> </button> ); Styled-Components Styled-components is a library that utilizes tagged template literals — which contain actual CSS code between two backticks — to style your components....