Learning Basics Of React
Tags: react, juststarting, onlybasic
Published: 2021-05-21 18:45:40

#JavaScript Refresher

## Let and const

- Let almost as same as var but, differs in the scope of variables
- Const is used to create variables which never vary
- In var

```jsx
console.log(x);
var x=5; 
console.log(x);
// output: undefined , 5
```

- In Let

```jsx
console.log(x);
let x=5;
console.log(x);
//Output: Error
```


## Arrow Functions

```jsx
function printName(){
 console.log("Ameya");
}
//It can be written as
const printName = () => {
  console.log("Ameya");
}
//If there is only one line then it can be further reduced to
const printName = () => console.log("Ameya");
```

## Exports and Imports

Exports can be written as

```jsx
const Calc = () =>{
	let x = 1+1;
	return x;
}
export default Calc;
```

Here we don't call Calc `Calc()`

Imports can be written as 

```jsx
import Calc from "./<Where ever the code is>"
```

## Spread and Rest operator

```jsx
...
```

^ is the Spread or rest operator. Just three dots, it can be as 

```jsx
const name = {
	Firstname: Ameya,
	Lastname: Kulkarni
}
const StudentID = {
	...name,
	Rollno: 23
}
```

The StudentID will have Firstname Lastname and Rollno

## Destructuring

It allows us to access values of arrays or objects

```jsx
const array = [1,2,3];
const [a,b] = array;
// a will have the value of 1 and b of 2
```


#Components & Props

## What are components

User interface is made of components, and since react works in a declarative way, it is based on components.

There are many components laid inside components, making a tree.

Components are re-usable.

 

## Props

Props are means of sending data down the tree, thus sharing data between two components at two different levels.

```jsx
import card from "./<some place>"
const App = () => {
	<Card 
		name = "Ameya"
		id = 3
	/>
}
```

```jsx
const card = (props) =>{
	<h2>{props.name}</h2> // it will give value Ameya
}

export default Card;
```

#React State & Events

## Events

An event takes place when a action is done.

```jsx
const buttonClickHandler = () =>{
	console.log("I got clicked");
}
<button onClick = {buttonClickHandler}/>
//         ^ is a type of event which happens on click of button
```

We can come back to Events later

## State

When, we change value or update a component, it doesn't get updated because the react page once rendered doesn't reload.

When, we use State, react understands that it has to reload that certain component which then results in updating of that page

```jsx
import React, { useState } from 'react';

const updateName = () =>{
	const [name, setName] = useState(""); 
	//returns the value and function(which is used to set value)
	setName("Ameya")
	
	return(
	<div>
	<h2>{name}</h2>
	</div>
	);
}
```

## Lifting the State Up

We know that props can be used to send data from Parent to Child but, there is no way to send data from Child to Parent.

This can be done with the help of a method called "Lifting the State Up", it uses props and functions to do it.

```jsx
	
const SendData = (props) =>{
	const data = {
		Firstname: Ameya,
		Lastname : Kulkarni,
		rollno   : 23	
	}
	props.onSendingData(data)
	return <h2>Ameya</h2>;
}
export default SendData;
```

```jsx
import SendData from "./SendData";

const ReceiveData = () =>{
	const sendingDatahandler = (receivedData) =>{
		const data = {
			...receivedData
		}
	}
	return <SendData onSendingData={sendingDataHandler} />;
}
```

A function is declared in Parent and is sent to Child via props, the function, then activates in the Child, and its function is to receive data.

This received data is then transferred back to Parent, because that is the origin of the function.

But one thing to be remembered is that if there is a Super-Parent, and we want to send it data from child then the data has to go from Child → Parent → Super-Parent and not directly