DEV Community

Cover image for Learning Basics Of React
AmeyaKulkarni2001
AmeyaKulkarni2001

Posted on

Learning Basics Of React

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
Enter fullscreen mode Exit fullscreen mode
  • In Let
console.log(x);
let x=5;
console.log(x);
//Output: Error
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

Exports and Imports

Exports can be written as

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

Here we don't call Calc Calc()

Imports can be written as

import Calc from "./<Where ever the code is>"
Enter fullscreen mode Exit fullscreen mode

Spread and Rest operator

...
Enter fullscreen mode Exit fullscreen mode

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

const name = {
    Firstname: Ameya,
    Lastname: Kulkarni
}
const StudentID = {
    ...name,
    Rollno: 23
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
    />
}
Enter fullscreen mode Exit fullscreen mode
const card = (props) =>{
    <h2>{props.name}</h2> // it will give value Ameya
}

export default Card;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
    );
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
import SendData from "./SendData";

const ReceiveData = () =>{
    const sendingDatahandler = (receivedData) =>{
        const data = {
            ...receivedData
        }
    }
    return <SendData onSendingData={sendingDataHandler} />;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)