TODO PROJECT IN REACT JS USING ARRAY HOOK, COMPONENT AND SPREAD OPERATOR

 App.jsx

import React, { useState } from "react";

import TodoList from "./TodoList";

const App = () => {

    const [inputText, setInputText] = useState(""); //Array Hook

    const [list, setList] = useState([]);

    const inputEvent = (event) => {

        setInputText(event.target.value);

    };

    const inputTextList = () => {

        setList((oldLists) => {

            return [...oldLists, inputText] //Spread Operator

        });

        setInputText("");

    }

    const deleteText = (id) => {

        console.log("deleted");

        setList((oldLists) => {

            return oldLists.filter((arrEle, index) => {

                return index !== id;

            });

        });

    }

    return (

        <>

            <div className='main_div'>

                <div className='center_div'>

                    <br/><h1>TODO LIST</h1><br/>

                    <input type='text' value={inputText} 

                placeholder='Enter a text' 

                onChange={inputEvent}/>

                    <button onClick={inputTextList}> + </button>

                    <ol>

                    {list.map((val, index) => {

                        return <TodoList key={index} 

                id={index} text={val} onSelect={deleteText}/>

                    })}

                    </ol>                   

                </div>

            </div>

        </>

    );

};

export default App;

TodoList.jsx

import React from "react";

const TodoList = (prop) => {

    return(

        <>

        <div className="todo">

        <i className="fa fa-times" onClick={ () => {

            prop.onSelect(prop.id);

        }}/>

        <li>{prop.text}</li> 

        </div>

        </>

    );

}

export default TodoList;

SIMPLE PRESIZED FORM IN REACT JS

 App.jsx

import React, { useState } from 'react'

import Card from './Cards';

import Sdata from './Sdata';

import "./index.css";

const App = () => {

    // Array Hook 

    const [showName, setShowName] = useState({

        fname : "",

        lname : ""

    });  

    

    const InputData = (event) => {

        console.log(event.target.value);

        console.log(event.target.name);

        const {name, value} = event.target;

        setShowName((x) => {

            console.log(x);

            return {

                ...x, // Spread Operator

                [name] : value

            };

        })

    }

    const Submit = (event) => {

        event.preventDefault();

        alert ("Form Submitted");

    }

    

    return(

        <>

        <h1 className='top_head'> REACTjs FORM </h1>

        <div>

            <form onSubmit={Submit}>

            <h1>Hello, {showName.fname} {showName.lname} !</h1>

            <input type='text' placeholder='your name' 

                onChange={InputData} 

                name='fname' value={showName.fname}/>

            <br/>

            <input type='text' placeholder='your last name' 

                onChange={InputData} 

                name='lname' value={showName.lname}/>

            <br/>

            <button type='submit' style={{backgroundColor:'#34495e', 

                fontSize:'22px'}}>Click<span>😃</span></button>

            </form>            

        </div>

        </>);

    };

    export default App;

SPREAD OPERATOR AND DESTRUCTURING ARRAY IN REACT JS

    

       //three dots(...) is called spread operator

    // Use of spread operator in Array

    const summerFlower = ["Rose","Sunflower"];

    const winterFlower = ["Marigold","Tulip","Lily"];

    const flower = [...summerFlower, ...winterFlower];

    console.log(flower);

    // Destructuring in Array

    const [flora, ...flwr] = [...summerFlower, ...winterFlower];

    console.log(flora);

    console.log(flwr);

    // Use of spread operator in object

    const fullForm = {

        "php" : "Hypertext Preprocessor",

        "html" : "Hyper Text Markup Language"

    }

    const fullFormMore = {

        ...fullForm,

        "css" : "Cascading Style Sheet"

    }

    console.log(fullFormMore);

REACT FORM

App.jsx

import React, { useState } from 'react'

import "./index.css";

const App = () => {

    // Array Hook 

    const [name, setName] = useState("");

    const [showName, setShowName] = useState();    

    const [lastName, setLastName] = useState("");

    const [showLastName, setShowLastName] = useState();

    

    const Submit = (event) => {

        event.preventDefault();

        setShowName(name);

        setShowLastName(lastName);

    }

    

    return(

        <>

        <h1 className='top_head'> REACT FORM</h1>

        <div>

            <form onSubmit={Submit}>

            <h1>Hello, {showName} {showLastName} !</h1>

            <input type='text' placeholder='your name' 

    onChange={InputDataOne} value={name}/>

            <br/>

            <input type='text' placeholder='your last name' 

    onChange={InputDataTwo} value={lastName}/>

            <br/>

            <button type='submit' style={{backgroundColor:

    '#34495e', fontSize:'22px'}}> Click 😃</button>

            </form>            

        </div>

        </>);

};

