How I arrange a React component

In this article, I’m going to offer my vision of how a basic React component should look and how to structure your React app. If you have a different point of view, go ahead and let me know 😉

I do like React and the concept of components as building blocks of your application. So, the fact that React is a library brings freedom to make everything we want and use any approach that we have in our mind. It sounds good because it is, but this liberation of development using React brings our application to the core of chaos: every team uses different concepts and arrangements. And, it touches not just a project folder structure but the arrangement of components as well.

If you’re a newbie in React, read the article about a quick start in React and then return to us.

Basic React component

To solve the problem of over diversity it’d be great to have a fixed component structure. I prefer the following:

class MyComponent extends Component {
  // prop types

  // state declaration

  // lifecycle methods

  // render

  // event handlers

  // private methods
}

The main idea of such an arrangement is that you process data (state and props) and construct a render method’s JSX. The idea to keep private methods after the “render” function is that you first read a method name in “render” before you read further and understand what the method does. And, if you pick good names for private methods, you rarely need to jump from reading the render method to the bottom of the component to understand what the component does. And, of course, it gives you a better way to understand and “read” a component.

Let’s take a look at an example. We will create a list of items and add an ability to filter the items by title. Also, all items have a formatted date of creation so, for this, we’re going to use a moment – a library with awesome API to process date.

class List extends Component {
 // props types
 static propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
     text: PropTypes.string,
     date: PropTypes.string,
   })),
 }

 // state declaration
 state = {
   seachString: '',
 }

 // lifecycle methods
 shouldComponentUpdate() {
   return !_.isEmpty(this.filterItems());
 }

 // render
 render = () => (
   <div>
     <input
       type="text"
       value={this.state.seachString}
       onChange={this.handleSearchStringChange}
     />

     <ul>
       {this.filterItems().map(({ text, date }) => (
         <li key={`${text}__${date}`}>
           {text}
           {this.formatDate(date)}
         </li>
       ))}
     </ul>
   </div>
 ); 

 // event handlers
 handleSearchStringChange = event =>
   this.setState({ seachString: event.target.value });

 // private methods
 filterItems = () =>
   this.props.items.filter(({ text }) =>
     (text.indexOf(this.state.seachString) !== -1));

 formatDate = date => 
   moment(date).format('MMM Do YY');
}

Here we go! We create the component using our arrangement approach, and it makes our components more predictable and quicker at reading your code.

React dumb components

In the React community, we define components as smart, which has a state, and dumb, which has no state. Most of your components should be dumb because they are easy to compose, reuse, and debug.

Most often, the dumb component is a simple function which gets props and returns JSX. And, the arrangement of such components should be simple: all handles should be passed to one and all the data should be already processed and formatted. Take a look: 

const Button = ({ label, onClick }) => (
  <button onClick={onClick}>
    {label}
  </button>
)

Actually, there is nothing to arrange and that’s the point: there is only the destructuring and the return of JSX. Simple and reusable.

Summary

The main purpose of such a component arrangement is to bring an order to this zoo of the approaches to work with React components and create a good React project structure. And, yes, you should have a linter for checking your code and keep the same approach in every point of your project. I’d recommend you to use our company’s linter config. We did it for you!

Make your application orderly and it’ll give a great sense of readability and then maintainability in the future 😉

Have a productive coding!

Yulia Garanok

Marketing Manager