7 trucos y consejos en React

Utilice TypeScript

Ya sea que estemos hablando sólo de react o de otras bibliotecas, el uso de Typescript ayudará mucho en los esfuerzos para mantener su código organizado. comparemos lo siguiente Javascript vs Typescript tratando con tipos props.

import PropTypes from 'prop-types'

function UserCard({ usuario }) {
devuelve

{nombre.usuario}, {apellido.usuario}

}

UserCard.propTypes = {
usuario: PropTypes.shape({
nombre: PropTypes.string.isRequired,
apellido: PropTypes.string.isRequired
...
})
}

function UserList({ users }) {
devuelve

{users.map((usuario) => )}

}

UserList.propTypes = {
usuarios: PropTypes.arrayOf(PropTypes.shape({
nombre: PropTypes.string.isRequired,
apellido: PropTypes.string.isRequired
...
}))
}

interfaz Usuario {
nombre: ¡Cadena!
apellido: ¡Cadena!
...
}

function UserCard({ user }: { user: User }) {
devuelve

{user.nombre}, {user.apellido}

}

function UserList({ users }: { users: User[] }) {
devuelve

{users.map((usuario) => )}

Imagina tener todos tus esquemas de datos como interfaces en un único lugar y reutilizarlos en el resto de tu código. Esto no sólo te ayudará a evitar errores tipográficos, sino que en caso de que quieras cambiar el esquema, sólo deberás cambiarlo en un único lugar.

Además, muchas bibliotecas javascript muy conocidas están migrando a Typescript, como por ejemplo AdonisJS

Componentes de presentación y contenedores separados

Separar los componentes de presentación y de contenedor hace que nuestro código sea más fácil de probar y razonar.

Componentes de presentación se ocupan de cómo se ven las cosas. Recibe su datos y comportamiento de los componentes padre.

Componentes del contenedor se ocupan de cómo funcionan las cosas. Proporcionan la datos y comportamiento a componentes de presentación u otros contenedores.

Utilizar este enfoque nos permite reutilizar los mismos componentes de presentación con datos y comportamientos diferentes. Además de eso, hace que nuestro código sea más limpio y mucho más fácil de probar.

Compruebe el siguiente ejemplo con el Componente de Usuario que se utiliza con diferentes contenedores que proporcionan diferentes datos y comportamiento.

función BuyerContainer() {
devuelve
}

function VendedorContenedor() {
return
}

function UserComponent({ nombre, onClick }) {
return

}

Gracias a los ganchos React, ahora puede utilizar el gancho State para almacenar el estado en un componente funcional, o incluso utilizar el ciclo de vida del componente mediante useEffect. Los componentes funcionales son fáciles de leer y probar. React Core tiene algunos otros hooks útiles que puedes explorar en Hooks Reference. Lo sorprendente es que también puedes definir tus hooks personalizados. En el siguiente ejemplo, hemos creado un hook react personalizado llamado useDebounce. Que se utiliza para limitar las llamadas a la API de autocompletar cuando el texto de entrada cambia.

import { useEffect } de 'react';
import { debounce } from 'lodash';
export default function useDebounce( fn, delay = 500 ) {
const debounced = useMemoOne( () => debounce( fn, delay ), [
fn,
delay,
] );
useEffect( () => () => debounced.cancel(), [ debounced ] );
return debounced;
}
export default function SearchComponent()
const fetchAutoComplete = useDebounce((e) => {
      // Fetch API (opcional)
}, 1000) // 1 seg

return (

{...}
)
}

Además, los ganchos React son un gran sustituto de los componentes de orden superior (HoC). Styled Component Styled Component es una biblioteca que permite la introducción de CSS dinámico a nivel de componente, aprovechando las ventajas de ES. Hace que tus componentes sean más predecibles y reutilizables. Olvídese de perder demasiado tiempo buscando el nombre de clase adecuado para un elemento mientras intenta evitar utilizar uno ya existente. Con Styled Components te aseguras de que tus estilos se apliquen al componente y se autogeneren los nombres de clase en el paso de compilación. Además, nunca ha sido tan fácil crear CSS dinámico. tus estilos se generarán según los props pasados al componente. En el siguiente ejemplo, el estilo div depende tanto de la prop perfilada como del tema global.

const Envoltorio = styled.div`

  borde: ${props => props.outlined ? '1px solid' : 'none'};

    fondo: ${props => props.theme.light ? 'negro' : 'blanco'}

El último punto sobre styled-components es que mejora el rendimiento al no cargar estilos innecesarios de componentes no utilizados. Slot Fill Library Supongamos que has definido un diseño para tu aplicación React y quieres añadir un widget en la barra lateral sólo para una página específica. Si no consideraste ese caso desde el principio puede requerir un gran cambio en el layout. Pero usando una librería como ‣ Puedes simplemente definir un Slot en la Sidebar. De esta forma evitarás pasar banderas a lo largo del árbol de componentes para acceder a la barra lateral. Tiene un comportamiento similar a React Portals que también es una gran solución para casos como Modals, Tooltips...

import { Slot, Fill, Provider } from 'react-slot-fill';
const Sidebar = (props) =>
 
export default Barra;
Sidebar.Item = (props) =>

{ props.label }
const Widget = () =>
[

];
const Página = ({hijos}) =>

{hijos}

const Página de inicio = () =>

una Página sin Widjet
const DashboardPage = () =>

una Página con Widjet

Componentes de orden superior Aunque los hooks React sustituyen a los HOC en la mayoría de los casos. Los HoCs siguen siendo una gran opción para ocultar la complejidad de componentes como proporcionar múltiples props a Componentes de Página o renderizado condicional (Rutas Privadas, estado de carga...) El siguiente ejemplo ilustra cómo podemos encapsular la complejidad tanto de las Rutas Privadas como de los props comunes de Página en HoCs reutilizables aplicados a todas las páginas de la aplicación. Tenga en cuenta que la mayoría de los casos HoCs pueden ser sustituidos por React Hooks. y que podemos por error anular props por HoCs compuestos. Así que por favor, utilice HoCs sólo cuando sea necesario para mantener los componentes de la página más limpia. de lo contrario, utilice React Hooks.

function withPrivateRoute(Componente) {
...
return function PrivateRoute(props) {
if (!userConnected) return ;
return ;
};
}
function withPageProps(Componente) {
...
return function privateRoute(props) {
return ;
};
}
function ProfilePage({ navegación, rutaactual, usuarioactual}) {
return
Página de Perfil
}
export default withPrivateRoute(withPageProps(ProfilePage))

Límites de error Los límites de error son componentes de clase, que capturan todos los errores/excepciones lanzados a nivel de los hijos. Cuando se declaran en el nivel superior te permitirán hacer una gestión adecuada de los errores mostrando un mensaje de error y registrando el error en una herramienta de monitorización de la plataforma como Sentry. De esta forma serás el primero en detectar los errores y tratar de solucionarlos antes de que afecten a la experiencia del usuario. Nota: Los ErrorBoundaries deben ser declarados en clases que no soporten componentes funcionales.

class ErrorBoundary extends React.Componente {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMySentry(error, errorInfo);
}
render() {
if (this.state.hasError) {
return
¡Algo ha ido mal ! Contactar con Admin
;
}
return this.props.children;

}
}