AmeyaKulkarni2001

Posted on May 21, 2021

Learning Basics Of React

#react #juststarting #onlybasic

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

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

In Let

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

Arrow Functions

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

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

Here we don't call Calc Calc()

Imports can be written as

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

Spread and Rest operator

...

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

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

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.

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

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.

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

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.


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

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

DEV Community