To illustrate the concept of reusable components, consider the code for the top row of the Tic Tac Toe grid. Take a peek at src/index.js.
You should see this starting on line 27:
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
renderSquare is a fairly simple function that renders JavaScript XML, or JSX. As mentioned before, JSX is an extension to JavaScript. It introduces XML-like capabilities in a standard JavaScript file, marrying JavaScript syntax with a set of HTML and XML to construct the components we've been talking about. It's not its own fully fledged templating language per se, but it might, in some ways, actually be more powerful.
Here's renderSquare:
renderSquare(i) {
return (
<Square
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
/>
);
}
So far, so good…it's fairly standard-looking…except for one thing...