React.js widely known as ReactJS or React is an open-source JavaScript library for building interactive user interfaces. Develop by Facebook and maintained by a community of individual developers and organizations. React makes use of a component-based approach for front-end web development, while making use of server-side rendering as well as virtual DOM to build a responsive performance-oriented solution for reusable UI components.

So, whether you are just a beginner and diving for the first time in React.js or simply looking forward to the best practices for React architecture, here are some tips to keep your code clean and organized as your React project grows.

React precisely take care of the view layer of an application; it does not apply any specific architecture just like MVC or MVVM. Throughout the numbers of iterations in my last project, I have picked up best practices for organizing large react applications, some of which are listed below.

1. Directory Layout

The styling, as well as the code of the components, were individually separated. All the styles were made live in the CSS file. The component was separated from the styles:

============================================================================

├── components
│   └── Slider
│       ├──  _tests_
│       │   └── Slider-test.js
│       └── Slider.jsx
└── styles
    └── editor-SDK.scss

Over the several refactoring, I experienced that this approach wasn’t up to the mark. So I decided to switch to a component-centric file layout:

components
    └── Slider
        ├── _tests_
        │   └── Slider-test.js
        ├── Slider.jsx
        └── Slider.scss

The reason behind the idea was to locate components in a single folder and make it very simple to extract code into NPM module.

There is a drawback of this directory structure that importing components require you to import a fully qualified path.

import Slider from 'components/Slider/Slider'

But, I like to write in this way:

import Slider from 'components/Slider'

The simple way to solve this problem is to modify the component file to index.js:

components

    └── Slider
        ├── _tests_
        │   └── Slider-test.js
        ├── Slider.scss
        └── index.jsx

Unfortunately, at the time of debugging React components in Chrome when the error occurs, the debugger updated me with a lot of index.js files and which didn’t allow me to go with this option.

The solution I ended up using was Node.js to resolve mechanism, making it rock solid and future-proof.

components
    └── Slider
        ├── _tests_
        │   └── Slider-test.js
        ├── Slider.jsx
        ├── Slider.scss
        └── package.json

Within package.json I make use of the main property to set the access point to the component:

{
  "main": "Slider.jsx"
}
MAKING USE OF THAT ADDITION, I IMPORT A COMPONENT THIS WAY:
import Slider from 'components/Slider'

Higher order Components

Sometimes you are required to make sure that React component is only shown when a user logged into your application. On your way to DRY up the code, you will come across HOCs that help you to be abstract and extract specific concerns of a component. HOC – higher order component is a function that collects React component as a parameter and return another React component.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';

export default function componentAuth(EncloseComponent) {
  class AuthenticatedComponent extends Component {
    static propTypes = {
      userList: PropTypes.object,
      dispatch: PropTypes.func.isRequired
    };

    componentDidMount() {
      this._checkAndRedirect();
    }

    componentDidUpdate() {
      this._checkAndRedirect();
    }

    _checkAndRedirect() {
      const { dispatch, userList } = this.props;

      if (!userList) {
        dispatch(push('/signin'));
      }
    }

    render() {
      return (
{ this.props.userList ? : null }
      );
    }
  }

  const encloseComponentName = EncloseComponent.displayName || EncloseComponent.name || 'Component';
  AuthenticatedComponent.displayName = `Authenticated(${encloseComponentName})`;

  const mapStateToProps = (state) => {
    return {
      userList: state.account.userList
    };
  };

  return connect(mapStateToProps)(AuthenticatedComponent);
}

Function as Children

Building a collapsible table row is not a simple task. So, how do you prefer to render the collapse button? What idea would you implement to display the children when the table is not collapsed? Instead of explaining in simple words let me make you understand through below table.

import React, { Component } from "react";

export default class Table extends Component {
  render() {
    return (
      
        {this.props.children}
This is table head
    );
  }
}
import React, { Component } from "react";

export default class ToggleTableBody extends Component {
  constructor(props) {
    super(props);
    this.state = { isCollapsed: false };
  }

  toggleBody = () => {
    this.setState({ isCollapsed: !this.state.isCollapsed });
  };

  render() {
    return (
      
        {this.props.children(this.state.isCollapsed, this.toggleBody)}
      
    );
  }
}

    {(isCollapsed, toggleBody) => {
      if (isCollapsed) {
        return (
          
        );
      } else {
        return (
          
        );
      }
    }}
This is table contents

Wrapping Up

I hope I have served your purpose to understand architectural React patterns. If I have missed something then definitely, there must be best practices out there, or it would be great if you could mention your preferable way in the comment section below.

But, if you are looking forward to hire react js developers and get your job done, then you have landed on the right page. We hold a pool of skilled react developers who have in-depth knowledge and extensive experience in building interactive, intuitive, and incredible UIs for SaaS software, web dashboard, games, an eCommerce store and more.