CODEWITHSUNDEEP
javascriptreactjsinheritanceecmascript-6
Talha Awan
Talha Awan

Reputation: 4619

Use es6 classes other than component (React Js)

In React's official tutorial (tic tac toe), three components are used: Game, Board, and Square.

Game contains an array of squares that can contain X, O and null: All three are primitive types.

My question: Is it an accepted practice to use es6 classes (not extending component because not rendering anything) to hold information primitives certainly cannot hold? The classes can also be inherited from other classes.

For example, can we store objects of Piece class in squares array and instead of X/O show piece.name in the square? And can we move a piece from i to j to reflect it on the board of squares?

Need to ask this for two reasons:

  1. Almost all React examples revolve around components. I haven't yet seen classes used otherwise.

  2. Inheritance is discouraged for components (composition vs inheritance), which I think would be needed to specialize Piece class in the example above.

Thanks.

Upvotes: 1

Views: 253

Answers (1)

Kyle Richardson
Kyle Richardson

Reputation: 5645

Here is an example of what I'm talking about. I did not include any state updating mechanism, and this is rather conceptual, but I think you'll get the gist.

// holds the state of your board and calculates the view layer
class Board extends PureComponent {
    constructor( props ) {
        super( props );

        // create pieces for however you want the game to start
        this.pieces = {
            p1: new piece( "Lumberjack" ),
            p2: new piece( "Lumberjack" ),
            p3: new piece( "Lumberjack" ),
            p4: new piece( "Tree" ),
            p5: new piece( "Tree" ),
            p6: new piece( "Tree" )
        }

        // flatten for easy and speed of access
        const { p1, p2, p3, p4, p5, p6 } = this.pieces;

        // initial state, this is what gets updated by this.setState method
        // to update the rendered view
        this.state ={
            squares: [
                [ p1, p2, p3 ],
                [ null, null, null ],
                [ p4, p5, p6 ]
            ]
        };
    }

    // render method that produces the view
    render() {
        const { squares } = this.state;
        const iLength = squares.length;
        let i, j jLength, components = [ ];

        // generate the Squares from this.state data
        for ( i = 0; i < iLength; i++ ) {
            jLength = squares[ i ].length;
            for ( j = 0; jLength; j++ ) {
                components.push( <Square piece={ squares[ i ][ j ] } /> );
            }
        }

        // render the Squares containing the pieces
        return (
            <div className="board">
                { components }
            </div>
        );
    }
}

// piece constructor
function piece( name ) {
    this.name = name;
}

You'd end up with 9 squares on a board. One side would be Lumberjacks, the middle would be clear, and there'd be so scared Tree's on the otherside.

Upvotes: 1

Related Questions