React guidelines to the best

Let’s accept the fact that there’s no “best". Either way I decided to express my opinion here about what are some key factors to keep in mind when you decide to take your skills to the next level. Keeping things consistent, will definitely help to maintain and escalate applications. If you are simply looking for the solution to a specific problem, do not continue reading.

Time is important

Do not rush it. We all have been in that position: Our superiors in the company are pushing to deliver. You want to deliver, and stand out from the rest of the employees. This is not important in the long term.

The bad news here is that creating good quality stuff takes time. It is a good idea to take your time to write code, research, learn, experiment with multiple solutions or approaches, and then read them again and compare them. Over time, this process will become faster and mentally more efficient.

Take your time to test your code; go for the edge cases, and then add them to your test.

I know this takes time, but having reliable code is like shifting gears in the code development speed.

Foundation

The first time I heard this word was during my active time as a break-dancer. I didn't know that it referred to the load-bearing part of a building. It is crucial to build high. So, as if they were dancing moves, they are required for everything to flow. You need a solid foundation too to build great React applications.

It would be really complicated to get reading and reading about React without being familiar with modern Javascript, understanding the underlying behavior of it, and then, how it affects React.

I personally come from the overwhelming world of Angular, where, even the documentation was quite technical, and guides used to be either too simple, or to omit important pieces. But this had a good impact, and I decided to learn about other crucial things like RxJS. In React, everything is a little more verbose, and guided, allowing you to get hands-on real fast. Don’t be fooled: take your time, and learn things in depth, to understand them deeper.

Taxonomy

When working on a project with teams of any size, it is significant to be in-line. In-line with things like objectives, preferences, and words.

A good exercise is to write a glossary of certain product-specific terms so everyone is aligned. If the designers and developers are using the same words for certain key aspects, meetings become shorter, and development of new features, or changes, require less effort to be transmitted to other teams or code reviewers.

Components

Create the best building blocks for your creation. At first, it may be complicated to find the generic of the component you are creating for that particular feature. Nonetheless, it is important that you create pieces that you want to reuse after.

Start with a good name, one that fits with your project taxonomy rules. Components in React are nicely composited. This powerful feature is to me key to create reusable components. Focus on the transmission and not the child elements.

Example: Create a Pizza of different flavors by using a generic dough, instead of a different component for each flavor available in the restaurant.

class PizzaDough extends React.Component {
  render() {
    return (
      <img src={props.url} />
    );
  }
}

class PizzaDough extends React.Component {
  render() {
    return (
      <Pizza ingredients={<PizzaIngredient url=”https://peperoniurl.com” />} />
    );
  }
}

Again, keep simple and generic. Creating a lot of components is hard at first, but good in the long term. Helps to move fast from there onwards. Small components are easier to debug, or to replace. It is not only necessary when building a UI kit, but in case you’re building one, make sure designers are in-line with these components and their styles. Designers have a trend to tweak or adjust components on every new design. :S

One of the things I like the most about React is having to manage the state without too much magic. Extending this is the way to go, so try to create functions without side effects. This is the base of functional programming. You will need these concepts when progressing to RxJS.

I like to be consistent and bind() all the handlers to the Bind manually on the constructor, and for that I make use of some templates in my editor. Use this as well to call super(props).

And yes, I am assuming that ES6 classes are the choice to create components uniformly.

Data structures

Immutability. Do not update the state directly, use a new object. I know this has been said multiple times already, but pay special attention to native methods that may modify or attempt to modify a value. Most of these functions have to with arrays.

// Nope! This breaks the object reference.
this.state.ingreditents.push(‘Another ingredient’);

// Use setState
this.setState({ ingredients: [...arrayList]})

Do not read the state after applying, there is a delay, so you may get the outdated value.

Forms

In React, there's no need to add the state of the form to the global state. Keep it simple in your component, and emit it as needed. In case your application has a lot of forms, consider using libraries like Formik or, for simpler cases you may even use things like react-hook-form.

Other apps strongly focused in high performant apps may benefit from using Unform.

Data fetching

I have a preference here for GraphQL and Apollo. The Apollo client enhances the power of GraphQL, and it serves as a state service in some cases thanks to its powerful caching.

For lists, I really like cursor pagination using Relay, but I am actually not sure what’s the best way to handle numbered pages, if needed at all for small lists.

Styles

Scoped styles prevent problems of collisions of classes. I combine this technique with only a few global styles that are not crucial to the app UI.

import React from 'react';
import {pizzaBase, pizzaBorder} from './Pizza.css';

class PizzaDough extends React.Component {
  render() {
    return (
      <div className={pizzaBorder}">
        <div className="{pizzaBase}">{props.ingredients}</div>
      </div>
    );

}

Accessibility

Pay good attention to ARIA labels, and semantic html. It not only helps users with special needs, but it may also help other developers since a high level of description also helps in the code.

Building

It may sound obvious, but enable production mode when in production. This allows minification, security checks and tree shaking. You can also improve large apps first load time splitting your code into multiple js files and load them on demand. Only good things!

Conclusion

Creating great React apps is a matter of time and persistence, but a good base, and time to dedicate is key. In the future I may create more specific articles about some points that appear in this article.