TypeScript Examples

 index.js import   React   from   "react" ; import   ReactDOM   from   "react-dom" ; import   "./index.css" ; import   'bootstrap/dist/css/bootstrap.css' ; import   "@popperjs/core/dist/umd/popper" ; import   InputForm   from   "./InputForm" ; //import DataBoundComponent from "./DataBoundComponent"; let   container  =  document . getElementById ( "root" ); ReactDOM . render (    <div   className = "container" >       < InputForm ></ InputForm >     { /* <DataBoundComponent/> */ }          </div> ,  container ); InputForm.js import   React   from   "react" ; export   default   class   InputForm   extends   React . Component  {      constructor ( props )      {    ...

 Reducers: Take input state and return new state. Step 1: Import Redux NPM packages npm install redux react-redux npm install @types/react-redux

  Is react router is static or dynamic? Before the react router v4 it is static after v4 it is Dynamic. In single page apps, there is only single html page.we are reusing the same html page to render the different components based on the navigation. But in multipage apps, you will get an entirely new page from the server when you navigate. How to install the react router? npm install @types/react-router-dom index.tsx import   *   as   React   from   'react' import  {  HashRouter   as   Router ,  Route ,  Link ,  Switch  }  from   'react-router-dom' import  {  render  }  from   'react-dom' ; import  { Home ,  Contact ,  Feedback }  from   "./Navigation" ; class   App   extends   React . Component  {    render () {      return  (        < Router >    ...

 index.tsx import   React   from   "react" ; import   ReactDOM   from   "react-dom" ; import   Clock   from   "./Clock" ; let   container  =  document . getElementById ( "root" ); ReactDOM . render ( <div>          < Clock ></ Clock >      </div> ,  container ); ----------------------------------------------------------------------------- Clock.tsx import   React   from   "react" ; export   default   class   Clock   extends   React . Component {      state ={ date : new   Date (). toString ()}      componentDidMount (){     this . context = setInterval (() => {              this . setState ({ date : new   Date (). toString ()});        ...

 index.tsx import   React   from   "react" ; import   ReactDOM   from   "react-dom" ; import   MouseMovementTracker   from   "./MouseMovementTracker" ; import   Butterfly   from   "./Butterfly" ; let   container  =  document . getElementById ( "root" ); ReactDOM . render ( < div >           < MouseMovementTracker      myrender = { ( data : any ) => {          return < Butterfly   x = { data . x }   y = { data . y } />    } } ></ MouseMovementTracker >        </ div > ,  container ); MouseMovementTracker.tsx import   React   from   "react" ; interface   MyInt {      myrender : any ; } export   default   class   MouseMovementTracker   extends   React . Component...

  index.tsx import   React   from   "react" ; import   ReactDOM   from   "react-dom" ; import MutatioIsBad from "./MutationIsBad"; let   container  =  document . getElementById ( "root" ); ReactDOM . render ( < div >        <MutatioIsBad words={[]}></MutatioIsBad>       </ div > ,  container ); MutationIsBad.tsx import   React  ,{  Component ,  Fragment }  from   "react" ; import   ListOfWords   from   "./ListOfWords" ; import   ListOfWordsPure   from   "./ListOfWordsPure" ; import   ListOfWordsSCU   from   "./ListOfWordsSCU" ; import   ListOfWordsMemo   from   "./ListOfWordsMemo" ; interface   IWord  {          words : String [];     } interface   IWordState {      wo...

 here is small example to add bootstrap in typescript react, and bring focus to textbox after clicking on button  try it out: index.tsx import   React   from   "react" ; import   ReactDOM   from   "react-dom" ; import   "./index.css"; import   BringToFocus   from   "./BringToFocus" ; import   TestingBootstrap   from   "./TestingBootstrap" ; import   'bootstrap/dist/css/bootstrap.css' ; let   container  =  document . getElementById ( "root" ); ReactDOM . render ( < div >          < BringToFocus ></ BringToFocus >        < TestingBootstrap   />          </ div > ,  container ); index.css .my-style {      background :  green ;      color :  red ;      border : 1px   solid   gray ; ...