Conceptos básicos de React - Curso de React desde cero - Capítulo 3

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.

¿Qué son los componentes en React?

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.

Componentes funcionales

Los componentes funcionales de React, se escriben con funciones de JavaScript. Aquí tienes un pequeño ejemplo.

React JSX

function HolaMundo(){
	return (<p>¡Hola mundo!</p>);
}

Resultado en el navegador

¡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.

Carpetas y archivos de React

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.

Carpeta node_modules

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.

Carpeta public de React

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..

Carpeta src de React

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.


Capítulos


    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


    Comentarios

    Si te quedan dudas sobre el temario, sobre JavaScript, 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.