Este es un tutorial para principiantes en React js, se dará por hecho que tiene conocimientos básicos de HTML5 , CSS3 , Javascript y npm.
¿Qué es REACT JS?
React js es una librería de javascript para crear interfaces de usuarios, es open source y la comunidad apoya fuertemente esta librería. React es declarativo, lo que permite que el código sea más sencillo, también esta basado en componentes y esto nos proporciona que las aplicaciones estén hechas de varios "bloques de código" y reutilizarlos las veces que sea necesario, de esa manera nos evitamos repetir código a lo largo de nuestra aplicación.
Creando una aplicación con React
Para crear nuestro "Hola mundo" en React vamos a estar utilizando Vite.js. Vite.js es un starter o scaffolder básico que viene pre-configurado para rápidamente ponerte a desarrollar tu aplicación. Existen otros scaffolders tal como create-react-app que también es muy utilizado, en este ejemplo vamos a estar usando Vite. También es muy utilizado en la industria Next.js que es un framework de react que te permite crear UI.
En nuestra terminal usaremos el siguiente comando:
npm create vite@latest
Luego de correr el comando mencionado arriba, Vite nos pedirá que coloquemos un nombre a nuestro proyecto, yo le pondré 'hola-mundo', después de poner el nombre del proyecto nos dirá que seleccionemos nuestro framework, elegiremos react y presionamos la tecla enter.
Posteriormente escribimos los siguientes comandos en nuestro terminal:
cd hola-mundo
npm install
Con los comandos mencionados arriba ingresamos a la carpeta del proyecto y luego instalamos los módulos necesarios para que el scaffolder de Vite funcione correctamente.
npm run dev
El comando 'npm run dev' crea un servidor local para que podamos visualizar nuestro proyecto en un navegador web, en mi caso es en "localhost:5174"
Si ahora vamos a nuestro navegador web y entramos a localhost:5174 podremos visualizar nuestra aplicación de React
Abrir el proyecto en el editor de código que mas te guste, yo estaré utilizando Visual Studio Code
Con el siguiente comando se abrirá visual studio code, de ese modo podremos visualizar los archivos y carpetas del proyecto...
code .
node_modules es la carpeta donde se almacenan todas las dependencias y librerías que utilizas en tu proyectos.
public es la carpeta donde se guardan todos los archivos estáticos de tu aplicación, es decir, todos los archivos que no van a cambiar a los largo de la aplicación como pueden ser las imagenes, iconos, etc.
src es la carpeta que va almacenar todos los archivos del código de nuestra aplicación.
package.json es un archivo JSON que contiene información importante sobre el proyecto.
vite.config.js es un archivo que contiene las configuraciones de Vite.
.gitignore es un archivo que contendrá los nombres de las carpetas y archivos que querríamos que git ignore a la hora de mandar el proyecto a un repositorio.
¿Qué es el archivo Main.jsx ?
El archivo Main.jsx es la raíz del proyecto y todo lo que este dentro de la raíz será parte de la aplicación de React y va a ser manejado por el DOM de React, comúnmente los proyectos de React suelen tener un solo nodo raíz.
En las primeras cuatro lineas del archivo Main.jsx estan las importaciones, se importa la librería de React, ReactDOM, el componente App.jsx y los estilos CSS del archivo index.css.
Luego de las importaciones, a partir de la linea 6, ReactDOM crea un nodo raíz que hace referencia a un div que esta dentro del archivo index.html que tiene el id "root", en donde va a estar la raíz de toda la aplicación de React, seguido a eso se renderiza el componente App.jsx
¿Qué es un componente ?
Un componente en React se pueden definir como un bloque de código que se puede reutilizar, este tiene que retornar jsx para ser un componente, si no, no lo es.
Los componentes tienen la capacidad de manejar un estado interno, en caso de tener un estado interno estos son llamados Smart components(stateful) y si no lo tienen son llamados Dumb components(stateless).
Estos tienen la capacidad de recibir propiedades inmutables(props).
Creando nuestro primer componente
Vamos a nuestro archivo App.jsx de nuestra aplicación y borremos todo lo que esta dentro de nuestro componente, el componente App.jsx debería quedar algo así...
//App.jsx
import "./App.css";
function App() {
return (
<div className="App">
</div>
)
}
export default App
Ahora vamos a crear un nuevo archivo que lo llamaremos "HolaMundo.jsx", este archivo lo vamos a poner dentro de la carpeta /src y dentro del archivo pondremos el siguiente codigo...
//HolaMundo.jsx
const HolaMundo = () => {
return (
<div>
<h1>Hola Mundo!</h1>
</div>
);
};
export default HolaMundo;
Recordemos que un componente en React es una función Javascript que retorna HTML.
Renderizar componente
¡Genial! Creamos nuestro primer componente en React, pero si vemos nuestra aplicacion no podremos ver nada, ya que nuestro componente aun no se esta renderizando...
Vamos a agregar nuestro componente de HolaMundo a nuestra Aplicación de React!!
Lo primero que hay que hacer es importar este componente dentro del archivo App.jsx y luego agregarlo como si fuera una etiqueta HTML...
Nuestro componente debería quedar algo así...
//App.jsx
import "./App.css";
import HolaMundo from "./HolaMundo";
function App() {
return (
<div className="App">
<HolaMundo />
</div>
);
}
export default App;
Ahora si vamos a localhost:5174 podremos ver nuestro componente de HolaMundo renderizado en la pantalla.
Espero que te haya gustado esta introducción a React y que te haya servido!
Cualquier feedback es bienvenido! <3