El año pasado con React: conclusiones y recomendaciones

Por lo general, comenzar con una nueva tecnología no es tan simple. Un principiante se encuentra en un mar infinito de manuales y artículos de capacitación. Además, detrás de cada uno de estos materiales está la opinión personal de su autor, y cada autor afirma que es a través de su boca que la verdad habla.

Desde el punto de vista del sentido común, está claro que no todos los artículos publicados en Internet tienen beneficios reales, por lo que aquellos que intentan aprender algo nuevo tienen que evaluar las publicaciones en un intento de encontrar la respuesta a la pregunta de si gastar en ellas. tu tiempo



Antes de partir con la cabeza para estudiar, el programador necesita comprender los conceptos básicos de la tecnología que le interesa. Entonces necesita formar su visión de esta tecnología, aprender a pensar en términos de ella. Como resultado, si alguien comienza a aprender React, primero debe aprender a "pensar en React". Y ya después de desarrollar esta cualidad en sí mismo, podrá familiarizarse significativamente con las opiniones de otras personas y, seleccionando a los más valiosos, desarrollarse en una dirección elegida.

El autor del artículo, cuya traducción publicamos hoy, quiere compartir con todos los que quieran aprender sobre React durante la formación de su propia visión de esta tecnología, durante su estudio y la acumulación de experiencia en este campo. Aquí hablará sobre lo que logró entender en un año, trabajando como programador de React, haciendo sus propios proyectos en su tiempo libre y compartiendo sus ideas en una conferencia de JavaScript.

React es una tecnología en constante evolución.


Dado que React está en proceso de desarrollo constante, cualquiera que quiera dominar esta tecnología debe estar preparado para mantener constantemente actualizados sus conocimientos y habilidades. Si recuerdas el anuncio de React 16.3.0, entonces sabes sobre el entusiasmo en la comunidad de programadores que trajo nuevas características. Entre ellos se encuentran el contexto API oficial, las API createRef y forwardRef, el modo estricto y los cambios en el ciclo de vida de los componentes. El equipo central de desarrolladores de React y todos aquellos que han hecho una contribución factible al desarrollo del proyecto han hecho un trabajo increíble, tratando de mejorar nuestro marco favorito. Este trabajo no se detiene. Entonces, por ejemplo, la versión 16.4.0 introdujo soporte para eventos de puntero .

React continúa evolucionando; la innovación es solo cuestión de tiempo. Entre estas innovaciones se encuentran el renderizado asíncrono, el almacenamiento en caché, muchos cambios esperados en React 17.0.0 y algo de lo que nadie sabe.

Teniendo en cuenta lo anterior, está claro que si desea mantenerse a la vanguardia del desarrollo de React, debe conocer las innovaciones. Esto significa que necesita saber cómo funcionan los nuevos mecanismos marco y por qué se crearon. Debe comprender qué problemas resuelven y cómo simplifican el desarrollo.

No tengas miedo de romper tu código en pequeños fragmentos


Reaccionar está basado en componentes. Esto sugiere que este concepto debería usarse y romper audazmente grandes fragmentos de código en fragmentos más pequeños. A veces, un componente simple puede constar de solo 4-5 líneas de código y, en algunos casos, esto es completamente normal.

Debe abordar la fragmentación del código para que si un nuevo desarrollador se conectara a su proyecto, no tendría que pasar muchos días entendiendo cómo funciona este proyecto y cómo funciona.

//     ,   ? return (  [   <ChangeButton    onClick={this.changeUserApprovalStatus}    text="Let's switch it!"   />,   <UserInformation status={status}/>  ] ); 

No tiene que crear componentes enormes que contengan toda la lógica necesaria para su trabajo. Un componente, por ejemplo, solo puede describir una representación visual de una entidad. Si el uso de componentes pequeños mejorará la legibilidad del código, facilitará la prueba y facilitará el apoyo del proyecto en el futuro, entonces la aplicación sistemática de este enfoque es una solución maravillosa que afectará positivamente el trabajo de cada miembro del equipo.

 import ErrorMessage from './ErrorMessage'; const NotFound = () => ( <ErrorMessage   title="Oops! Page not found."   message="The page you are looking for does not exist!"   className="test_404-page" /> ); 

El ejemplo anterior aplica propiedades estáticas. Ante nosotros hay un componente limpio que se encarga de mostrar el mensaje de error Not Found y de nada más.

