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

Ranthas

#120 Pues lo que consideran un pack completo de librerías para poder trabajar con React en el entorno empresarial. Por ejemplo:

  • React v16.8
  • Material UI
  • Redux
  • CSS Modules
  • Axios

O por ejemplo, usar Next.js. Lo que busco es como tener un "framework" completo, del estilo de Angular, pero con React más un conjunto de librerías.

¿Por qué? En el trabajo usamos Angular, ya que es un framework que te impone su manera de trabajar, por lo que es más sencillo tanto formar a nuevo personal como obtener capital humano con el mínimo esfuerzo, ya que si saben Angular, sólo hay que pulir algunos flecos antes de tener a esa persona produciendo.

Pero desde hace un tiempo para acá, no necesitamos personal nuevo y el equipo actual ya no está contento con Angular. Está overengineered para muchas de las nuevas aplicaciones que estamos haciendo, cuesta bastante dominarlo correctamente y perdemos más tiempo peleando contra Angular que desarrollando soluciones. Tengan en cuenta que el equipo actualmente está compuesto por mucho perro viejo (gente de 50+ años) y aunque son gente competente, ni les gustan los cambios ni se adaptan bien. Typescript les crea más problemas de los que les soluciona.

Desde ese momento, he estado explorando React y creo que es la solución a nuestro problema. El equipo maneja correctamente Javascript y sólo habría que dar un repaso a las features de ES6 para tenerlos a full. El paso de Angular a React creo que es lo que necesitamos, pero claro, antes necesito construir un "framework" es decir, un bundle de librerías con las que complementar a React para ofrecersela al equipo como transición.

2 respuestas
QuitCat

#121 Depende de las necesidades del proyecto
En mi equipo y a modo general (exceptuando proyectos pequeños), prácticamente la base de todos es:

  • React 16
  • Redux + redux-thunks
  • React-router
  • Styled-components
  • React-i18next
    _____________
  • webpack
  • babel
  • eslint
1 respuesta
JohnVoiden

#121
Yo te puedo dar dos puntos diferentes. Mi empresa y mi stack de Open Source.
En mi empresa actualmente tenemos un poco de todo, somos multiproyectos pero generalmente utilizamos esto, no en todos por eso.

React 16.8
Redux
Formik, es muy buena libreria si no te atas en exceso cosa que esta genial.
Styled componentes, para nuestro dashboard o backoffice tenemos una libreria 100% hecha por nosotros enorme con casi 100 componentes.
NextJS en modo serverless para un proyecto de solucion b2b.
Isomorphic fetch es el mejor, si no utilizase ese seria: whatwg-fetch

TSlint y Eslint, webpack con todo muy personalizado por nosotors para tener mejor control.

Por supuesto en proyectos no legacy, siempre TypeScript. Aqui sobre lo que dices lo de perro viejo, al final es poner normas mas o menos nazis.

En caso en mi stack de openSource.

NextJS
Typescript
Styled componentes
GraphQL (yoga o apollo)
Prisma v2 para los datos.
Vercel para el deploy.

1 respuesta
isvidal

Para mi, indiscutibles:

  • styled-components
  • SWR
  • Axios

Luego para aderezar e ir volando:

  • ESLint
  • Prettier
  • Husky
  • lint-staged

Y si no usas NextJs obviamente React-router para la navegación de la app.

3 respuestas
aren-pulid0

#124 acabo de echarle un vistazo a SWR y tiene pintaza !!

1 1 respuesta
JohnVoiden

#125 Te soluciona la vida y mola mucho.

#124 Husky yo lo puse en mi empresa y me lo tiraron hacia atrás por ser demasiado nazi.

RQuaza

Buenas, antes que nada deciros que soy novato. Mi pregunta es si quiero desplegar una app hecha con NodeJS y React en un VPS como OVH y no en AWS, Azure o Google Cloud, tengo que usar Docker si o si? Un saludo.

2 respuestas
aren-pulid0

#127

No, en OVH por lo que se te dan una máquina virtual con Windows/Linux y ahí puedes hacer el despliege

Ranthas

#122 #123 #124 Gracias, iré tomando nota y probando. Esto me va a llevar tiempo.

Sorii34

trabajo con Angular, alguna recomendacion para dar el paso y saltar a React?

1 respuesta
X-Crim

Que estes aquí ya implica que sientes un mínimo de necesidad de dejar eso

aren-pulid0

never worked with angular, por que lo odiais tanto?

1 respuesta
JohnVoiden

#127 Para JS tienes la alternativa de PM2 que funciona muy bien.
#130 Intentar hacer aplicaciones tontas para aprender, si necesitas ayuda pregunta por el foro o mandame mp.

