Play With React in Typescript

 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;

    padding: 20px;

}

TestingBootstrap.tsx

import React from "react";

import 'bootstrap/dist/css/bootstrap.css';

export default function TestingBoostrap(){

    return(

        <div className="alert alert-primary" role="alert">

            A simple primary alert—check it out!

        </div>

    );

}

BringToFocus.tsx

import React ,{ Component} from "react";

export default class BringToFocus extends Component{

    public inputRef: any;

    constructor(props:any){

        super(props);

        this.inputRef=React.createRef();

    

        this.bringToFocus=this.bringToFocus.bind(this); 

        this.assignReference=this.assignReference.bind(this);

    }

    bringToFocus(){

        this.inputRef.focus();

    }

    assignReference(reference:any){

        this.inputRef=reference;

    }

    render(){

        return(

            // <div style={{

            //     background:"green" ,

            //     color:"red",

            //     border:"1px solid gray",

            //     padding:"20px",}}>

            <div className="my-style" >

                    <input type="text" ref={this.assignReference}/>

                    <button onClick={this.bringToFocus}>Bring To Focus</button>

            </div>

        );

    }

}

output: