Create a React App with TypeScript template

npx create-react-app uv-app --template typescript

Functional Component

Frequently Used

Event Handling

<button onClick={activateLasers}>
Activate Lasers

Render List

{ any, index: any) => (
<div key={index}> {obj.title} </div>

Conditional rendering

{props.hasImage &&
<MyImage />
{props.hasImage ?
<MyImage /> :







Indian Number Format

[>=10000000]##\,##\,##\,##0;[>=100000] ##\,##\,##0;##,##0.00

Current Day, Month & Year

=MONTH(TODAY())    // Current month
=YEAR(TODAY()) // Current year
=DAY(TODAY()) // Current day of month. (Select type as number)


  • Calculate difference between dates.



Last Value of Column



  • If formula can give error, this will help to handle that error.
=IFERROR (value, value_if_error)

Photo by bruce mars on Unsplash
["1", "2", "111"].map(parseInt);  // returns [1, NaN, 7]

Map method of Array

  • Current Object
  • Current Index
  • Source Array

logo of npm

JavaScript Closure by Yuvraj Patil

Code Block from Yuvraj Patil

Photo by Michael Winterdal on Unsplash

Unit Testing Angular Application using Jasmine


  1. You are familiar with Angular.
  2. You have created your project with Angular-CLI. i.e. All dependencies are installed and Karma config is ready.

Step 1: Create Global Mocks

Source Code of Global Mocks

Step 2: Test cases for Angular Component

Component Communication in Angular

Visual Studio Code Extensions for UI development

1. Beautify

Yuvraj Patil

Programmer who loves coding and enjoys learning new technologies. 8 years of experience in JavaScript development. Website:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store