Modern Full-Stack Development

 Back  to the Code!
Getting back to the PlayerBoard component’s code, we begin by functionally 
constructing the component:
const PlayerBoard = ({ state }: any) => {
Note here that I need to specify the type of any for the state object because otherwise, 
I’ll get a compiler warning due to the noImplicitAny check being turned on (this wasn’t 
the case in MailBag).
Next, we have some variables that define metadata about the tiles:
const tileWidth: number = 72;
const tileHeight: number = 88;
const tileShadowWidth: number = 11;
const tileShadowHeight: number = 11;
To lay the tiles out properly on the screen, we need to know their width and height. 
But we also need to know the width and height of the drop shadow on each because the 
board will be constructed by overlapping these shadows.
Next, we have two other variables that express metadata:
const xAdjust: number = 10;
const yAdjust: number = 36;
These are used to push the arrangement of tiles down and right a little bit so that the 
tiles are centered within the left-hand column and not touching up against the border on 
the top and left.
After that, we have an array that will contain components, one per tile, when we 
render them later:
const tiles: ReactElement[] = [ ];
Chapter 11   time for fun: BattleJong, the Client

---

322
The problem here is in determining the type (which we must do since the 
noImplicitAny check won’t allow us to either choose a type or explicitly use any, which 
you usually should try and avoid wherever possible for maximum TypeScript goodness). 
As you’ll see soon, we’re going to be rendering an  element for each tile. We’re 
going to populate this tiles array with those elements. So, what’s the appropriate type?
The ReactElement class is the answer.
Instances of this class are virtual DOM elements that represent an instance of a DOM 
element (like an ), a React component, or a fragment. A ReactElement describes 
what you literally see on the screen, whereas a component is a level above that: a single 
component can be composed of numerous ReactElement instances even.
You can roughly think of ReactElement as a base class in an object-oriented 
language in the sense that you can usually have a generic reference to a more specific 
object through a variable typed as the base class. For example, in Java, a variable of type 
Object can reference any other type of object because Object is the base class of all 
other classes in Java. ReactElement isn’t precisely the same because it’s not an object- 
oriented relationship, but you can effectively treat it like it is, which is exactly why the 
type of the tiles array can be ReactElement (an array of them, to be more precise) and 
we can later have  instances in it and TypeScript won’t complain about the typing.
Finally, we have two more variables:
let xOffset: number = 0;
let yOffset: number = 0;
These aren’t metadata, though; these are used throughout the render process to 
determine where to place tiles.