Prácticas recomendadas de React para mejorar su juego en 2022

React se ha mantenido como una de las bibliotecas más populares para crear interfaces de usuario al crear aplicaciones web. Es ampliamente utilizado por muchas empresas y tiene una comunidad activa.

Como desarrollador de React, comprender cómo funciona la biblioteca no es lo único que necesita para crear proyectos que sean fáciles de usar, escalables y fáciles de mantener.

También es necesario comprender ciertas convenciones que le permitirán escribir código React limpio. Esto no solo lo ayudará a brindar un mejor servicio a sus usuarios, sino que también facilitará que usted y otros desarrolladores que trabajan en el proyecto mantengan la base del código. ¿Estás trabajando en tu próximo proyecto de React? Aprender a escribir código React limpio es un factor de cambio de juego Comience aquí ️ Haga clic para twittear

En este tutorial, comenzaremos hablando sobre algunos de los desafíos comunes que enfrentan los desarrolladores de React y luego profundizaremos en algunas de las mejores prácticas que puede seguir para ayudarlo a escribir el código de React de una manera más eficiente.

¡Empecemos!

Desafíos que enfrentan los desarrolladores de React

En esta sección, analizaremos algunos de los principales desafíos que enfrentan los desarrolladores de React durante y después de la creación de aplicaciones web.

Todos los desafíos que verá en esta sección se pueden evitar siguiendo las mejores prácticas, que analizaremos en detalle más adelante.

Comenzaremos con el problema más básico que afecta a los principiantes.

Requisitos previos para reaccionar

Uno de los principales desafíos que enfrentan los desarrolladores de React es comprender cómo funciona la biblioteca, junto con los requisitos previos para usarla.

Antes de aprender React, debe saber un par de cosas. Dado que React usa JSX, es imprescindible conocer HTML y JavaScript. Por supuesto, también debe conocer CSS o un marco CSS moderno para diseñar sus aplicaciones web.

En particular, existen conceptos y funcionalidades centrales de JavaScript que debe conocer antes de sumergirse en React. Algunos de ellos, que en su mayoría se incluyen en ES6, incluyen:

• Funciones de flecha
• Operador de descanso
• Operador de propagación
• Módulos
• desestructuración
• métodos de matriz
• Literales de plantilla
• promesas
• variables let y const

Los temas de JavaScript enumerados anteriormente lo ayudarán a comprender, como principiante, cómo funciona React.

También aprenderá sobre nuevos conceptos en React, como:

• Componentes
• JSX
• Administración del Estado
• Accesorios
• Elementos de representación
• Manejo de eventos
• Representación condicional
• Listas y claves
• Formularios y validación de formularios
• Manos
• Estilismo

Tener una sólida comprensión de los conceptos de React y los requisitos previos para usar la biblioteca lo ayudará a utilizar sus funciones de manera eficiente.

Pero no dejes que esto te abrume. Con práctica y aprendizaje constantes, puede comprender rápidamente cómo usar React para crear proyectos increíbles. Es similar a aprender un nuevo lenguaje de programación: solo se necesita un poco de tiempo y práctica para comprenderlo.

Administración del Estado

Actualizar el estado/valor de sus variables en React funciona de manera diferente a como lo haría usando JavaScript estándar.

En JavaScript, actualizar una variable es tan simple como asignarle un nuevo valor usando el operador igual a ( = ). Aquí hay un ejemplo:

 var x = 300; function updateX(){ x = 100; } updateX(); console.log(x); // 100

En el código anterior, creamos una variable llamada x con un valor inicial de 300 .

Usando el operador igual a, le asignamos un nuevo valor de 100 . Esto fue escrito dentro de una función updateX .

En React, actualizar el estado/valor de sus variables funciona de manera diferente. Así es cómo:

 import { useState } from 'react'; function App() { const [x, setX] = useState(300) let updateX =()=>{ setX(100); } return ( <div className="App"> <h1>{x}</h1> <button onClick={updateX}>Update X</button> </div> ); } export default App;

