5 errores que cometí al iniciar mi primer proyecto React

5 errores que cometí al iniciar mi primer proyecto React |  consejos CSS

Ya sabes lo que es elegir un nuevo lenguaje o un nuevo marco. A veces hay una gran documentación para ayudarlo a navegar. Pero incluso la mejor documentación no cubre todo. Y cuando está trabajando con algo nuevo, seguramente encontrará un problema que no tiene una solución escrita.

Así fue como me fue la primera vez que creé un proyecto React, y React es uno de esos marcos con excelente documentación, especialmente ahora con documentación beta. Pero todavía me costaba salir de eso. Ha pasado bastante tiempo desde este proyecto, pero las lecciones que aprendí todavía están frescas en mi mente. Y aunque hay muchos tutoriales prácticos de React, pensé en compartir lo que desearía haber sabido cuando lo usé por primera vez.

De eso se trata este artículo: una lista de los primeros errores que cometí. Espero que ayuden a que el aprendizaje de React sea mucho más fluido para ti.

 

Use create-react-app para iniciar un proyecto

TL; DR Use Quick o Parcel.

Create React App (CRA) es una herramienta que lo ayuda a configurar un nuevo proyecto React. Crea un entorno de desarrollo con las mejores opciones de configuración para la mayoría de los proyectos de React. Esto significa que no tiene que perder tiempo configurando nada usted mismo.

Como principiante, ¡esta parecía una excelente manera de comenzar mi trabajo! ¡Sin configuración! ¡Solo comienza a codificar!

CRA utiliza dos paquetes populares para lograr esto, webpack y Babel. webpack es un paquete web que optimiza todos los activos de su proyecto, como JavaScript, CSS e imágenes. Babel es una herramienta que le permite usar nuevas funciones de JavaScript, incluso si algunos navegadores no las admiten.

Ambos son buenos, pero hay herramientas más nuevas que pueden hacer mejor el trabajo, especialmente Vite y Speedy Web Compiler (SWC).

Estas alternativas nuevas y mejoradas son más rápidas y fáciles de configurar que Webpack y Babel. Esto facilita el ajuste de la configuración, lo cual es difícil de hacer en crear-reaccionar-aplicación sin expulsar.

Para usar ambos al configurar un nuevo proyecto React, debe asegurarse de que esté instalada la versión 12 o superior de Node, luego ejecute el siguiente comando.

npm create vite

Se le pedirá que elija un nombre para su proyecto. Una vez que haya hecho eso, seleccione Reaccionar de la lista de marcos. Después de eso, puede seleccionar cualquiera Javascript + SWC O Typescript + SWC

Entonces tendrás que cambiar de directorio. cd en su proyecto y ejecute el siguiente comando;

npm i && npm run dev

Esto debería ejecutar un servidor de desarrollo para su sitio con la URL localhost:5173

Y es tan simple como eso.

Utilizando defaultProps para valores predeterminados

TL; DR Use los parámetros de función predeterminados en su lugar.

Los datos se pueden pasar a los componentes de React a través de algo llamado props. Estos se agregan a un componente al igual que los atributos de un elemento HTML y se pueden usar en una definición de componente tomando los valores relevantes del objeto prop pasado como argumento.

// App.jsx
export default function App() {
  return <Card title="Hello" description="world" />
}

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default Card;

Si alguna vez se requiere un valor predeterminado para un propEL defaultProp Se puede usar la propiedad:

// Card.jsx
function Card(props) {
  // ...
}

Card.defaultProps = {
  title: 'Default title',
  description: 'Desc',
};

export default Card;

Con JavaScript moderno, es posible deconstruir el props objeto y asígnele un valor predeterminado en el argumento de la función.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

export default Card;

Esto es más favorable porque los navegadores modernos pueden leer el código sin necesidad de una transformación adicional.

Desgraciadamente, defaultProps requieren que el navegador lea una transformación porque JSX (JavaScript XML) no es compatible de forma predeterminada. Esto podría afectar potencialmente el rendimiento de una aplicación que utiliza una gran cantidad de defaultProps.