export default App;

USE OF HTTP REQUEST AND RESPONSE IN JSON

 index.json

{

    "employee" : [

        {

            "name" : "Suruchi Shukla",

            "post" : "Web Devloper",

            "department" : "IT"

        },

        {

            "name" : "Abhi Roy",

            "post" : "Tech Lead",

            "department" : "IT"

        }

    ]

}

index.html

<html>

<head>

<title>JSON Example</title>

</head>

<body>

<script>

//1> Server Connection establishment

var xhttp = new XMLHttpRequest();

//2> Request Service

xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

        //3> Processing request

        coonsole.log(xhttp.responseText);

       // Typical action to be performed when the document is ready:

       var response = JSON.parse(employee);

       var employeeAll = response.employee;

       var showData = "";

       for(var i=0; i<employeeAll.length; i++){

        showData += employeeAll[i].name;      

       }

    document.write(showData+"<br/>");

    }

};

xhttp.open("GET", "index.json", true);

//4> Finish request Response Connection

xhttp.send();

</script>

</body>

</html>

SENDING JSON DATA(IN PHP), USE OF STRINGINFY() AND PARSE() JSON METHODS

 index.php

var jsonobject = {

        "name":"Suruchi Shukla",

        "post":"Software Developer",

        "age":"23"

    }

        //converting json data into string

        var sendData = JSON.stringify(jsonobject);

        //converting string to js object

        var parseData = JSON.parse(sendData);

        document.write(parseData.name);

        //sending data to php page

        window.location = "send.php?values="+sendData;

send.php

<?php

    if(isset($_GET['values'] $$ !empty ($_GET['values'])))

    {

        $showData = json_decode($_GET['values']);

        echo $showData -> name;

    }

?>

2D ARRAY AND 'FOR IN' LOOP IN JSON

 

// Key:Value Array in JSON

    var jsonKeyArrayObject = {

        "jsonKeyArray" : [

            {"country" : "INDIA", "state" : "Madhya Pradesh" },

            {"country" : "USA", "state" : "Washington" },

            {"country" : "UAE", "state" : "Dubai" },

        ]

    }

    document.write("<br/>"+jsonKeyArrayObject.jsonKeyArray[0].country);

    

    //for in loop

     for (x in jsonKeyArrayObject.jsonKeyArray){

        for (x_index in jsonKeyArrayObject.jsonKeyArray[x]){

            document.write(x_index+": "); //key

            document.write(jsonKeyArrayObject.

                    jsonKeyArray[x][x_index]+"<br/>"); //value

        }

    }

ARRAY AND 'FOR IN' LOOP IN JSON

  

var jsonobject = {

        "name":"Suruci Shukla",

        "post":"Software Developer",

        "age":"23"

    }

    //for in loop

    for (a in jsonobject ){

        document.writeln(a+": "); //key

        document.writeln(jsonobject[a]+"<br/>"); //value

    }  

 

    // Array in JSON

    var jsonArrayObject = {

        "jsonArray" : ["Suruchi Shukla", "23", "Software Developer"]

    }

    document.write(jsonArrayObject.jsonArray);

    // Key:Value Array in JSON

    var jsonKeyArrayObject = {

        "jsonKeyArray" : [

            {"country" : "INDIA" },

            {"country" : "USA" },

            {"country" : "UAE" }

        ]

    }

    document.write("<BR/>"+jsonKeyArrayObject.jsonKeyArray[0].country);

PRINT, DELETE, MODIFY/ADD IN JSON

 

var jsonobject = {

        "name":"Suruci Shukla",

        "post":"Software Developer",

        "age":"23"

    }

    //printing values on console

    console.log(jsonobject.age);

    //printing values on webpage

    document.writeln(jsonobject.age);

    //modifying values

    jsonobject.post = "Web Developer";

    //adding values

    jsonobject.role = "Website development and maintenance";

    //deleting key:value pair

    delete jsonobject.role;

JSON

 JSON: Java Script Object Notation,  is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

OR

An open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types.

//here, jsonobject is holding "key:value" pair

var jsonobject = {

        "name":"Suruci Shukla",

        "post":"Software Developer",

        "age":"23"

    }

NODE JS

 Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Used for server-side as well as user-side scripting. It is nat a framework or interface but a JavaScript  running on the server.

JavaScript -----------> Browser JavaScript Engine -----------> Machine Code

When to use Node JS:

• I/O bound
• Data streaming application
• Real time chat application