Al actualizar el estado de una variable en React, utiliza el useState Hook. Hay tres cosas a tener en cuenta al usar este gancho:

• El nombre de la variable
• Una función para actualizar la variable.
• El valor/estado inicial de la variable

En nuestro ejemplo, x es el nombre de la variable y setX es la función para actualizar el valor de x , mientras que el valor inicial ( 300 ) de x se pasa como parámetro a la función useState :

 const [x, setX] = useState(300)

Para actualizar el estado de x , usamos la función setX :

 import { useState } from 'react'; let updateX =()=>{ setX(100); }

Entonces, la función updateX invoca la función setX , que luego establece el valor de x en 100 .

Si bien esto parece funcionar perfectamente para actualizar el estado de sus variables, aumenta la complejidad de su código en proyectos muy grandes. Tener un montón de State Hooks hace que el código sea muy difícil de mantener y comprender, especialmente a medida que escala su proyecto.

Otro problema con el uso de State Hook es que estas variables creadas no se comparten entre los diferentes componentes que componen su aplicación. Todavía tendría que hacer uso de Props para pasar los datos de una variable a otra.

Afortunadamente para nosotros, hay bibliotecas creadas para manejar la administración de estado de manera eficiente en React. Incluso le permiten crear una variable una vez y usarla en cualquier lugar que desee en su aplicación React. Algunas de estas bibliotecas incluyen Redux, Recoil y Zustand.

El problema de elegir una biblioteca de terceros para la administración del estado es que se vería obligado a aprender nuevos conceptos ajenos a lo que ya aprendió en React. Redux, por ejemplo, era conocido por tener una gran cantidad de código repetitivo, lo que dificultaba que los principiantes lo entendieran (aunque esto se solucionó con Redux Toolkit, que le permite escribir menos código que con Redux).

Mantenibilidad y Escalabilidad

A medida que los requisitos del usuario de un producto continúan cambiando, siempre existe la necesidad de introducir cambios en el código que conforma el producto.

A menudo es difícil escalar su código cuando ese código no es fácil de mantener para el equipo. Dificultades como estas surgen por seguir malas prácticas al escribir tu código. Puede parecer que funcionan perfectamente al principio, brindándole el resultado deseado, pero cualquier cosa que funcione "por ahora" es ineficiente para el futuro y el crecimiento de su proyecto.

En la siguiente sección, repasaremos algunas convenciones que pueden ayudarlo a mejorar la forma en que escribe su código React. Esto también lo ayudará a colaborar mejor cuando trabaje con un equipo profesional.

Mejores prácticas de reacción

En esta sección, hablaremos sobre algunas de las mejores prácticas a seguir al escribir su código React. Vamos a sumergirnos.

1. Mantener una estructura de carpetas clara

Las estructuras de carpetas lo ayudan a usted y a otros desarrolladores a comprender la disposición de los archivos y los activos que se utilizan en un proyecto.

Con una buena estructura de carpetas, es fácil navegar fácilmente, ahorrando tiempo y ayudando a evitar confusiones. Las estructuras de carpetas difieren según las preferencias de cada equipo, pero estas son algunas de las estructuras de carpetas más utilizadas en React.

Agrupación de carpetas por características o rutas

Agrupar archivos en su carpeta de acuerdo con sus rutas y características ayuda a mantener todo lo relacionado con una característica en particular en un solo espacio. Por ejemplo, si tiene un panel de usuario, puede tener los archivos JavaScript, CSS y de prueba relacionados con el panel en una carpeta.

He aquí un ejemplo para demostrar que:

 dashboard/ index.js dashboard.css dashboard.test.js home/ index.js Home.css HomeAPI.js Home.test.js blog/ index.js Blog.css Blog.test.js

Como se puede ver arriba, cada característica principal de la aplicación tiene todos sus archivos y activos almacenados en la misma carpeta.

Agrupación de archivos similares

