SARDAR Coding

CSS Styling in JSX .... We are use css in JSX many ways.  1 . First of all we use inline css like inline HTML. 2 . second we direct import css file in js file. 3 . If we are make style file in public folder then we use link tag root index.html file 4 .  Last but not the list.. we use css module as a variable.. import './App.css' ; import style from './style.module.css' ; function App () {   return (     < div className = "App" >       < h1 style = {{color: "green" , fontSize: "4rem" }} >Wellcom</ h1 >     </ div >   ); } export default App ;

JavaScript  in  operator....  =>  JavaScript  in   operator. It's use to identifyee any value include in this Object or Array. When use in for Object than we are use key before in  operator and use after this Object name. => When use in   for Array. Than use index number before in operator and after Array name.                 const myObject = {     apple: 2 ,     banana: 3 ,   }   console . log ( "apple" in myObject );   const myArrey = [ 'apple' , 'Banana' , 'Mangow' ];   console . log ( 1 in myArrey );

 Botton.js: import React from 'react' ; class Button extends React . Component {     render (){         const { change , locale , show } = this . props ;         return (             <>             < button type = 'button' onClick = {() => change ( locale )}>                 { locale === 'bn-BD' ? "change clock" : "গড়ি পরিবর্তন করুন" }             </ button >             { show && < p >Hello</ p >}             </>                     );     } } export default Button ; Clock.js: import React from 'react' ; import Button from './Button' ; class Clock extends React . Component {   state = {date: new Date (),...

  import React from 'react' ; class Clock extends React . Component {   state = {date : new Date (),locale : 'bn-BD' };         componentDidMount (){         this . clockTimer = setInterval (() => this . tick (), 1000 );     }     componentWillUnmount (){         clearInterval ( this . clockTimer );     }     tick (){         this . setState ({             date : new Date (),         });     }     handelClick = () => {         this . setState ({           locale: 'en-US' ,         });     }   render () {     const { data , locale } = this . state ;     return (       < div >         < h1 className = 'heading' >   ...