Además, si no desea que las clases CSS y los nombres de clase aparezcan en todas partes en su código, recomendaría usar componentes estilizados. Esto puede mejorar significativamente la legibilidad del código.

 const Number = styled.h1` font-size: 36px; line-height: 40px; margin-right: 5px; padding: 0px; `; //.. <Container> <Number>{skipRatePre}</Number> <InfoName>Skip Rate</InfoName> </Container> 

Si tiene miedo de crear demasiados componentes pequeños debido al hecho de que le parece que sus archivos están obstruyendo las carpetas con los materiales del proyecto, piense en cómo estructurar su código de manera diferente. Usé la estructura fractal del proyecto para organizar los materiales, y debo decir que esto es simplemente maravilloso.

No descanse en sus laureles después de comprender los conceptos básicos.


A veces puede parecerle que no comprende lo suficientemente bien como para continuar con el estudio y el uso de cosas más avanzadas. Por lo general, por regla general, no debe preocuparse particularmente por esto: simplemente comience a dominar lo que le parece demasiado complicado y demuestre a sí mismo que puede resolverlo y usarlo.

Por ejemplo, si está al comienzo del camino de un desarrollador de React, puede encontrar muchos patrones de diseño aparentemente complicados que debería explorar. Entre ellos se encuentran componentes compuestos, componentes de alto orden, accesorios de renderizado, componentes inteligentes, componentes tontos y mucho más (por ejemplo, se recomienda dominar la tecnología para perfilar el rendimiento de los componentes).

Domine todas estas tecnologías y comprenderá por qué y por qué se utilizan. Como resultado de su estudio, descubrirá que ahora es más conveniente para usted desarrollar proyectos en React.

 //     ? //   ,      ,    . render() { const children = React.Children.map(this.props.children,  (child, index) => {     return React.cloneElement(child, {       onSelect: () => this.props.onTabSelect(index)   });  }); return children; } 

Además, no tenga miedo de usar algo nuevo en el curso del trabajo, naturalmente, dentro de límites razonables. Al mismo tiempo, no limite el uso de nuevos enfoques solo a experimentos en proyectos que realice en su tiempo libre.

Si aquellos con quienes trabaja tienen preguntas sobre sus innovaciones, tenga en cuenta que esto es completamente normal. Esté preparado para defender sus decisiones con argumentos sólidos a su favor.

Su objetivo debe ser resolver un problema existente, simplificar el desarrollo posterior o simplemente mejorar la legibilidad del código que solía verse desordenado. Incluso si sus propuestas, como resultado de las discusiones con el equipo, son rechazadas, al menos aprenderá algo nuevo, y esto es mucho mejor que no ofrecer nada nuevo y no desarrollarse como desarrollador.

No trate de complicar demasiado los proyectos.


Quizás esta recomendación le parezca contraria a la anterior, dedicada a los experimentos con nuevas tecnologías, pero, de hecho, no es así. En todas partes, en la vida, en la programación, necesitamos equilibrio. No simplifique demasiado algo solo para demostrar a otros su propio avance. Es mejor acercarse a lo que está sucediendo en términos prácticos. Escriba código que sea fácil de entender y que resuelva las tareas que se le asignan.

Por ejemplo, si Redux no es necesario en su proyecto, pero desea usar esta biblioteca solo porque todos la usan, y realmente no piensa en los objetivos de usar Redux, no lo haga. Mejor: trate con Redux, comprenda esta tecnología y si ve que lo que sucede en su proyecto es contrario a lo que entiende, prepárese para defender su punto de vista.

A veces puede parecerle que usando la última tecnología y creando código complejo, le dice a todo el mundo algo como esto: “No soy un desarrollador principiante, me convierto en un profesional. ¡Este es el código que estoy escribiendo!

Honestamente, yo mismo estaba al comienzo de la carrera de desarrollador. Pero con el tiempo, se da cuenta de que el código que se escribe sin el deseo de probarle algo a alguien, el código en el que las tecnologías no se usan solo porque se pueden usar en él, sin razones serias para recurrir a estas tecnologías, lo hace mucho más fácil La vida de cualquier desarrollador. Esto es lo que significa:

  1. No solo uno que entiende el diseño de este proyecto, sino también otros miembros del equipo pueden trabajar en un proyecto que no sea demasiado complicado. Como resultado, las tareas de desarrollo, corrección de errores, pruebas y muchas otras pueden ser resueltas no solo por el creador de este proyecto.
  2. Otros programadores pueden entender lo que está haciendo sin pasar demasiado tiempo escuchando sus explicaciones. Puede actualizarlos en un par de minutos.
  3. Cuando el desarrollador principal, por ejemplo, se va de vacaciones por dos semanas, otros son libres de asumir sus tareas y no tendrán que pasar todo un día de trabajo en lo que se hace durante un par de horas.

