Get best of the week

ReactJS: inicio rápido

El curso para desarrolladores React.js está a punto de comenzar , por lo que se realizó otra lección abierta dentro de los muros de OTUS. Se consideraron los siguientes problemas:

  • Lo que se incluye en el conjunto de características estándar React.js;
  • ¿Es posible construir una aplicación compleja con esto?
  • composición contra la herencia;
  • programación funcional: ¿es fácil o difícil?
  • ¿Qué es Redux y por qué es necesario?



Al final de la lección, desarrollamos una pequeña aplicación web ReactJS. El seminario web fue organizado por Nikita Ovchinnikov , un ingeniero de software con más de 8 años de experiencia en desarrollo comercial.

¿Qué es reaccionar?


Verá la respuesta a esta pregunta abriendo el sitio web oficial, donde está escrito que React es una biblioteca de JavaScript para construir interfaces de usuario.



Aquí encontrará un maravilloso tutorial, después de estudiarlo, puede usar este marco inmediatamente después de leerlo. Si lo desea, consulte el tutorial en ruso, pero esto no es recomendable. Si es realmente malo con el inglés, aún abra la versión original en inglés y use el traductor de Google. El hecho es que las fuentes oficiales en idioma ruso a veces se retrasan en términos de traducción (sucede que la documentación se actualiza, pero la traducción aún no).

¿Por qué es tan popular React?


Por ejemplo, las estadísticas de los últimos 6 meses , sin contar el hundimiento característico durante las vacaciones de invierno , dan testimonio de la popularidad de React : las siguientes estadísticas



también muestran buenos resultados : por supuesto, las estadísticas están lejos de todo, pero de todos modos podemos ver en la muestra que popularidad alto, y solo está aumentando. ¿Por qué es tan popular React? Hay un número de razones para esto:







  • está realmente muy bien documentado :
    aquí hay un tutorial ;
    - Aquí hay una guía para principiantes .
    Sin embargo, hoy el marco no será popular si está poco documentado;
  • React . , . ;
  • , — . JSX, , ;
  • . - , , , , , , , ;
  • . . , , , . React Angular;
  • (react-developer-tools, redux-dev-tools);
  • React , , .

React?


Por lo tanto, familiarícese - debilidad # 1: Reaccionar no es fácil de aprender . Y he aquí por qué:

1. Reaccionar es una forma de pensar completamente diferente. Si trabajas con él, realmente necesitas reconstruir. En React, a diferencia de otros marcos, solo existe el concepto de composición. Los chicos de Facebook diseñaron su marco de tal manera que no tiene ninguna herencia . Y estos mismos tipos de Facebook explicaron lógicamente este estado de cosas :

"En Facebook, usamos React en miles de componentes, y no hemos encontrado ningún caso de uso en el que recomendaríamos crear jerarquías de herencia de componentes " .

De hecho, esta afirmación no es infundada, porque en la OOP hay, por supuesto, muchos problemas bien conocidos, por ejemplo, un número excesivo de abstracciones. Además, no todos los desarrolladores están a favor de construir increíbles cadenas de herencia y esto es todo, aunque, por supuesto, la herencia en algún lugar es necesaria y útil.

2. El segundo punto que complica el estudio de React es que contiene solo recomendaciones y no hay un conjunto rígido de reglas. No solo eso, cuando se estudia el marco todavía es soportable, sino que cuando se llega a un proyecto real, se sorprenderá mucho. El hecho es que no hay dos proyectos idénticos en React, y en cada compañía un proyecto con React es completamente individual. Te acostumbras a una situación, y luego cambias a otro equipo y ves que todo es diferente allí: otras bibliotecas, otras reglas ... Y de nuevo, necesitas adaptarte y adaptarte. Como dicen, hay que pagar por la flexibilidad.

3. La tercera dificultad de aprendizaje: para dominar con éxito React, un desarrollador debe tener un alto nivel. No, React en sí es simple y fácil de escribir. Pero para poder hacer algo más o menos complicado, debe tener buenas habilidades de programación. Si hay lagunas en el conocimiento fundamental de JS y TS, será bastante difícil para usted y no lo entenderá todo.

Problema de elección


Ahora hablemos de la debilidad número 2: el problema de elección . Es una variedad en la que es fácil perderse. Realmente hay muchas cosas. Han aparecido recientemente ganchos: ha comenzado una conversación sobre el hecho de que las clases ya no son necesarias, las batallas React Hooks vs React Class han comenzado ... Todos se apresuraron a usar ganchos, y luego dijeron que no todo estaba claro y volvieron a usar clases, etc., etc. p ...

En realidad, la respuesta correcta a la pregunta " Reaccionar ganchos o Reaccionar clase " no existe. O, para ser más precisos, la respuesta correcta depende de las condiciones en las que haga esta pregunta.

Surge otra pregunta: "¿Cómo verificar los tipos"? Mira tenemos:


Y aquí tenemos nuevamente el problema de elección, que, para ser honesto, a veces inquieta. Por supuesto, todo es muy variable y, en el proceso de trabajar con algunas decisiones, se encontrará, pero nunca "verá" algunas. Todo depende de la situación.

Nuevamente, existe la aplicación Create React , Webpack.js y Babel , así que tan pronto como comience, tendrá una pregunta aquí, ¿qué usar?

La siguiente agonía de elección está asociada con el Estado . Está Redux y está MobX , y dentro de Redux también hay redux-saga y redux-thunk . Y es difícil, sin intentarlo, darse cuenta de lo que es mejor usar en una situación específica.

