build responsive website

  import "./styles.css" ; import A from "./A" ; import { createContext } from "react" ; //context Api const Fname = createContext (); export default function App () { return ( < div className = "App" > < Fname.Provider value ={ "biplav" } > < A /> </ Fname.Provider > </ div > ); } export { Fname }; import React from "react" ; import B from "./B" ; function A () { return ( < div > < B /> </ div > ); } export default A ; import React from "react" ; import C from "./C" ; function B () { return ( < div > < C /> </ div > ); } export default B ; import React from "react" ; import { Fname } from "./App" function C (){ return ( < div > < Fname.Consumer > { function ...

 obj list const Brand = [ { name : "biplav" , song : "chalu haa" , }, { name : "emiway" , song : "malum haa na" , }, { name : "Rafter" , song : "Swag mara desi" , }, { name : "ikka" , song : "half window" , } ] export default Brand ; import react from "react" ; import Brand from "./Reel" ; console . log (Brand); function M1 () { return ( < div > < h1 > { Brand[ 0 ]. name } </ h1 > < h1 > { Brand[ 0 ]. song } </ h1 > < h1 > { Brand[ 1 ]. name } </ h1 > </ div > ); } export default M1 ; import "./styles.css" ; import M1 from "./Chal" export default function App () { function P1 (props){ return ( < div > < h1 > { props . car } </ h1 > < h1 > { props . car } </ h1 ...

 😎😎😎😎😎😎😎 1  HTML 2  CSS 3  JAVASCRIPT 4  REACT 5  REDUX 6 API 7 EVENT HANDLING  ANS DOM 8 EVENTLISTNER 9 MAPS 10 ES6 11  JSON 12  jQuery  13 Node.js

 with the help of seprate operator we can get array element in other array element const   fullname  = [ "biplav" , "mazumdar" ]; const   bio  = [ 12 ,... fullname , "cars" , "Bmw" ] console . log ( bio ); [ 12, 'biplav', 'mazumdar', 'cars', 'Bmw' ] This is the output /////////////////////////////////// var   Ful  = [ "BMW" , "Ferari" , "RR" , "Lamborghani" ] var  [ first ,... rem ] =  Ful ; console . log ( first ); console . log ( rem ); BMW [ 'Ferari', 'RR', 'Lamborghani' ] This is output /////////////////////////////////// var   Ful  = { name : "BMW" , car : "Ferari" , Brand : "RR" , City : "Lamborghani" } var   bio = { Home : "lamb" ,... Ful }; console . log ( Ful ); console . log ( bio ); This is output { name: 'BMW', car: 'Ferari', Brand: 'RR', Cit...

 We have to first install  https://www.npmjs.com/package/react-router-dom  This package then after  import  import   {   BrowserRouter ,   Route ,   Link   }   from   " react-router-dom " ; and also  Switch Note:- <a href = "#"> click</a> This is the wrong way it will load the full page we have to use the  Router Link for that  Index.js import  {  BrowserRouter ,  Route ,  Link  }  from   "react-router-dom" ;  ReactDOM . render ( < div >    < App   />    < BrowserRouter > //we have to take all changing element in This Browser tag    < Rot />    </ BrowserRouter > </ div > , document . getElementById ( "root" )); //////////////////////////////////////////// Router.Jsx import   React   from   "react" ; import  {  BrowserRouter ,  Route ,  ...

  import React , { useState } from "react" ; function Ap (){ const [ Fname , Setname ] = useState ( "" ); const [ Lname , Stname ] = useState ( "" ); function update (event){ Setname ( event . target . value ); } function updateLname (event){ Stname ( event . target . value ); } return ( <> < h1 >Hello { Fname } { Lname } </ h1 > < input type = "text" name = "Fname" onChange ={update} placeholder = "First Name" value = {Fname} /> < input type = "text" name = "Lname" onChange ={updateLname} placeholder = "Last Name" value = {Lname} /> < button >Submit</ button > </> ) } export default Ap ; /////////////////////////////////////////////////////////////////////// Right way or after destructing import React , { useState } from "react" ; function Ap (){ const [...

  import React , { useState } from "react" ; function Ap (){ const [ headingtag , setheaingteg ] = useState ( "yoyo" ); const [ ismouseover , color ] = useState ( false ); function handel (){ setheaingteg ( "submited" ) } function jscolor (){ color ( true ); } function js (){ color ( false ); } return ( < div className = "cent" > < h1 > {headingtag} </ h1 > < input type = "text" placeholder = "Type your Name" /> < button onMouseOut ={js} onMouseOver ={jscolor} onClick ={handel} style ={{backgroundColor : ismouseover ? "yellow" : "white" }} >Click Hear</ button > </ div > ) } export default Ap ; // in this we are trying to handel the event with the help of some function like over and out js function and also manageing states and added on ternery operator

  import   './App.css' ;  import   React  ,{ useState }  from   "react" ; function   App (){ //setInterval ( updateTime , 1000 ) //1000 is sec //this is a function by javascript    const   now  =  new   Date (). toLocaleTimeString ();    const  [ time ,  setTime ] =  useState ( now ); // first wla variable and 2nd wala function ever time useState me kuch hona chiya phela function   updateTime (){    const   newTime  =  new   Date (). toLocaleTimeString ();  //variable     setTime ( newTime ); } return (    < div   className  =  "container" >    < h1 > { time } </ h1 >    < button   onClick = { updateTime } > GetTime </ button > </ div > ) }       ...

 1)Router Instalation of react in vs-code Step one download node js Step 2. open power shell or cmd  Step 3 - Create react app go to this link  Step 4 -   npx create-react-app my-app px create-react-app my-app copy and past on power shell. Step5 :- open terminal in vs code and type npm start step 6 :- 192.168.1.33:3000 you can open in any browser and check live

 Find function helps you to matches an array it automatically get break when he find the first number  in this case 3 is first no. The  find()  method returns the value of the first element in an array that pass a test (provided as a function). The find() method executes the function once for each element present in the array: If it finds an array element where the function returns a  true  value, find() returns the value of that array element (and does not check the remaining values) Otherwise it returns undefined Note:  find() does not execute the function for empty arrays. Note:  find() does not change the original array. let a = [12,3,4,5,5]; let number = a.find(function(num){   return num<10; }) console.log(number); findindex ;-  The  findIndex()  method returns the index of the first element in an array that pass a test (provided as a function). The findIndex() method executes the function once for each element present...

 let a = [12,3,4,5,5]; let number = a.reduce(function(accumulator,currentNuber){   return accumulator+currentNuber; }) console.log(number); The  reduce()  method reduces the array to a single value. The  reduce ()  method executes a provided function for each value of the array (from left-to-right). The return value of the function is stored in an accumulator (result/total). Note:   reduce ()  does not execute the function for array elements without values. Note:  This method does not change the original array

 let a = [12,3,4,5,5]; let num = []; let no = a.forEach(function(n){   if (n<10){     console.log(n);   }else{     console.log(n);   } }) console.log(no); The  forEach()  method calls a function once for each element in an array, in order. Note:  the function is not executed for array elements without values.

 let a = [12,3,4,5,5]; let no = a.filter(function(num){   return num>10; }) console.log(no); it is a filter function  The filter() method creates an array filled with all array elements that pass a test (provided as a function). Note:  filter() does not execute the function for array elements without values. Note:  filter() does not change the original array.

 in react map function every element is going in a loop and the element or components should be in array [] like [ ]  we can call function under function or we say that  call function under map function we can write map function let a = [12,3,4,5,5]; const no = a.map(function(x){  return x*2;  } ); console.log(no); and also  function n(x){ return x*2; }