Conventions to create a ReactJS Web Application



This document aims to reduce the friction between patterns and ways of doing common tasks during the development of a ReactJS Web Application.

Here, we explain the problem, choose a convetion, and explain the reasons:

1) Application Starter

## 2) Architecture ## 3) State Management ## 4) File Structure ## 5) Props validation ## 6) Css and Theme ## 7) HOC vs Composition ## 8) API communication ## 9) Notifications ## 10) Routing ## 11) State intialization ## 11) Data Validation ## 11) Testing

Use constructor to initialize state instead of static members:

PREFER THIS:

export default class SwiperView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cards: [],
            isLoaded: false,
            latitude: 0,
            longitude: 0,
            numPage: 0,
            urlPage: '',
        };
        this.cardIndex = 0;
    }
...

AND NOT THIS:

export default class SwiperView extends Component {
    static getInitialState() {
        return {
            cards: [],
            isLoaded: false,
            latitude: 0,
            longitude: 0,
            numPage: 0,
            urlPage: '',
        }
    }

    constructor(props) {
        super(props);
        this.state = SwiperView.getInitialState();
        this.cardIndex = 0;
    }
...

Justification:

  • Code redeability
  • Consistency: Initialization should always be in the constructor

12) Testing

SHARE:

READ MORE