Además:

1. Enrutador . Hay alrededor de cinco, aquí están los más populares:


2. CSS-IN-JS . En el marco de este muy buen enfoque, por cierto, también hay una opción:


Para resumir, puede enumerar las siguientes desventajas de React :

  1. Alto umbral de entrada. Sin pretensiones, digamos que es difícil aprender Reaccionar. Incluyendo debido a la gran infraestructura.
  2. Mucho tiempo para estudiar. Una vez que no sea fácil de aprender, prepárese para dedicarle tiempo, de lo contrario, de ninguna manera. Necesitas entender qué es qué.
  3. Una variedad muy grande en la que es fácil perderse. No hay nada que agregar.

¿Qué significa "mucho tiempo de estudio"? De hecho, si toma cualquier tecnología, no importa cuán suave sea su diseño desde el punto de vista del marketing, no crea las palabras al estilo de "Aprenderá en solo dos lecciones breves": todo esto no tiene sentido y no funciona en el mundo real. . Trillado, pero cierto: para convertirte en un especialista realmente bueno, necesitas pasar mucho tiempo. Y para comenzar a hacer algo, no se necesita mucho tiempo.

¿Cuál es la fuerza en, hermano?


A pesar de todo lo anterior, React es una tecnología muy poderosa. En primer lugar, si eres un profesional, el trabajo será muy fácil de encontrar. Por el contrario, será difícil rechazarlo, porque hay muchas ofertas en el mercado:



la siguiente ventaja es una gran cantidad de bibliotecas y soluciones listas para usar. Esto se indica en la misma captura de pantalla de GitHub (hay más de un millón de repositorios):



si crees que sería bueno "cortar esto", resulta que ya lo ha hecho alguien. La tecnología es realmente muy popular.

Además:

  1. La diversidad es un problema para los principiantes, pero para un profesional es una ventaja.
  2. React contiene una gran cantidad de buenas soluciones.
  3. Puede desarrollar aplicaciones de cualquier complejidad.
  4. Puedes escribir en cualquier estilo.

Soporte de mecanografía


React tiene un gran soporte de Typecript. Este lenguaje es bueno aunque solo sea porque puede usarse para escribir tipos que realmente funcionan y realmente ayudan. Y con Typecript puedes escribir un sistema de tipos realmente fuerte. Esencialmente, el mecanografiado es ahora un estándar, y este estándar está en React. Por supuesto, no puedes usarlo, prefiriendo JavaScript. Sin embargo, sin Typecript es muy difícil hacer algo sensiblemente difícil, porque sin tipos estrictos es muy difícil trabajar. También es difícil predecir cómo se comportará su decisión sin tipos estrictos. Esto es difícil de hacer incluso con tipos, y sin ellos es realmente triste ...

En general, asegúrese de trabajar con Typecript, porque esta es una tecnología muy necesaria:

- https://www.typescriptlang.org/docs/handbook/react-&- webpack.html.



Un par de consejos


Finalmente, me gustaría dar algunas recomendaciones. Hoy hablan mucho sobre OOP, y puede encontrar fácilmente una gran cantidad de información sobre este tema. Y en todas partes se te escribirá por millonésima vez sobre el animal de clase base y, a partir de él, sobre Cat and Dog. O sobre el coche de clase base, y de él: Ferrari y BMW. Y esto es todo lo que le mostrarán de vez en cuando y de un libro de texto a otro, mientras que su nivel de desarrollador crecerá al mismo tiempo que los caracoles.

Al mismo tiempo, claramente no se presta suficiente atención a la programación funcional, cuya comprensión realmente bombeará sus habilidades. Si realmente aprende a usarlo correcta y correctamente. Uno de los libros más adecuados hasta la fecha está disponible gratuitamente aquí y es muy recomendable para leer:



¿Por qué es difícil aprender programación funcional? Porque muy a menudo los libros están sobrecargados de matemáticas, complejidad académica, etc. Después del mismo libro, tendrás éxito, porque es simplemente maravilloso.

¿Por qué es importante la programación funcional? Porque, tal cosa como Redux se basa en los fundamentos básicos de la programación funcional. Y habiendo dominado al menos la programación funcional básica, realmente comenzará a escribir código mucho mejor. Lo principal es entender todo correctamente.

El segundo punto del que me gustaría hablar es la arquitectura. ¡Nuestra arquitectura lo es todo ! Hay un muy buen paradigma arquitectónico llamado patos. Se trata de cómo construir aplicaciones React y Redux. Vale la pena recomendar esta arquitectura para un uso práctico.

La idea en sí es muy interesante y representa un conjunto de reglas estrictas y al mismo tiempo geniales que harán que su estructura de decisión sea comprensible y legible. Esto no es un longrid, por lo que es suficiente leer y comprender el contenido una vez. Después de eso, podrá organizar adecuadamente sus aplicaciones. El enlace está adjunto.



Total


  1. Quien diga algo, React tiene un umbral de entrada alto. Incluso con varios años de experiencia en programación de JavaScript, prepárese para lo que será difícil y surgirán muchas preguntas.
  2. Reaccionar brinda grandes oportunidades. Pero ya se ha dicho mucho sobre los profesionales, por lo que no nos repetiremos.
  3. Si está interesado en la historia del desarrollo de React, aquí hay una buena hoja de ruta .

Eso es todo. Si está interesado en la parte práctica de la lección, vea el seminario web de ahora en adelante . Se desarrollará una pequeña aplicación web de prueba en ReactJS, cuyo código está disponible en GitHub .

More articles:


All Articles