Las mejores prácticas de reacción de PRDXN

Facebook React es una biblioteca JavaScript declarativa, eficiente y flexible para crear interfaces de usuario (UI).

Cuando comencé a escribir código en React, recuerdo haber visto muchos enfoques diferentes que varían mucho de un tutorial a otro. Entonces, mi equipo de PRDXN y yo elaboramos una guía / lista de mejores prácticas (BP) que nos ayudaría a todos a ponernos al día, más rápido.

Facebook React es una biblioteca JavaScript declarativa, eficiente y flexible para crear interfaces de usuario (UI).

La siguiente es nuestra guía. Esperamos que esto lo ayude a acelerar su adopción y uso de React; ya sea que recién esté comenzando / un principiante o un desarrollador experimentado.

1. Mantener una estructura de carpetas organizadas:

Como con cualquier proyecto de programación / codificación, ¡esto es muy importante! Si los archivos de su proyecto no están organizados lógicamente, usted y sus colaboradores pueden confundirse y perder un tiempo precioso buscando archivos o editando los archivos incorrectos.

En PRDXN se nos ocurrió la siguiente estructura de carpetas para hacer las cosas más fáciles y menos frustrantes para todos. Haga clic en reproducir para ver.

2. Componentes - Trozos y árboles. ¡Hola, eres un leñador de Javascript!

Los componentes son el corazón de una reacción. Un componente React es básicamente cualquier parte de una interfaz de usuario.

Crear fragmentos lógicos de IU (agrupaciones): siempre divida sus componentes en fragmentos (también conocidos como agrupaciones lógicas). Considere cualquier interfaz de aplicación y comience a dividir la interfaz de usuario en fragmentos lógicos más pequeños. Cada uno de estos fragmentos de UI (grupos) son componentes potenciales.

Árbol, ramas y subramas: la vista completa / completa de la IU (el árbol o el tronco) se divide en fragmentos lógicos (también conocidos como ramas). El árbol se convierte en el componente inicial (un componente de diseño) y luego cada fragmento en la interfaz de usuario (también conocido como rama) se convertirá en un subcomponente que se puede dividir en subcomponentes (también conocido como sub-ramas). Esto mantiene la IU organizada y también permite que los datos y los cambios de estado fluyan lógicamente del árbol a las ramas, y luego a las sub-ramas.

Crear agrupaciones lógicas de interfaz de usuario (trozos): árbol, ramas, subramas.

3. Componentes: funcionales y basados ​​en clases:

Hay dos tipos de componentes: funcionales y basados ​​en clases.

¿Cuándo debo ir con un componente funcional? Vaya con un componente funcional si su componente no hace mucho más que renderizar accesorios. Piense en los componentes funcionales como funciones puras: siempre se representarán de la misma manera y se comportarán de la misma manera, dados los mismos accesorios. Además, no les importan los métodos del ciclo de vida; son componentes sin estado.

Componente funcional, ejemplo.

¿Cuándo debo ir con un componente basado en clases? Si su componente necesita un estado interno y métodos de ciclo de vida del componente, elija un componente basado en la clase. Consulte esto para ayudarlo a comprender más sobre el "estado interno" y los "métodos del ciclo de vida".

Componente basado en clase, ejemplo.

4. Atrezzo! ¡Apoyos para ti! Apoyos para mí! ¡Pero no, estamos hablando de React Props!

“Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias (llamadas "accesorios") y devuelven elementos React que describen lo que debe aparecer en la pantalla ". Haga clic para obtener la fuente.

¡Trae los camellos! No, puedes dejar esos camellos en el postre. Estamos hablando de camelCase aquí. Siempre use camelCase para nombres de utilería. Los accesorios también se pueden ver como atributos, y la convención establecida por React es usar camelCase para los atributos JSX.

Siempre use camelCase para nombres de utilería.

Créeme, es verdad, ¡lo juro! Omita el valor del accesorio cuando sea explícitamente verdadero. Incluso si no asignamos un valor verdadero a un accesorio, se considera un valor verdadero, por lo que no es necesario asignar "verdadero" como valor al accesorio.

Omita el valor del accesorio cuando sea explícitamente verdadero.

Evite usar un índice de matriz como accesorio clave; use una identificación única en su lugar: hemos visto que muchos desarrolladores usan el índice de un elemento como clave cuando renderizan una lista, ¡lo cual no es tan bueno! Esto es lo que escriben incorrectamente ...

¡ESTE ES UN EJEMPLO DE LO QUE DEBE *** NO *** HACER!

Una clave es lo único que React usa para identificar elementos DOM. Entonces, ¿qué sucede si empujas un elemento a la lista o eliminas algo del medio? Si la clave es la misma que antes, React supone que el elemento DOM representa el mismo conjunto de componentes (como antes). ¡Pero este no es el caso!

Es por eso que debe usar una identificación única. Cada artículo debe tener una propiedad (ID) permanente y única. E idealmente, (la ID) debe asignarse cuando se crea el elemento. Entonces está escrito algo como esto ...

¡ESTE ES UN EJEMPLO DE LO QUE *** DEBE HACER ***!

Siempre defina defaultProps explícitos para todos los accesorios no necesarios. Proporcionar defaultProps significa que el lector de su código no tiene que asumir cosas, porque conocerán el valor predeterminado de la utilería simplemente mirando defaultProps mientras renderiza componentes.

Malo vs Buen ejemplo re: definiendo defaultProps.

Como puede ver, hay cosas pequeñas pero muy importantes que hacen que su código React esté relativamente libre de errores durante el proceso de revisión. Pasar el tiempo por adelantado para aprender estas mejores prácticas y usarlas significa que pasa menos tiempo reescribiendo el código para corregir sus errores, dándole más tiempo para hacer las cosas que ama. Y si hacer las cosas que amas significa escribir código, ¡tendrás más tiempo para escribir código para un proyecto diferente!

Más de las mejores prácticas de Reacción de PRDXN se pueden encontrar aquí en Github: https://github.com/prdxn/React-JS-Checklist. Por favor, siéntase libre de compartir y contribuir a esta lista. Y si tiene algún problema para acceder, contáctenos en los comentarios aquí.

¿Interesado en trabajar con PRDXN como cliente o como empleado? ¡Entonces golpeanos! Visite www.prdxn.com para obtener más detalles, incluidos los datos de contacto.