Master React-js Through This Tutorials
import React from “react”;
import { createContext, useContext } from “react”;
function TourData() {
return (
<div>
<ul>
<li>
<a href=”default.asp”>Home</a>
</li>
<li>
<a href=”news.asp”>News</a>
</li>
<li>
<a href=”contact.asp”>Contact</a>
</li>
<li>
<a href=”about.asp”>About</a>
</li>
</ul>
<h1> Use Todo </h1>
</div>
);
}
export default TourData;
Register This TourData() in APP.js
import React from “react”;
import “./App.css”;
import { useState } from “react”;
import TourData from “./components/TourData”;
function App() {
return (
<div>
<TourData />
</div>
);
}
export default App;
Higher Order Functions
//The Functions that use only primitive (pre-defined datatypes) or objects as arguments, and only return primitive or objects arr named first-order functions.
//functions are treated as first-class citizens in javascript which means that functions can be
//1. assigned to different variables.
//2. passed as argument to differnt functions
//3. returned from different functions
//This brings us to higher order function concept
//Functions that accept another function as argument or return another function, are infact, Higher- Order Functions.
var getSeven = function(){
return 7;
}
function useFunction(fn){
//Higher Oder Functions // We are passing function into Arguments.
return fn();
}
function ReturnFunction ()
{ //If Function is Returning other function then it is Higher Order Functions
return get even;
}
const ExFunc = ReturnFunction(); // If the Function is also using the other function as a variable is also called the Higher Order Functions
console.log(ExFunc());
//Example
function sum(x,y){
return x + y ;
}
function sub(x,y){
return x -y ;
}
function mul(x,y){
return x *y ;
}
function divide(x,y){
return x *y ;
}
function CalCulatorFunction(fn,x,y){ // This is also Higher Order Function.
return fn(x,y)
}
console.log(CalCulatorFunction(sum,1,2)) //Taking Sum Function as an argument.
console.log(CalCulatorFunction(sub,1,2)) // Taking Sub Function as an argument.
console.log(CalCulatorFunction(mul,1,2)) //Taking Sum Function as an argument.
console.log(CalCulatorFunction(div,1,2)) // Taking Sub Function as an argument.
3. Callback Hell
4. Returning a Function
What is CallBack
Alternatively, we can also define it as any function that is passed as an argument to another function so that it may
executed in that other function is referred as a callback function/
function deliverProduct() {
console.log(“Done With Delivery”)
useCallback();
}
function SuccessFunction() {
console.log(“Product has been succesfully delivered”)
}
deliverProduct(“Macbook”,SuccessFunction)
CallBack Hell
For Every Callback here, wait for the previous callback, thereby affecting the readability and maintainability of code.
//Suppose You need a detail of the Product.
getProduct(18. (product){
getUserInfo (product.userId,{userInfo}=>{
get Address(userinfo.userId,{address}=>{
console.log(address);
})
})
})
SetInterval()
This method repeats a given function at every given time interval.
Syntax = Window.setInterval(function, milliseconds);
function – the first parameter is the function to be executed
milliseconds – indicates the length of the time interval between each execution.
SetInterval(function(){
console.log(“It is time to Drink Water”);),2000}
};
SetInterval(function(){
console.log(“It is time to Drink Water”);
console.log(new Date());},5000);
};
ClearInterval()
The ClearnInterval() method cancels a timed, repeating action which was previously established by a call to setInterval().
If the parameter doesn’t identify a previously established action, this method does nothing.
Syntax :
Clearinterval(IntervalID)
IntervalId – The Identifier of the repeated action you want to cancel. This ID was returned by the
corrospindeing call to the setInterval()
var timerID =setInterval(function(){
console.log(“It is Time To Drink Water”);
console.log(newDate());
ClearInterval(timerID)
})
clear interval()
clearTimeOut()
SetTimeout
The setTimeout() method sets a timer that executes a function or specified place of code once the timer expires.
Syntax : SetTimeout(function, delay, argument1, argument 2… argument N )
function – It is executed after the timer expires.
Delay – In the milliseconds is the time for which the timer should wait before the specified function or code is executed, if this parameter is omitted, a value of 0 is used. meaning executes immediately.
arguments – Additional Arguments which are passed through the function specified here.
The returned timeoutID is a positive integer value that identifies the timer created, it is called setTimeout().
setTimeout() is an asynchronous function which simply means that the timer function does not pause the execution of other functions in the function’s stack. More precisely, you should use setTimeout() to create a “pause” before the next function in the function stack.
Question: Make a Counter App in React js
import React, { useState } from “react”;
const Counter = () => {
const [counter, setCounter] = useState(15);
const incrementCounter = () => {
setCounter(counter + 1);
};
const decrementCounter = () => {
setCounter(counter – 1);
};
return (
<div>
<h1>This is Counter</h1>
<p>Current Count: {counter}</p>
<button onClick={incrementCounter}>Increment Button</button>
<button onClick={decrementCounter}>Decrement Button</button>
</div>
);
};
export default Counter;
