¿Estás pensando en React? React es una librería JavaScript que nos permite desarrollar interfaces de usuario en el marco de SPA o single page application gracias a la combinación del código JavaScript con la sintaxis de HTML. Por ello, es una librería conocida por construir aplicaciones web grandes y rápidas.
Al ser una librería tan conocida y usada, hay muchas formas de acercarnos a la creación de proyectos con ella, pues tenemos mucha teoría que comprender antes de la práctica. En este post, te enseñaremos un método general para ir pensando en React una vez empieces a crear tus propios proyectos con esta herramienta.
Pensando en React
En nuestro post sobre los principios básicos de React, te hemos explicado algunas de las reglas básicas que tenemos que tener en cuenta cuando estemos pensando en React. Allí te hemos explicado que React es una librería basada en componentes que nos permite crear código declarativo más que imperativo. Además, recordamos que con React puedes crear una diversidad de proyectos, no solo para la web, sino también para aplicaciones móviles. Luego, a lo largo de varios posts en nuestro blog de desarrollo web te hemos enseñado muchos aspectos de la teoría y práctica de esta gran librería JavaScript para que los apliques en tus propios proyectos.
Entonces, ahora que te has leído mucha teoría, has ejecutado algunos ejercicios prácticos y has explorado toda la documentación de esta poderosa herramienta, es momento de empezar a ejecutar tu primer proyecto. Sin embargo, a pesar de toda la preparación, esto se siente como una tarea inmensa. Desde KeepCoding te contamos que la única manera de enfrentar esta tarea es pensando en React.
Para profundizar en lo que te contaremos a continuación, te recomendamos leer el artículo Thinking in React de la página oficial reactjs.org. Este artículo nos enseña cómo enfrentar la creación de una aplicación en React a partir de los datos que se supone que manejaremos en ella.
Lo que nos sugiere hacer React es empezar con una vista de tipo mock, un boceto general del diseñador con los datos que necesita tener dentro de la aplicación. Una vez tenemos esto, podemos ir rompiendo esta vista o user interface en un árbol de componentes. Esto quiere decir descomponer la vista en las unidades lógicas que existen dentro de ella y definir qué elementos deben ser componentes y qué elementos están dentro de estos componentes: una jerarquía.
Luego, con base en el mockup que hemos hecho, podemos empezar a construir una versión estática de React sin que cambien sus datos. Es decir, nos ponemos a pensar en cómo quisiéramos que se viera nuestra app si los datos fueran de determinada manera. Esta versión es básicamente pura maquetación.
Finalmente, deberemos llegar a un paso un poco más difícil: definir qué datos van a cambiar. Sea porque el usuario interactúa con diferentes input o porque la base de datos se ajusta con el tiempo, en una aplicación es un hecho que algunos datos cambiarán. Recuerda que estos datos se determinan a partir del estado en React, que es un tipo de dato interno que cambia con el tiempo declarado con el hook useState (contrario a las props, datos externos que se mantienen estáticos).
Una vez identificado este estado y los distintos datos que guardaremos dentro de él, deberemos identificar dónde corresponde. Es decir, en qué sección de código debe estar. Finalmente, podremos meter la lógica necesaria dentro del estado para que pueda cambiar cuando lo necesitemos.
Ahora que, además de conocer la teoría, sabes cómo enfrentarte al reto de crear una aplicación desde cero pensando en React, estás listo para empezar tus propios proyectos. Para seguir aprendiendo sobre la creación de todo tipo de proyectos de programación para la web, no solo en React, sino también en herramientas y lenguajes como JavaScript, HTML y CSS, inscríbete ya en nuestro Bootcamp Desarrollo Web.
En este espacio de formación intensiva e íntegra, aprenderás todo lo necesario para convertirte en un experto del desarrollo web con la guía de grandes profesionales del sector. ¡No te lo pierdas y pide información!
