build responsive website

 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 &g

 😎😎😎😎😎😎😎 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 ,  Link , Switch  }  from   "react-router-dom" ;  import   About   from   "./About" ; import   Contact   from   "./Contact

  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