Alternativamente, puede agrupar archivos similares en la misma carpeta. También puede tener carpetas individuales para Hooks, componentes, etc. Mira este ejemplo:

 hooks/ useFetchData.js usePostData.js components/ Dashboard.js Dashboard.css Home.js Home.css Blog.js Blog.css

No tiene que seguir estrictamente estas estructuras de carpetas al codificar. Si tiene una forma específica de ordenar sus archivos, hágalo. Siempre que usted y otros desarrolladores tengan una comprensión clara de la estructura de archivos, ¡ya está listo!

2. Instituir una Orden de Importación Estructurada

A medida que su aplicación React continúa creciendo, está obligado a realizar importaciones adicionales. La estructura de sus importaciones contribuye en gran medida a ayudarlo a comprender qué constituye sus componentes.

Como convención, agrupar utilidades similares parece funcionar bien. Por ejemplo, puede agrupar las importaciones externas o de terceros por separado de las importaciones locales.

Echa un vistazo al siguiente ejemplo:

 import { Routes, Route } from "react-router-dom"; import { createSlice } from "@reduxjs/toolkit"; import { Menu } from "@headlessui/react"; import Home from "./Home"; import logo from "./logo.svg"; import "./App.css";

En el código anterior, primero agrupamos bibliotecas de terceros (estas son bibliotecas que tuvimos que instalar de antemano).

Luego importamos archivos que creamos localmente como hojas de estilo, imágenes y componentes.

En aras de la simplicidad y la fácil comprensión, nuestro ejemplo no representa una base de código muy grande, pero tenga en cuenta que ser coherente con este formato de importaciones lo ayudará a usted y a otros desarrolladores a comprender mejor su aplicación React.

Puede ir más allá agrupando sus archivos locales de acuerdo con los tipos de archivo si eso funciona para usted, es decir, agrupando componentes, imágenes, hojas de estilo, ganchos, etc. por separado en sus importaciones locales.

Aquí hay un ejemplo:

 import Home from "./Home"; import About from "./About" import Contact from "./Contact" import logo from "./logo.svg"; import closeBtn from "./close-btn.svg" import "./App.css"; import "Home.css"

3. Adherirse a las convenciones de nomenclatura

Las convenciones de nomenclatura ayudan a mejorar la legibilidad del código. Esto no solo se aplica a los nombres de los componentes, sino incluso a los nombres de las variables, hasta los Hooks.

La documentación de React no ofrece ningún patrón oficial para nombrar sus componentes. Las convenciones de nomenclatura más utilizadas son camelCase y PascalCase.

PascalCase se usa principalmente para nombres de componentes:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

El componente anterior se llama StudentList , que es mucho más legible que Studentlist o studentlist .

Por otro lado, la convención de nomenclatura camelCase se usa principalmente para nombrar variables, Hooks, funciones, arreglos, etc.:

 & const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {} const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {}

4. Usa un filtro

Una herramienta de linter ayuda a mejorar la calidad del código. Una de las herramientas de linter más populares para JavaScript y React es ESlint. Pero, ¿cómo ayuda esto exactamente a mejorar la calidad del código?

Una herramienta de linter ayuda con la consistencia en una base de código. Al usar una herramienta como ESLint, puede establecer las reglas que desea que sigan todos los desarrolladores que trabajan en el proyecto. Estas reglas pueden incluir requisitos para el uso de comillas dobles en lugar de comillas simples, llaves alrededor de funciones de flecha, una convención de nomenclatura particular y mucho más.

La herramienta observa su código y luego le notifica cuando se ha roto una regla. La palabra clave o línea que rompe la regla normalmente se subraya en rojo.

Dado que cada desarrollador tiene su propio estilo de codificación, las herramientas de linter pueden ayudar con la uniformidad del código.

Las herramientas de Linter también pueden ayudarnos a corregir errores fácilmente. Podemos ver errores ortográficos, variables declaradas pero no utilizadas y otras funcionalidades similares. Algunos de estos errores se pueden corregir automáticamente a medida que codifica.

