Raja Ram T rajaramtt

React is a JavaScript library

React is not a framework (unlike Angular, which is more opinionated)

React is an open-source project created by Facebook

creating a new single-page app, use Create React App. server-rendered website with Node.js, try Next.js.

Diff

Grid Layout is a two-dimensional and flexbox is a one-dimensional

Grid’s approach is layout-first and Flexbox’ approach is content-first

Flexbox small-scale layouts Grid’s larger scale

Grid is Container-Based, Flexbox is Content-Based

Ctrl+, User Settings
Ctrl+K Ctrl+S Keyboard Shortcuts
Ctrl+T Show all Symbols
Ctrl+G Go to Line...
Ctrl+P Go to File...
Ctrl+Shift+O Go to Symbol...
Ctrl+Space Trigger suggestion
Ctrl+. Quick Fix

const greet = (obj) => {
  return `${obj.greeting}, ${obj.firstName}${obj.lastName}`;
}

best way

const greet = ({

Annotations: TypeScript is statically typed and, therefore, all checks are performed at compile time. As mentioned before Types are annotated using :TypeAnnotation syntax.

Primitive Types

let isDone: boolean = false;

https://angular.io/api/core/ViewContainerRef

https://angular.io/guide/dynamic-component-loader

https://medium.com/better-programming/creating-a-structural-directive-similar-to-ngif-in-angular-4709bac8044b

	12

	# Check out to a temporary branch:
	git checkout --orphan TEMP_BRANCH

	# Add all the files:
	git add -A

	# Commit the changes:
	git commit -am "Initial commit"

	@Component({
	selector: 'my-app',
	templateUrl: './app.component.html',
	})
	export class AppComponent {
	form = this.formBuilder.group({
	firstName: [''],
	lastName: [''],
	age: [''],
	});

	Property

	<img [src]="heroImageUrl">
	<app-hero-detail [hero]="currentHero"></app-hero-detail>
	<div [ngClass]="{'special': isSpecial}"></div>


	Event

	<button (click)="onSave()">Save</button>


	/*

	{
	"goodPackage": {
	"upsellList": [
	{
	"productCode": "product1"
	}
	]