# React

React is a java script library (for front end development) for creating Dynamic & Interactive user interfaces

**Library ---**\> a tool that provides specific functionalities \[React\]

**Framework** ---> set of tools & guidelines for building apps \[Angular, View\]

---

**SHORTCUTS**

> ct+, -> settings
> 
> ct+p -> to search a File
> 
> ct+shift+p -> to search in Command pallet
> 
> ct+ddd -> to bring multiple cursors, after edit press escape multiple times (add next occurence)
> 
> ct+shift+l -> add all occurrence

---

## GETTING STARTED WITH REACT

Install **Node.js** from chrome

```bash
#Command to check the version of Node
node -v
```

Install **VS code** from chrome

* add d extension **Prettier** in VS code \[ctrl+, -> format after save (tick)\]
    
* ctrl+, -> format after save (tick)
    

official tool **CRA** -> *Create React App*

one more tool which is popular is **Vite**

```bash
npm create vite@latest  #(4.1.0)
	# y, <name>, framework ->React, variant ->TypeScript
cd react-app   #go into d name of dir which was specified while creating vite
npm install   #installes all d specifications
npm run dev 
code .   #it will open VS code
```

To create **React Component** -&gt; src (source code)-&gt; new folder/file

* **.tsx** = type script for react components
    
* **.ts** = for plane type script files
    

2 ways to create a react component

* **java script class**
    
* **Functions**
    
    Function based components r more popular bcz they r more concise & easier to wright
    
    #PascalCasing ---&gt; name of the function should be in PascalCasing
    

> [babel.io/repo](http://babel.io/repo) -&gt; google it -&gt; it converts html into JSX (Java Script XML)

---

## BUILDING COMPONENTS

Install **Bootstrap**

```bash
npm i bootstrap@5.2.3  #(latest)
```