TIPS FOR GETTING REACT

Linting

Es una de las mejores prácticas para desarrollo, no sólo en react sino en el desarrollo en general. Es mantener el código limpio, utilizando una buena herramienta de linter. Para esto, se definen un conjunto de reglas que el código debe seguir.
El linter resalta donde se presenta algún error de escritura, asegurándose así, que todo el código pase estas reglas antes de hacer la fusión con el código base, permitiendo que el código sea más legible, el mantenimiento sea más fácil de hacer, y haciendo que los proyectos aumenten la calidad del código.

Un buen linter es ESLint para trabajar con archivos (.js, .jsx, etc) ya que posee diferentes complementos que ayudan a darle estilo al código, uno de los más comunes para React es eslint-plugin-react, que se puede instalar via npm.

Componentes

Los componentes en React pueden ser de dos tipos:
Componentes Funciones y Componentes de Clases

Los componentes funcionales, son solo funciones puras de JavaScript que toman una propiedad como argumento opcional y retornan un componente de React. por ejemplo

Los componentes de clases ofrecen más funcionalidad y características como por ejemplo, estados del componente y los ciclos de vida del componente. Por ejemplo:

Mantener los componentes pequeños (modulares, funcionales)
La extracción de componentes hará que la aplicación sea más organizada, más modular y más sólida estructuralmente. Hay que tener en cuenta la recomendación anterior y subdividir el código en componentes funcionales siempre que se pueda. Algunos beneficios de tener componentes pequeños son:
• Código más legible
• Se puede testear más fácil
• Mejoras en el mantenimiento del código
• Código reutilizable.

Entender cómo manejar el this
La primer manera de manejar this es no manejarlo en lo absoluto y usar un componente funcional en su lugar. Pero si se está utilizando ES6, tendrá que hacer el bind manualmente ya que React no hace el bind automático de las funciones dentro del componente. Hay varios métodos para hacer esto:
• Hacer bind en el render().
• Usar arrow function en el render().
• Hacer bind en el constructor().

Usar una función en setState(), no un objeto
De acuerdo con la documentación de React, este no garantiza que los cambios en el estado se apliquen inmediatamente. Por lo tanto leer this.state() justo después de setState() puede convertirse en un error potencial porque this.state() puede no ser lo que piense que es.
Entonces, en lugar de actualizar el estado en una función, se debe actualizar en una función para evitar esos posibles errores.

Utilizar prop-types
Prop-types es una librería para verificar las propiedades y puede ayudar a prevenir bugs, asegurándose que las propiedades y su tipo son los adecuados para su correcto funcionamiento, esta librería es un paquete externo que se puede instalar via npm. Simplemente se importa el paquete que se instaló, luego agregue propTypes a su componente y valide las propiedades de su componente.