Reload, and check we get "Hello Vue" appearing. If so, good -- React is working, can compile templates, and we can progress.
Set webpack watching the files:
```sh
npm run build ----watch
```
Reload index.html in the browser, and check we get "Hello Vue" appearing. If so, good -- React is working and we can progress.
### Creating a ConfigView component
Let's create a file called `gameConfig.tsx'.
First, let's import react:
```tsx
import * as React from "react"
import * as ReactDOM from "react-dom"
```
Then let's define our GameConfig type:
```tsx
export interface GameConfig {
w:number
h:number
started:boolean
created:boolean
period:number
}
```
And then let's define a React component:
```tsx
export class ConfigView extends React.Component<GameConfig, {}> {
render() {
return <div>This will render some game config</div>
}
}
```
Notice that in the angle brackets, we've said this component's properties are defined by the GameConfig interface -- so, it has properties for `w`, `h`, etc.
Let's go back to `index.tsx` and use it.
First, we need to import `GameConfig` and `ConfigView`:
```tsx
import { GameConfig, ConfigView } from "./gameConfig"
```
Then we need to create some config:
```tsx
let config:GameConfig = {
w: 40,
h: 20,
created: false,
started: false,
period: 500
}
```
and then let's alter our React call to use it:
```tsx
ReactDOM.render(
<ConfigView {...config}></ConfigView>,
document.querySelector("#app")
);
```
We've used the *spread* operator `{...config}` here to set all of the ConfigView's props at once.
