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 start with the standard import statements at the start of the file. The first two import statements make all classes from the "react" library and "react-dom" library available under the React and ReactDOM namespaces, respectively. The third import statement makes the ItemCollectionView class and the IClickableItem interface available from the ReactApp.tsx file that we created earlier.
We then create a variable named ClickableItemArray, which is our array of ClickableItem objects. Finally, we call the ReactDOM.render function, to render an element to the DOM of the ItemCollectionView type. Note how we have specified three attributes for this ItemCollectionView element.
The first attribute is named items, and the value of this item is the instance of the array we created named ClickableItemArray. Again, React is allowing us to use the {variableName} syntax to inject the value of the ClickableItemArray variable into the DOM. The second attribute in this snippet is named title, and is set to the string value of "Please select: ". The third attribute is named SelectedItem, and represents the initial state of the SelectedItem property on initial startup, hence, "None Selected". After we have defined these DOM elements, note how we include a comma, and then a call to document.getElementById.
This syntax is React's way of selecting a DOM element within the HTML page, and injecting the generated HTML. The id of the element is "app", and, as such, will match a <div id="app"> element within our HTML.
We will now need to create an index.html file in order to bootstrap and render our React application. This index.html file (at the root directory of our project) is as follows:
<!DOCTYPE html>
<html>
<head>
<title>React starter app</title>
<link rel="stylesheet" type="text/css"
href="./node_modules/bootstrap/dist/css/bootstrap.css" />
<script src="./node_modules/underscore/underscore.js"></script>
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
This HTML file includes a <link> tag to load the bootstrap.css file, as well as a <script> tag for loading the underscore library. The <body> element defines a <div> tag named "app", where React will render the ItemCollectionView into. Lastly, we include a <script> tag to download the bundle.js file in the dist directory. Note that, because webpack is combining the React libraries with our compiled TypeScript classes into the bundle.js file, this HTML file becomes very simple. We do not need to load any special libraries, as everything has been combined into a single bundle.js file for us.
Our React application is now ready to run. Simply fire up a browser, and open the index.html file in your source directory. Note that where Aurelia and Angular require a web server to be running within your development environment, React and Backbone do not.