How to organize my project?

2

I'm starting to learn react native and I have a lot of questions about how to structure my project. I'm creating a game of the old one, which has the following configuration:

Home As you can see, each component resides in its own js file.

I'm wondering where is the best place to put the game logic, I mean, let's assume I have a 3x3 array 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 putMarkOn (row, col) method, which 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 logic, maybe in an external file called GameLogic?

How to update the game state, according to the touch interaction?

    
asked by anonymous 18.04.2016 / 21:35

1 answer

0

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

There are dummy components, like the ones you have (TitleBox, ContentBox, Row, Col, etc.), and business components. The latter consists of dummy elements, and business rules.

In your case you have the TouchBox , you can separate it into two components. First a dummy that only renders 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, every time you use this type of component you render the same when you want a rule-based component and render the dummy when you just want to show something without the business rule. The ideal is to create two folders at the root of the project one with dummy components and another with the     

11.08.2016 / 19:41