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

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

Así fue para mí la primera vez que construí un proyecto React, y React es uno de esos marcos con documentación notable, especialmente ahora con los documentos beta. Pero todavía estaba luchando por abrirme camino. Ha pasado un tiempo desde ese proyecto, pero las lecciones que aprendí de él todavía están frescas en mi mente. Y aunque hay muchos tutoriales de "cómo hacer" React, pensé en compartir lo que desearía saber cuando lo usé por primera vez.

Ese es 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.

Usando create-react-app para lanzar un proyecto

TL; DR Use Vite o Parcel.

Crear una aplicación de reacción (CRA) es una herramienta que te ayuda a configurar un nuevo proyecto de 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! ¡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 funciones de JavaScript más nuevas, incluso si algunos navegadores no las admiten.

Ambos son buenos, pero hay herramientas más nuevas que pueden hacer mejor el trabajo, específicamente Gritas y Compilador web rápido (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 extracción.

Para usar ambos al crear un nuevo proyecto React, debe asegurarse de tener nodo versión 12 o superior instalada, 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. A continuación, puede seleccionar o Javascript + SWC o Typescript + SWC

A continuación, tendrá que cambiar de directorio cd en su proyecto y ejecute el siguiente comando;

npm i && npm run dev

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

Y es así de simple.

Usando `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 propsSe agregan a un componente al igual que los atributos en un elemento HTML y se pueden usar en la definición del componente tomando los valores apropiados 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 necesita un valor predeterminado para un propen defaultProp la propiedad se puede utilizar:

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

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

export default Card;

Con JavaScript moderno es posible destruirlo props objeto y asigne un valor predeterminado a todo ello 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 como código que pueden leer los navegadores modernos sin necesidad de una transformación adicional.

Desafortunadamente, defaultProps requieren que el navegador lea alguna transformación porque JSX (JavaScript XML) no es compatible de inmediato. Esto puede afectar potencialmente el rendimiento de una aplicación de uso intensivo defaultProps.

No utilice `propTypes`

TL; DR Use TypeScript.

en reaccionar, propTypes property se puede usar para verificar que a un componente se le está pasando el tipo de datos correcto para sus propiedades. Le permiten especificar el tipo de datos que se debe usar para cada propiedad, como cadena, número, objeto, etc. usted para indicar si se requiere apoyo o no.

Por lo tanto, si a un componente se le pasa 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;

Mecanografiado proporciona un nivel de seguridad de tipos en los datos que se pasan a los componentes. Asi que por su puesto propTypes fueron una buena idea cuando estaba empezando. Pero ahora que TypeScript se ha convertido en la solución preferida para la seguridad de tipos, recomiendo encarecidamente usarlo sobre cualquier otra cosa.

// 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 tipos más potente que puede detectar más errores potenciales y mejora 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 varias 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 sobre 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 funcionales son simplemente funciones de JavaScript que devuelven JSX. Son mucho más fáciles de leer y no tienen características adicionales como this palabras clave y métodos de ciclo de vida que los hacen más eficientes 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.

Importación innecesaria de React

TL; DR: No es necesario a menos que necesite ganchos.

Dado que React 17 se lanzó en 2020, ya no necesita importar React en la parte superior de su archivo al crear 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 (lo que convierte JSX en JavaScript simple) usa un método llamado React.createElement esto solo funcionará al importar React. Desde entonces, se ha lanzado un nuevo transformador que puede transformar JSX sin createElement método.

Aún necesitará importar React para usar ganchos, fragmentos y cualquier otra función o componente que pueda necesitar de 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 "antigua" forma de hacer las cosas todavía se usa activamente en proyectos y otras lecciones.

Para ser honesto, probablemente cometí más de cinco errores cuando comencé. Cada vez que busque una nueva herramienta, será más como un viaje de aprendizaje para usarla de manera efectiva en lugar de presionar un interruptor. ¡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 le gustaría saber antes de comenzar? Sería genial crear una colección para ayudar a otros a evitar los mismos problemas.

Deja una respuesta Cancelar la respuesta