Herramientas como ESLint están integradas en la mayoría de los editores de código, por lo que obtiene funcionalidades de linter sobre la marcha. También puede configurarlo para que se adapte a sus requisitos de codificación.

5. Emplear bibliotecas de fragmentos

Lo bueno de usar un marco con una comunidad activa es la disponibilidad de herramientas que se crean para facilitar el desarrollo.

Las bibliotecas de fragmentos pueden acelerar el desarrollo al proporcionar un código precompilado que los desarrolladores usan con frecuencia.

Un buen ejemplo es la extensión de fragmentos de ES7+ React/Redux/React-Native, que tiene muchos comandos útiles para generar código precompilado. Por ejemplo, si desea crear un componente funcional React sin escribir todo el código, todo lo que necesita hacer usando la extensión es escribir rfce y presionar Enter .

El comando anterior generará un componente funcional con un nombre que se corresponda con el nombre del archivo. Generamos el siguiente código usando la extensión de fragmentos ES7+ React/Redux/React-Native:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

Otra herramienta de fragmentos útil es la extensión Tailwind CSS IntelliSense, que simplifica el proceso de diseño de páginas web con Tailwind CSS. La extensión puede ayudarlo con el autocompletado al sugerir clases de utilidad, resaltado de sintaxis y funcionalidades de linting. Incluso puede ver cómo se ven sus colores mientras codifica.

6. Combina CSS y JavaScript

Cuando se trabaja en proyectos grandes, el uso de diferentes archivos de hojas de estilo para cada componente puede hacer que la estructura de archivos sea voluminosa y difícil de navegar.

Una solución a este problema es combinar su código CSS y JSX. Puede usar marcos/bibliotecas como Tailwind CSS y Emotion para esto.

Así es como se ve el estilo con Tailwind CSS:

 <p className="font-bold mr-8">resource edge</p>

El código anterior le da al elemento de párrafo una fuente en negrita y agrega un margen a la derecha. Podemos hacer esto usando las clases de utilidad del marco.

Así es como le darías estilo a un elemento usando Emoción:

 <h1 css={css` color: black; font-size: 30px; `} > Hello World! </h1>

7. Limite la creación de componentes

Una de las características principales de React es la reutilización del código. Puede crear un componente y reutilizar su lógica tantas veces como sea posible sin volver a escribir esa lógica.

Con eso en mente, siempre debe limitar la cantidad de componentes que crea. No hacerlo infla la estructura de archivos con archivos innecesarios que no deberían existir en primer lugar.

Usaremos un ejemplo muy fácil para demostrar esto:

 function UserInfo() { return ( <div> <h1>My name is Ihechikara.</h1> </div> ); } export default UserInfo

El componente anterior muestra el nombre de un usuario. Si tuviéramos que crear un archivo diferente para cada usuario, eventualmente tendríamos una cantidad irrazonable de archivos. (Por supuesto, estamos usando la información del usuario para simplificar las cosas. En una situación de la vida real, puede estar lidiando con un tipo diferente de lógica).

Para hacer que nuestro componente sea reutilizable, podemos hacer uso de Props. Así es cómo:

 function UserInfo({userName}) { return ( <div> <h1>My name is {userName}.</h1> </div> ); } export default UserInfo

Después de eso, podemos importar este componente y usarlo tantas veces como queramos:

 import UserInfo from "./UserInfo"; function App() { return ( <div className="App"> <UserInfo userName={"Ihechikara"} /> <UserInfo userName={"John"} /> <UserInfo userName={"Jane"} /> </div> ); } export default App;

Ahora tenemos tres instancias diferentes del componente UserInfo que provienen de la lógica creada en un archivo en lugar de tener tres archivos separados para cada usuario.

8. Implementar la carga diferida

La carga diferida es muy útil a medida que crece su aplicación React. Cuando tiene una gran base de código, el tiempo de carga de sus páginas web se ralentiza. Esto se debe a que toda la aplicación debe cargarse cada vez para cada usuario.

