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

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

Entonces, 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 fácil para ti.

Usando create-react-app para iniciar un proyecto

TL; DR Use Vite o Parcel.

Crear aplicación React (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 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 recursos 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 tornillo 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 hace que sea más fácil ajustar la configuración, lo cual es difícil de hacer en crear-reaccionar-aplicación sin expulsar.

Para usarlos a ambos al configurar 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 haga eso, seleccione Reaccionar de la lista de marcos. Después de eso, puede seleccionar cualquiera Javascript + SWC or 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.

Usar 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 en un elemento HTML y se pueden usar en la definición de un 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 prop, la 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 desestructurar el props objeto y asígnele un valor predeterminado a todo 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 ya que el código puede ser leído por los navegadores modernos sin necesidad de una transformación adicional.

Desafortunadamente, defaultProps requiere alguna transformación para ser leído por el navegador ya que JSX (JavaScript XML) no es compatible de fábrica. Esto podría afectar potencialmente el rendimiento de una aplicación que utiliza una gran cantidad de defaultProps.

No usar propTypes

TL; DR Use TypeScript.

En reaccionar, el propTypes La propiedad se puede usar para verificar si a un componente se le está pasando el tipo de datos correcto para sus accesorios. Le permiten especificar el tipo de datos que deben usarse 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 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. Tan seguro, propTypes fueron una buena idea cuando yo estaba empezando. Sin embargo, ahora que TypeScript se ha convertido en la solución de referencia 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 mediante la adición de 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 algunas características adicionales, como la capacidad de usar el this Métodos de palabras clave y 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 de función son simplemente funciones de JavaScript que devuelven JSX. Son mucho más fáciles de leer y no tienen características adicionales como el this palabra clave y métodos de ciclo de vida lo que los hace más eficaces que los componentes de clase.

Los componentes de función también tienen la ventaja de usar ganchos. Reaccionar ganchos le permite usar el estado y otras funciones de React sin escribir un componente de clase, lo que hace que su código sea más legible, mantenible y reutilizable.

Importar React innecesariamente

TL; DR: No hay necesidad de hacerlo, a menos que necesite ganchos.

Dado que React 17 se lanzó 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 eso antes de React 17 porque el transformador JSX (lo que convierte JSX en JavaScript normal) usaba un método llamado React.createElement eso solo funcionaría al importar React. Desde entonces, se ha lanzado un nuevo transformador que puede transformar JSX sin la createElement método.

Aún necesitará importar React para usar ganchos, fragmentosy 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 surgieron más tarde. Aún así, 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 comenzar. 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 de las cosas que desearía saber antes de comenzar? Sería genial tener una colección para ayudar a otros a evitar las mismas luchas.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://css-tricks.com/5-mistakes-starting-react/