#132 ReactJS es un framework, Angular es un ecosistema.

1 respuesta
aren-pulid0

#133 no es justamente al revés?

Tenía entendido que Angular es un framework que viene con todo ya incluido y React una librería con un ecosistema al rededor

1 respuesta
JohnVoiden

#134 Hombre, si miras en comparacion sus "Getting Started" veras a que me refiero. Angular te dice desde inicio como tener rutas, como manejar datos y como hacer formularios.
En React en cambio te dice como funcionan sus fundamentos, osea las herramientas a bajo nivel.

Yo lo veo totalmente diferente. React en si no tiene rutas si no le metes libreria adicional(o creas tu el codigo, que no es dificil), como hacer formularios puedes hacerlo con el useState pero hay algunas mas especializadas, y como manejar datos tienes otras librerias. Pero al final puedes usar librerias no-react para algunos de estos casos. Angular en cambio te obliga o te dice que tiene esas grandes caracteristicas desde 0. Como si fuera su pan de cada dia.

Zoko

React no es un framework. Es una librería para montar interfaces.

Otra cosa es que luego la gente haga muchas cosas basadas en la librería, pero no es un framework.

EDIT: Que asco me he dado leyendome de nuevo JAJ

1 respuesta
thelegend

Una duda si yo tengo un objecto que me llega de props que puede ser de 2 tipos

Por ejemplo:
object: Animal | Croqueta

Hay alguna manera de saber de que tipo es?

Gracias!

5 respuestas
Ranthas

#137 Supongo que con instanceof.

React también ofrece una mecánica llamada PropTypes que te puede servir.

instanceof

PropTypes

1 respuesta
aren-pulid0

#137 instanceof

1 respuesta
Zoko

#137

Si el objeto ha pasado por un constructor y no es una guarrería con dos cosas, como te dicen por aqui instanceof es tu hombre.

1 respuesta
isvidal

Con lo fácil que es hacer programación funcional en React y os dedicáis a crear objetos de clase

muy mal

1 respuesta
JohnVoiden

#136 Es que el bait es malo malo cabr'on xD

#137 con TypeScript podrias hacer justamente eso y sin problemas.

#141 Y yo decia que Zoko baitea mal xD

1 1 respuesta
aren-pulid0

Para un proyecto en el que trabajo solo, es worth usar/aprender TypeScript ?

2 respuestas
Zoko

#143

Yo creo que si, yo por ejemplo es una asignatura pendiente que tengo/tenía. Ahora cualquier cosilla que hago para mi me fuerzo a usarlo y aprenderlo porque realmente es que lo único malo que le veo es que tienes que pensar las cosas antes de hacerlas, por lo que pierdes algo de velocidad si haces algo muy rápido y estás prototipando, pero a la larga te ahorras quebraderos de cabeza.

JohnVoiden

#143 Es muy util porque te da mucha ayuda en general y es un standard de calidad al final.

thelegend

#138 #139 #142 #140

Técnicamente tenies razón, pero no me funciona, me da el mismo problema que este chico.
https://stackoverflow.com/questions/46703364/why-does-instanceof-in-typescript-give-me-the-error-foo-only-refers-to-a-ty
Al final usare lo que comentan.

1 respuesta
Zoko

#146

Es que estabamos hablando de Javascript, no de Typescript D:

isvidal

La solucion a tus problemas no bromuro

const gato = { tipo: 'gato', ...resto }
const perro = { tipo: 'perro', ..resto }

if( objeto?.tipo === 'gato' ){
console.log('es un pu;etero gato')
}

Jaque mate typescripters

2
HiGher

#137 Si solo vas a leer propiedades que interseccionan entre los dos tipos, no te hace falta comprobar nada. Si quieres acceder a una propiedad que tiene un tipo de objeto y el otro no, solo tienes que comprobar que esa propiedad existe como se espera para ese tipo determinado.

interface Animal {
  id: string;
  name: string;
  age: number;
  type: 'cat' | 'dog';
}
interface Croqueta {
  id: string;
  type: 'jamón' | 'bacalao';
}

...

// obj: Animal | Croqueta

// .id se puede leer sin problemas, es compartida por las dos estructuras.
const id = obj.id;

if (obj.name) {
  // TS infiere que obj es Animal, pues esta propiedad no existe en el otro tipo.
}

if (obj.type === 'jamón') {
  // TS infiere que obj es Croqueta, puesto que el valor de la propiedad actúa como discriminante.
}
3
isvidal

Para buscar y reemplazar en grandes arrays de objectos, recomendarais utilizar Loadash, o tirar de cosas nativas como findIndex ?

3 respuestas