Hola mundo en React.js

Hola mundo en React.js

Introducción a React.js creando un "Hola mundo!"

·

5 min read

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.

npm-vite.png

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"

localhost-vite.png

Si ahora vamos a nuestro navegador web y entramos a localhost:5174 podremos visualizar nuestra aplicación de React

vite-react.png

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 .

archives-vite.png

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

main-jsx.png

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

Recursos que te serán de ayuda...