¿Qué son los componentes en React?
Capítulo 3: Conceptos básicos de React
Antes de empezar a escribir código, debes conocer unos cuantos conceptos básicos sobre React, que te ayudarán a entender mejor su estructura de archivos y funcionamiento.
Los componentes en React se refieren a los módulos de código reutilizable. Las aplicaciones que creemos con React, serán por componentes, cada componente, está diseñado para poderse reutilizar fácilmente sin tener que escribir código repetido un montón de veces.
Tipos principales de componentes
Tenemos dos tipos de componentes principales, los funcionales y los de clase. Principalmente, vamos a ver los funcionales, aunque también hablaré de los de clase.
Los componentes funcionales son funciones de JavaScript que devuelven elementos de React con sintaxis JSX.
¿Qué es JSX?
De forma sencilla, JSX es una sintaxis extendida de JavaScript, la cual nos va a permitir escribir con una mezcla de JavaScript y HTML.
Los componentes funcionales de React
Los componentes funcionales de React, se escriben con funciones de JavaScript. Aquí tienes un pequeño ejemplo.
function HolaMundo(){
return (<p>¡Hola mundo!</p>);
}El resultado en el navegador es el siguiente:
¡Hola mundo!
Como has podido comprobar, se utiliza una sintaxis de JavaScript con la función y también HTML dentro de ella. Así directamente, sin más rodeos.
Si has realizado el curso de JavaScript conmigo, sabrás que era un poco más complicado hacer esto directamente desde JavaScript vanilla.
Además, la convención de JavaScript para los nombres de funciones es con camel case (primera letra de palabra minúscula, el resto de palabras, la primera letra en mayúsculas). En cambio, en JSX, la convención es que los componentes funcionales, se escriban en Pascal Case (cada primera letra de cada palabra en mayúsculas, incluida la primera.), es decir, con la convención de clase de JavaScript.
Contenido del proyecto React
Al crear el proyecto de React, hemos generado varias carpetas. Veamos que contenido tienen:
La carpeta node_modules
La carpeta node_modules, contiene una enorme barbaridad de carpetas dentro. Esta carpeta, como su nombre indica, contiene los módulos de Node.js. Los que necesitaremos para ejecutar nuestra aplicación.
En principio, no vamos a tocar nada de esta carpeta.
La carpeta public
Esta carpeta contiene lo necesario para mostrar la aplicación en el navegador.
El archivo favicon.ico
En esta carpeta encontramos archivos como el favicon.ico (icono que sale en el título de la ventana o pestaña del navegador).
Para reemplazarlo, sustituye esta imagen por otra con el mismo nombre. Este va a ser el icono que se mostrará en todas las páginas de tu aplicación.
El archivo index.html
Este es el archivo principal de la aplicación web. Es básicamente una hoja .html normal y corriente, con algo especial que es el <div> con el id "root", el cual explicaré en el próximo capítulo.
También tenemos dos imágenes para el logo de React.
El archivo manifest.json lleva información sobre ciertas características de la aplicación.
También tenemos el archivo robots.txt. Funciona igual que en sitios web tradicionales. Podemos establecer reglas de seguimiento o no seguimiento para los crawlers o arañas de los buscadores.
La carpeta src
Esta es una de las carpetas más importantes, con la que vamos a ir trabajando durante el curso.
Lo más importante, es que aquí vamos a guardar todos los archivos js y css. Esta es la carpeta de código principal de la aplicación.
El archivos App.css e index.css
Estos archivos contienen los estilos css de nuestra aplicación.
El archivo App.js
El archivo App.js contiene las importaciones de otros archivos y un componente de tipo funcional. Es aquí, donde se escribe el código JSX que va a ser presentado en el navegador.
El archivo App.test.js
El archivo App.test.js permite realizar pruebas.
El archivo index.css
El archivo index.css le da estilo por defecto a la aplicación.
El archivo index.js
Este archivo contiene principalmente importaciones y la creación del componente de la aplicación. Todo esto irá tomando sentido a medida que vayas creando cosas.
Archivos sueltos en el proyecto React
Finalmente, tenemos el archivo .gitignore, el cual especifica en un repositorio de Git, que archivos se van a ignorar para el control de versiones. Tienes un curso básico de unas dos horas para aprender Git también (pronto haré nuevos capítulos con cosas más avanzadas). Déjame un comentario si quieres más información.
Los archivos .json son archivos con información relacionada con la aplicación. De momento, no tocaremos nada de esto.
El archivo README.md es un archivo de descripción de la aplicación en formato Markdown.
Comentarios
Si te quedan dudas sobre el temario, sobre React, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
