I'm relatively new to react and attempted to create a simple tic-tac-toe game. Would be great if i could get some feedback on this. Again, at this point using only react (no redux).

main.js - main file which adds our App component to the DOM

import React from 'react';
import ReactDOM from 'react-dom';
import App from './container/App';
 
document.addEventListener('DOMContentLoaded', function() {
  ReactDOM.render(
    React.createElement(App),
    document.getElementById('mount')
  );
});

App.js - root component that contains the Board and Dashboard. One specific question i had here was, when i receive the reset() event from my Dashboard App whats the best practice on how i can end up triggering the reset() of Board?

import React, { Component } from 'react';
import Board from './Board'
import Dashboard from './Dashboard'

export default class App extends Component {
    
    constructor(props) {
        super(props)
        
        this.state = {
            winner: ''
        }
    }

    reset() {
        console.log('how do i pass reset to Board...?')
        
    }

    hasWinner(winner) {
        this.setState({
            winner: winner
        })
    }

    render() {
        return (
            <div>
                <Board rows={3} cols={3} hasWinner={this.hasWinner.bind(this)} />
                <Dashboard winner={this.state.winner} reset={this.reset.bind(this)} />
            </div>
        )
    }

}

Board.js - Board component that contains Cell components! Please ignore the checkWinner() method for the purpose of this review.

import React, { Component } from 'react';
import Cell from './Cell'
import styles from '../css/board.css'

export default class Board extends Component {

    constructor(props) {
        super(props)

        let board = this.createBoard();

        this.state = {
            board: board,
            currentPlayer: 'X'
        }
    }

    createBoard() {
        let board = new Array(this.props.rows);
        for ( var row = 0 ; row < this.props.rows ; row++ ) {
            board[row] = new Array(this.props.cols);
            board[row].fill('');
        };  

        return board;   
    }

    checkWinner() {
        // TODO: please add correct winner algo!
        return this.state.board[0][0];
    }

    drawBoard() {
        let board = [];
        for ( let i = 0 ; i < this.props.rows ; i++ ) {
            for ( let j = 0 ; j < this.props.cols ; j++ ) {
                var id = i + '' + j;
                board.push(
                    <Cell 
                        key={id}
                        id={id}
                        play={this.play.bind(this)}
                        value={this.state.board[i][j]} />
                );
            }
        }
        return board;
    }

    reset() {
        let board = this.createBoard();
        this.setState({
            board: board,
            currentPlayer: 'X'
        })
    }

    play(ij) {
        let i = ij[0];
        let j = ij[1];
        let board = this.state.board;
        board[i][j] = this.state.currentPlayer;
        this.setState({
            board: board,
            currentPlayer: this.state.currentPlayer==='X'?'O':'X'
        })

        let winner = this.checkWinner();
        if ( winner != '' ) {
            this.props.hasWinner(winner);
            this.reset();
        }
    }

    getClassName() {
        return styles.board
    }

    render() {
        return (
            <div className={this.getClassName()}>
                {this.drawBoard()}
            </div>
        )
    }

}

Cell.js - Cell component

import React, { Component } from 'react';
import styles from '../css/cell.css'

export default class Cell extends Component {

    constructor(props) {
        super(props)
    }

    getClassName() {
        return styles.emptycell
    }

    play() {
        if ( this.props.value === '' )
            this.props.play(this.props.id)
    }

    render() {
        return (
            <div 
                onClick={this.play.bind(this)} 
                className={this.getClassName()}>
                    {this.props.value}
            </div>
        )
    }

}

Dashboard.js - Component to show winner and contains a reset button.

import React, { Component } from 'react'

export default class Dashboard extends Component {  

    constructor(props) {
        super(props)

    }

    render() {
        const winner = this.props.winner
                            ?<h1>And the winner is: {this.props.winner}</h1>
                            :<p></p>
        return (
            <div>
                {winner}                    
                <input type="button" value="reset" onClick={this.props.reset} />
            </div>
        )

    }
}