"Lazy loading" es un término utilizado para varias implementaciones. Aquí, lo asociamos con JavaScript y React, pero también puede implementar la carga diferida en imágenes y videos.

De forma predeterminada, React agrupa e implementa toda la aplicación. Pero podemos cambiar este comportamiento mediante la carga diferida, también conocida como división de código.

Básicamente, puede limitar qué sección de su aplicación se carga en un punto en particular. Esto se logra dividiendo sus paquetes y cargando solo aquellos relevantes para los requisitos del usuario. Por ejemplo, primero puede cargar solo la lógica requerida para que el usuario inicie sesión y luego cargar la lógica para el tablero del usuario solo después de que haya iniciado sesión correctamente.

9. Emplee ganchos reutilizables

Los ganchos en React le permiten aprovechar algunas de las funcionalidades adicionales de React, como interactuar con el estado de su componente y ejecutar efectos posteriores en relación con ciertos cambios de estado en su componente. Podemos hacer todo esto sin escribir componentes de clase.

También podemos hacer que los ganchos sean reutilizables para que no tengamos que volver a escribir la lógica en cada archivo que se use. Hacemos esto creando ganchos personalizados que se pueden importar en cualquier lugar de la aplicación.

En el siguiente ejemplo, crearemos un gancho para obtener datos de API externas:

 import { useState, useEffect } from "react"; function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)) .catch((err) => console.log(`Error: ${err}`)); }, [url]); return { data }; } export default useFetchData;

Hemos creado un gancho para obtener datos de las API anteriores. Ahora se puede importar a cualquier componente. Esto nos ahorra el estrés de escribir toda esa lógica en cada componente donde tenemos que buscar datos externos.

El tipo de Hooks personalizados que podemos crear en React es ilimitado, por lo que depende de ti decidir cómo usarlos. Solo recuerde que si es una funcionalidad que debe repetirse en diferentes componentes, definitivamente debe hacerla reutilizable.

10. Registrar y administrar errores

Hay diferentes formas de manejar los errores en React, como usar límites de error, intentar y atrapar bloques o usar bibliotecas externas como react-error-boundary .

Los límites de error incorporados que se introdujeron en React 16 eran una funcionalidad para los componentes de clase, por lo que no lo discutiremos porque es recomendable que use componentes funcionales en lugar de componentes de clase.

Por otro lado, el uso de un bloque try y catch solo funciona para el código imperativo, pero no para el código declarativo. Esto significa que no es una buena opción cuando se trabaja con JSX.

Nuestra mejor recomendación sería usar una biblioteca como react-error-boundary. Esta biblioteca proporciona funcionalidades que se pueden envolver alrededor de sus componentes, lo que lo ayudará a detectar errores mientras se procesa su aplicación React.

11. Supervise y pruebe su código

Probar su código durante el desarrollo lo ayuda a escribir código mantenible. Desafortunadamente, esto es algo que muchos desarrolladores descuidan.

Aunque muchos pueden argumentar que las pruebas no son un gran problema al crear su aplicación web, tienen innumerables ventajas. Aquí hay algunos:

• Las pruebas lo ayudan a detectar errores y fallas.
• La detección de errores conduce a una mejor calidad del código.
• Las pruebas unitarias se pueden documentar para la recopilación de datos y futuras referencias.
• La detección temprana de errores le ahorra el costo de pagar a los desarrolladores para apagar el incendio que podría causar el error si no se controla.
• Las aplicaciones y los sitios libres de errores ganan la confianza y la lealtad de su audiencia, lo que conduce a un mayor crecimiento.

Puede usar herramientas como Jest o React Testing Library para probar su código. Hay muchas herramientas de prueba entre las que puede elegir; todo se reduce a la que mejor se adapte a sus necesidades.

También puede probar sus aplicaciones React a medida que las crea ejecutando las aplicaciones en su navegador. Por lo general, cualquier error detectado se muestra en la pantalla. Esto es similar a desarrollar sitios de WordPress usando DevKinsta, una herramienta que le permite diseñar, desarrollar e implementar sitios de WordPress en su máquina local.

