Chess Board

I started making a full chess board with moveable pieces and everything but ran out of time so instead i just hit the requirements for the project. In this case all this app does is renders a chess board with black pawn pieces because i also didn't feel like adding white pawn pieces.

class Piece extends React.Component { { const baseStyle = { height: "100%", width: "100%" }; const style = { ...baseStyle, ...this.props.style }; return ( {this.props.alt} ); } } class Square extends React.Component { render() { const baseStyle = { height: 60, width: 60, display: "flex", alignItems: "center", justifyContent: "center" }; const style = { ...baseStyle, backgroundColor: this.props.color }; return (
{this.props.children}
); } } class Board extends React.Component { render() { const boardStyle = { display: "flex", flexDirection: "column", border: "2px solid #333", marginTop: 20 }; const blackPawn = "black-pawn.pg"; let rows = []; for (let i = 0; i < 8; i++) { let rowSquares = []; for (let j = 0; j < 8; j++) { const color = (i + j) % 2 === 0 ? "#Cff" : "#300"; let piece = null; if (i === 1) { piece = ; } rowSquares.push( {piece} ); } rows.push(
{rowSquares}
); } return
{rows}
; } } class App extends React.Component { render() { const appStyle = { textAlign: "center", fontFamily: "Arial, sans-serif" }; return (
); } } ReactDOM.render( , document.getElementByclass("container") );