How to organize my project?

Question

I’m starting to learn react Activate and I am very doubtful about how to structure my project. I am creating an old game, which has the following configuration:

As you can see, each of the components resides in its own js file.

I’m thinking where is the best place to put the logic of the game, I mean, let’s assume that I have a 3x3 matrix as an attribute of my root component (assuming the component structure is a tree) and the leaves are the empty spaces where we can mark 'X' or 'O'.

How do you communicate the leaves to the root? For example, by clicking on an empty space, I invoke a method putMarkOn (row, col), who would be in the game class, for example.

The image shows the structure of the components, what I want to know is ... where to insert the logic, maybe in an external file called Gamelogic?

And how to update the state of the game according to the touch interaction?

Answer 1

First React itself is a library that proves the layer V of said MVC. The View is basically composed of components.

There are components dummy, like the ones you own (Titlebox, Contentbox, Row, Col and etc...), and business components. The latter consists of elements dummy, and business rules.

In your case you have the Touchbox, you can separate it into two components. First one dummy that only proves the rendering and another business component that contains the rendering component and also the business rule.

export default class ComponenteNegocio extends Component {

    constructor(props) {
        super(props)
    }

    /*
        Aqui vai a regra de negócio
    */

    render() {
        return (
            <Dummy { ...this.props }></ Dummy>
        )
    }
}

Remembering that you can have multiple business components in the same application, whenever using this type of component you render the same when you want a component with rules and render the dummy when you just want to show something without the business rule. Ideally create two folders at the root of the project one with components dummy and another with the business