12. Hacer uso de componentes funcionales

El uso de componentes funcionales en React tiene muchas ventajas: escribe menos código, es más fácil de leer y la versión beta de la documentación oficial de React se está reescribiendo usando componentes funcionales (ganchos), por lo que definitivamente debería acostumbrarse a usarlos. .

Con los componentes funcionales, no tienes que preocuparte por usar this o usar clases. También puede administrar fácilmente el estado de su componente escribiendo menos código gracias a Hooks.

La mayoría de los recursos actualizados que encontrará en React hacen uso de componentes funcionales, lo que facilita la comprensión y el seguimiento de guías y recursos útiles creados por la comunidad cuando se encuentra con problemas.

13. Manténgase actualizado con los cambios de versión de React

A medida que pase el tiempo, se introducirán nuevas funcionalidades y se modificarán algunas antiguas. La mejor manera de realizar un seguimiento de esto es ver la documentación oficial.

También puede unirse a las comunidades de React en las redes sociales para obtener información sobre los cambios cuando ocurran.

Mantenerse actualizado con la versión actual de React lo ayudará a determinar cuándo optimizar o realizar cambios en su base de código para obtener el mejor rendimiento.

También hay bibliotecas externas creadas alrededor de React con las que también debería estar actualizado, como React Router, que se usa para enrutar en React. Saber qué cambios hacen estas bibliotecas puede ayudarlo a realizar cambios importantes y relevantes en su aplicación y facilitar las cosas para todos los que trabajan en el proyecto.

Además, algunas funcionalidades pueden quedar obsoletas y ciertas palabras clave pueden cambiarse cuando se lanzan nuevas versiones. Para estar seguro, siempre debe leer la documentación y las guías cuando se realicen dichos cambios.

14. Utilice un proveedor de alojamiento rápido y seguro

Si desea que su aplicación web sea accesible para todos después de compilarla, debe alojarla. Es importante que utilice un proveedor de alojamiento rápido y seguro.

El alojamiento de su sitio web le brinda acceso a diferentes herramientas que facilitan el escalado y la administración de su sitio web. El servidor donde está alojado su sitio web hace posible que los archivos en su máquina local se almacenen de forma segura en el servidor. El beneficio general de alojar su sitio web es que otras personas pueden ver las cosas increíbles que ha creado.

Hay una variedad de plataformas que brindan servicios de alojamiento gratuitos a desarrolladores como Firebase, Vercel, Netlify, GitHub Pages o servicios pagos como Azure, AWS, GoDaddy, Bluehost, etc.

También puede utilizar la plataforma de alojamiento de aplicaciones de Kinsta. Todo lo que necesita hacer es conectarse a un repositorio de GitHub, elegir entre los 25 centros de datos posicionados globalmente de Kinsta y listo. Recibirá acceso a una configuración rápida, soporte 24/7, seguridad de primera línea, dominios personalizados, herramientas avanzadas de informes y monitoreo, y más.

Resumen

Aprender a usar React no es todo lo que se requiere para crear aplicaciones web sobresalientes. Al igual que con cualquier otro marco como Angular, Vue, etc., existen mejores prácticas que debe seguir para ayudarlo a crear productos eficientes.

Seguir estas convenciones de React no solo ayuda a su aplicación, sino que también tiene ventajas para usted como desarrollador frontend: aprende a escribir código eficiente, escalable y mantenible, y se destaca como profesional en su campo. ¿Quieres mejorar tu juego de codificación React? Todo lo que necesitas saber está en esta guía Haz clic para twittear

Entonces, cuando cree su próxima aplicación web con React, tenga en cuenta estas mejores prácticas para facilitar el uso y la administración del producto tanto para sus usuarios como para sus desarrolladores.

¿Qué otras mejores prácticas de React conoce que no se mencionaron en este artículo? Compártelas en los comentarios a continuación. ¡Feliz codificación!