Las personas son buenas con quienes no se complican la vida. Por lo tanto, si desea ser respetado por el equipo y tener una buena reputación con sus superiores, intente escribir un código para el equipo, no para usted. Como resultado, se convertirá en una persona con quien es fácil y agradable trabajar.

Refactorizar está bien


Usted, durante el trabajo en un determinado proyecto, puede cambiar su punto de vista docenas de veces sobre algunas cosas, y el gerente del proyecto puede incluso revisar sus puntos de vista con mayor frecuencia. Alguien critica lo que hiciste y tú, si la crítica está justificada, comienzas a cambiar algo; criticas el trabajo de otros y ellos, al escucharte, rehacen lo que escribieron. Como resultado, el código tiene que ser reescrito constantemente.

No tome esto como algo negativo. Dado que los programadores constantemente tienen que aprender algo nuevo, la refactorización es completamente normal. El desarrollo suele ser el camino de prueba y error. Y cuanto más a menudo alguien tropieza, siguiendo este camino, más fácil será para él enfrentar las dificultades y seguir adelante.

Sin embargo, para garantizar que la refactorización no se convierta en una pesadilla, se recomienda que se preste suficiente atención a las pruebas. Siéntase libre de probar todo lo que pueda alcanzar. Quizás todos los programadores ya se han encontrado, o todavía se encontrarán con una situación en la que las buenas pruebas lo ayudarán a ahorrar un montón de tiempo. Y si usted, como muchos otros, piensa que las pruebas son una pérdida de tiempo, intente tomarlas de manera diferente que antes. A saber, estos son los beneficios que el desarrollador y su equipo obtienen de buenas pruebas:

  1. No tiene que sentarse con sus colegas durante mucho tiempo, explicándoles cómo funciona todo.
  2. No tiene que explicar las razones por las cuales algo salió mal.
  3. No tiene que corregir los errores de otras personas.
  4. No es necesario corregir los errores que aparecieron unas semanas después del lanzamiento.
  5. Gracias a la organización precisa de las comprobaciones de proyectos, tiene tiempo para resolver varios problemas que no están relacionados con errores de depuración que provienen de la nada.

De hecho, aquí hay una pequeña lista de los beneficios que un programador y sus colegas reciben de un sistema de prueba de proyecto bien organizado.

El amor por el trabajo es la base del éxito.


Hace un año, decidí convertirme en un desarrollador de React más avanzado. Quería, entre otras cosas, hablar en varios eventos, compartir la alegría de aprender cosas nuevas con otras personas.

Me puedo sentar en la computadora toda la noche, haciendo lo que amo y disfrutando cada minuto de lo que está sucediendo. El punto aquí es que si una persona realmente se esfuerza por algo, entonces, de una forma u otra, todo a su alrededor lo ayuda a llegar a la meta. Por ejemplo, recientemente hablé por primera vez en una pequeña conferencia frente a doscientos espectadores.

Durante este tiempo, crecí como desarrollador de React, aprendí mucho. En particular, esto se aplica a varios patrones de diseño, principios de desarrollo de proyectos, mecanismos de marco interno. Ahora puedo comunicarme sobre temas que antes me parecían inaccesibles y, además, puedo enseñar a otros lo que no me atrevía a mirar antes. Al mismo tiempo, hoy siento el mismo deleite y placer que hace un año.

Por lo tanto, recomendaría a todos que se pregunten: "¿Te gusta lo que haces?" Si la respuesta a esta pregunta es negativa, encuentre lo que realmente le gusta, algo de lo que pueda hablar durante horas, algo que pueda hacer día y noche, sintiéndose completamente feliz. Para crecer y desarrollarse en cualquier campo, todos necesitan encontrar lo que les gusta. El hombre no puede ser forzado a tener éxito en nada. Una persona puede tener éxito solo cuando consciente y con placer hace lo que le gusta.

Si pudiera regresar hace un año y encontrarme allí, me diría esto para prepararme para el gran e interesante camino que me espera.

Estimados lectores! ¿Qué consejos, inspirados por la experiencia, podrías compartir con desarrolladores web novatos?

Source: https://habr.com/ru/post/es413501/


All Articles