Mastering TypeScript 3 - Third Edition

React bootstrapping

In order to see the results of our view definitions rendered in our sample application, we will need to bootstrap our React code, similar to what we did for Aurelia and Angular. To do this, we will modify the app/index.tsx file as follows:

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 
 
 
import { ItemCollectionView, IClickableItem } 
    from "./ReactApp"; 
 
 
let ClickableItemArray: IClickableItem[] = [ 
    { Id: 1, DisplayName: "firstItem" }, 
    { Id: 2, DisplayName: "secondItem" }, 
    { Id: 3, DisplayName: "thirdItem" }, 
]; 
 
ReactDOM.render( 
    <ItemCollectionView items={ClickableItemArray} 
        title="Please select:" 
        SelectedItem={ 
            { Id: 0, DisplayName: "None Selected " } 
        } />, 
    document.getElementById("app") 
); 

Here, we ...