reactjs application tutorial Full Guide Updated 2022

Hi devs, In this guide we have code for creating a react application. So we are going to create a react application where we can add new notes and delete notes also clone notes. We are going to see concepts such as passing data between components. So passing data as given below

// Passing data using react props

Parent component    -->   Child component
Child component     -->   Parent Component

// Also

Passing data to top most Parent component from child component.

Here is demo data in case you want to use it

const listData = [
        {
          'id': 1,
          'text': 'Test title first',
          'description': 'Lorem Ipsum is simply dummy text of the printing. '   
        },
        {
          'id': 2,
          'text': 'Test title second',  
          'description': 'Lorem Ipsum is simply dummy text of the printing. '   
        },
        {
          'id': 3,
          'text': 'Test title third',
          'description': 'Lorem Ipsum is simply dummy text of the printing. '   
        },
        {
          'id': 4,
          'text': 'Test title four',
          'description': 'Lorem Ipsum is simply dummy text of the printing. '   
        },
      ];

We are going to use react hooks

import {useState, useEffect} from 'react';

Also we are going to use "states".

When we define a state we also pass method which sets that state for example

const [title, setTitle] = useState();

// Here we defined state "title".

// setTitle is the method we need to call when ever we will update or set the value of state title.

// Cause we cannnot update state directly.