¿Sabes cuál es la estructura básica de un proyecto React? React es la segunda librería JavaScript más popular en el mundo de la programación después de JQuery. Su popularidad viene de la posibilidad que abre para manejar código JavaScript desde una sintaxis similar a HTML, simplificando muchas de las acciones que queremos ejecutar en un proyecto. Para ello, React usa un lenguaje conocido como JSX y distintos objetos.
Ya sean elementos, componentes, estados o efectos, todos estos objetos son esenciales para entender el funcionamiento de React. En este post, discutiremos la estructura básica de un proyecto React, una maqueta para empezar a crear cualquier aplicación.
¿Existe una estructura básica de un proyecto React?
Antes de darte un ejemplo de una estructura básica de un proyecto React, debemos discutir la existencia de este concepto. Si conoces un poco sobre cómo funciona React, sabes que algunas personas tienden a confundirlo con un framework. Es decir, con un marco de trabajo que nos facilita la solución de problemas. Sin embargo, React no es un framework, sino una librería JavaScript que simplifica la ejecución de acciones.
Cuando afirmamos que React no es un framework, estamos diciendo, entre otras cosas, que React no nos dice cómo debemos organizar nuestro proyecto. Aunque es cierto que herramientas como create-react-app nos dan un ambiente de código predeterminado en el que ya existe una jerarquía de carpetas y archivos, React no nos dirá cómo debemos organizarlos. Esto es distinto a frameworks como Angular, que tienen herramientas para crear componentes que ordenan archivos automáticamente.
Entonces, no estamos atados a una estructura básica de un proyecto React, pero ¿existe? La verdad es que, como muchas otras cosas en el mundo de la programación, cada desarrollador encontrará la mejor manera de estructurar su proyecto React. De hecho, Dan Abramov, uno de los desarrolladores más influyentes en la comunidad de React, contestó con «mueve archivos hasta que se sienta correcto» a una pregunta sobre la estructura básica de un proyecto React. Es decir, sea cual sea el tamaño de nuestro proyecto, la forma de crear nuestra estructura es, aunque suene redundante, creando nuestra estructura.
¿Cómo crear una estructura básica de un proyecto React?
A pesar de que no existe como tal una sola arquitectura correcta para un proyecto en React, a continuación te enseñaremos el proceso con el que trabajamos desde KeepCoding. Ten presente que esto es solo una forma; a medida que practiques, ya encontrarás la manera en la que tu proyecto se sienta cómodo y ordenado.
Entonces, ¿cuál es la estructura básica en KeepCoding? Para presentártela es mejor crear primero el escenario en el que la utilizaremos. Supongamos que hemos creado una aplicación con create-react-app, hemos visualizado su código y hecho la limpieza básica para simplificar nuestro ambiente.
NOTA: Para conocer más sobre este tema, te invitamos a leer nuestros posts create-react-app, cómo crear una aplicación con create-react-app, código de una aplicación creada con create-react-app y limpiar create-react-app.
Entonces, después de limpiar create-react-app, es momento de empezar a crear componentes para darle forma a nuestra aplicación. Supongamos que estamos creando una página listado en la que mostraremos una serie de elementos en forma de lista. En este caso, primero comenzaríamos por crear un componente que sea esta página y contenga dichos elementos. Luego, trataríamos lo elementos para que puedan ser sacados de un API o transformados.
Una de las formas para modificar un dato proveniente de una base de datos es cambiar su tipo de objeto. Para conocer un ejemplo de este tipo de modificación, te invitamos a leer nuestro post sobre transformar un array de objetos en enlaces.
Por tanto, una forma de crear una estructura básica de un proyecto React es crear una carpeta dentro de la carpeta predeterminada src que se llame components. Aquí crearemos distintos archivos para cada componente de nuestra aplicación. Para conocer más sobre cómo crear este proyecto, te invitamos a leer nuestro post sobre crear una página listado en React.
¿Quieres seguir aprendiendo?
Ahora que sabes cuál es la estructura básica de un proyecto React y sus flexibles posibilidades ¡ha llegado el momento de crear tu propio proyecto React con tu propia estructura! Para aprender cómo desarrollar este tipo de proyectos de programación para la web, te invitamos a participar en nuestro Desarrollo Web Full Stack Boocamp.
En este programa de formación intensiva, no solo aprenderás a dominar herramientas como React, sino que también aprenderás lenguajes de programación como JSX, JavaScript, CSS y HTML. Así, te convertirás en un experto del desarrollo web en pocos meses. ¡Anímate a seguir aprendiendo e inscríbete para reservar tu plaza!