No utilizar propTypes

TL; DR Use TypeScript.

En reaccionar, el propTypes La propiedad se puede usar para verificar si un componente recibe el tipo de datos correcto para sus accesorios. Le permiten especificar el tipo de datos que se usará para cada accesorio, como una cadena, un número, un objeto, etc. También le permiten especificar si se requiere un accesorio o no.

De esta manera, si un componente recibe el tipo de datos incorrecto o si no se proporciona un accesorio requerido, React arrojará un error.

// Card.jsx
import { PropTypes } from "prop-types";

function Card(props) {
  // ...
}

Card.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,
};

export default Card;

TypeScript proporciona un nivel de seguridad de tipos en los datos pasados ​​a los componentes. Si está encendido, propTypes fueron una buena idea cuando comencé. Sin embargo, ahora que TypeScript se ha convertido en la solución de referencia para la seguridad de tipos, recomiendo usarlo por encima de todo.

// Card.tsx
interface CardProps {
  title: string,
  description?: string,
}

export default function Card(props: CardProps) {
  // ...
}

TypeScript es un lenguaje de programación que se basa en JavaScript al agregar verificación de tipo estático. TypeScript proporciona un sistema de escritura más potente que puede detectar más errores potenciales y mejorar la experiencia de desarrollo.

Uso de componentes de clase

TL; DR: escribir componentes como funciones

Los componentes de clase en React se crean utilizando clases de JavaScript. Tienen una estructura más orientada a objetos y algunas características adicionales, como la capacidad de usar el this palabras clave y métodos de ciclo de vida.

// Card.jsx
class Card extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

export default Card;

Prefiero escribir componentes con clases en lugar de funciones, pero las clases de JavaScript son más difíciles de entender para los principiantes y this puede resultar muy confuso. En cambio, recomendaría escribir componentes como funciones:

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

export default Card;

Los componentes de función son simplemente funciones de JavaScript que devuelven JSX. Son mucho más fáciles de leer y no tienen funciones adicionales como el this métodos de palabras clave y ciclo de vida que los hacen más poderosos que los componentes de clase.

Los componentes funcionales también tienen la ventaja de usar ganchos. Los Hooks de React le permiten usar el estado y otras características de React sin escribir un componente de clase, lo que hace que su código sea más legible, mantenible y reutilizable.

Importar reaccionar innecesariamente

TL; DR: No hay necesidad de hacer eso a menos que necesite ganchos.

Desde el lanzamiento de React 17 en 2020, ahora no es necesario importar React en la parte superior de su archivo cada vez que crea un componente.

import React from 'react'; // Not needed!
export default function Card() {}

Pero tuvimos que hacer esto antes de React 17 porque el transformador JSX (que convierte JSX en JavaScript normal) usaba un método llamado React.createElement esto solo funcionaría al importar desde React. Desde entonces, se ha lanzado un nuevo transformador que puede transformar JSX sin la createElement método.

Aún deberá importar React para usar ganchos, fragmentos y cualquier otra función o componente que pueda necesitar en la biblioteca:

import { useState } from 'react';

export default function Card() {
  const [count, setCount] = useState(0);
  // ...
}

Esos fueron mis primeros errores!

Tal vez "error" sea una palabra demasiado dura ya que algunas de las mejores prácticas llegaron más tarde. Sin embargo, veo muchos casos en los que la forma "antigua" de hacer algo todavía se usa activamente en proyectos y otros tutoriales.

Para ser honesto, probablemente cometí más de cinco errores al principio. Cada vez que busque una nueva herramienta, se sentirá más como un viaje de aprendizaje para usarla de manera efectiva, en lugar de un cambio. ¡Pero estas son las cosas que todavía llevo conmigo años después!

Si ha estado usando React por un tiempo, ¿cuáles son algunas cosas que desearía haber sabido antes de comenzar? Sería genial crear una colección para ayudar a otros a evitar las mismas dificultades.

Si quieres conocer otros artículos parecidos a 5 errores que cometí al iniciar mi primer proyecto React puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas