[React] Hilo General - Una librería para atraerlos y atarlos a todos

Zh3RoX

#960 Da igual, ayer probé mil cosas y nada. Esta mañana he vuelto a hacer el npm run dev y mágicamente ya no sale el warning, estas cosas me fascinan.

pd: Vale, ya sé por qué no me estaba saliendo el warning ahora, es por la extensión de React developer tools del navegador, lo he activado y ha vuelto a salir el warning.

laZAr0

¿Alguien me puede explicar o referirme a un recurso donde expliquen para negados como yo cómo configurar un linter y formatter para React? Nunca he usado esto y ando un poco perdido con ESLint, porque en VSCode al parecer se puede instalar como extensión o hacerlo por consola e inicializarlo dentro del proyecto y ya no sé si uno depende del otro, si se completan o se molestan. Lo mismo con el prettier. El ESLint he conseguido que funcione, me marca los errores típicos, pero no sé cómo añadirle el formateador de código, no hace nada cuando le doy a formatear con ESLint.

2 respuestas
Porimas

#962 Bajate el prettier que te formatea el codigo al darle a guardar

_Kok3_

#962 Ten instalado en vsc eslint para ver los errores al momento y prettier para formatear instant, configura prettier como formateador por defecto poniendo en las settings.json de vscode "editor.defaultFormatter": "esbenp.prettier-vscode" y que formatee al guardar un archivo "editor.formatOnSave": true, siempre viene bien.

  • Configuras el archivo de configuración de eslint eslint.config.mjs .eslintrc.json o el que sea, aquí puedes añadir reglas como indent: ['error', 2] para el indentado, semicolon ';' etc... tus preferencias vamos (también hay pre-configuraciones como airbnb-eslint)

  • (opcional) Para prettier un archivo .prettierrc, que no entre en conflicto con las preferencias del linter, por ej si has puesto en eslint el indent a 2 y configuras en .prettierrc los tabs a 4 entraras en conflicto (prettier prioriza la configuración del archivo a las que tengas por defecto en prettier)

Hay mucha info y bastante diferente donde mires... pero bueno aquí quizás puedas pillar algo de referencia https://fullstackopen.com/en/part9/react_with_types

2 1 respuesta
M

Voy a empezar un proyecto con un colega que va a consistir en una especia de dashboard/trello/gestor de tareas.

Queremos hacerlo con Nextjs, Tailwind y nos falta saber una librería de componentes.

¿Qué se está utilizando más ahora?

2 respuestas
Lolth

#965 Porque NextJs?

isvidal

#965 shadcdn

laZAr0

Es abrumadora la cantidad de librerías que hay en el ecosistema de React. No conocía esa librería de componentes, pero es que hay tantas librerías de plantillas, componentes, CSS, que ya no sé si habrá alguien trabajando con React que haga cosas a mano. Yo estoy empezando con esto y no sé por donde meterle mano. xD

Por cierto, gracias #964, no te había dicho nada, pero me ha servido tu ayuda. He conseguido configurar el linter y el Prettier para más o menos lo que quería, aunque no te creas que termino de entender muy bien cómo.

_Kok3_

shadcn pinta muy top y clean, el otro día me hice un pequeño acortador básico-fpero por probar shadcn https://sh.jbalibrea.dev/ :f5:

1
HeXaN

http://sh.jbalibrea.dev/rrGxD

Funciona.

1 1 respuesta
_Kok3_

#970 jaja me has rallado al redireccionar a la misma web, he pensado wtf si cuando no encuentra el enlace o esta mal el link debería salir un mensaje de error y lleva al home.

1 respuesta
HeXaN

#971 Era la idea jajaja.

1 respuesta
Lolth

Mola

http://sh.jbalibrea.dev/sksSa

laZAr0

#972 aunque en ese caso no acorta :(

Earh

Me mueven a un proyecto en React tras toda una vida (3 años) en Angular, ¿me recomendáis algún material para coger toque rápido?

No sé si habrá algo fuera de los típicos cursos de Maximilian que empiezan desde absoluto 0 en programación.

2 respuestas
laZAr0

#975 yo estoy haciendo el de Fernando Herrera en udemy, de cero a experto creo que se llama. Utiliza proyectos con Vite y JavaScript, no Typescript. Para mí va algo follado, pero claro, nunca había desarrollado nada en web, mis conocimientos previos eran muy limitados. Echa un vistazo a ver si te cuadra. Aunque no es un curso rápido, está basado en proyectos y al final acaba tocando también librerías externas como redux y también metiendo backend.

1
bultack

#975 el de midu? https://www.youtube.com/watch?v=7iobxzd_2wY&list=PLUofhDIg_38q4D0xNWp7FEHOTcZhjWJ29