React JS es una libreria o framework Open Source para crear aplicaciones e interfaces de usuario, es sencillo, declarativo, reactivo y facil de combinar.
En estos tiempos ya cualquiera sabe lo que es React Js , una de las mayores librerias en el entorno web, mantenida por Facebook y por miles de desarrolladores y es usada por otros miles de desarrollades mas.
Hoy vamos a crear un ejemplo de react y mas adelante vamos a crear mas ejemplo y proyectos.
Lo que nos interesa es tener un entorno de desarrollo para crear aplicaciones React y conocer los comandos y conceptos basicos.
Caracteristicas de React Js
React Js esta centrado en el Front-End es decir la parte visual, en React Js se pueden crear componentes reutilizables e interactivos.
En react Js existe un virtual Dom (Document Object Model) utilizado por react para fortalecer y mejorar el propio DOM del navegador.
En react se usa un formato llamado JSX que es practicamente Javascript mezclado con HTML.
Tambien existen los Hook de Estado, que se lanzan cuando un elemento cambia de estado, tambien existen los Hooks de Efectos que agrega la capacidad de realizar efectos secundarios.
Node js
Lo primero que debemos tener instalado es Node Js por que vamos a usar el comando npm: Node Package Manager y npx
Una vez instalado Node js ya podemos continuar.
Crear una app React
Para crear una aplicacion en react vamos a usar la terminal o cmd.exe y para muchas tareas va a ser necesario por lo que no hay que saltarse el uso de la CMD o terminal.
Vamos a buscar una ubicacion comoda en nuestra pc para crear nuestros proyectos y vamos a abrir la terminal y nos vamos a ir a esa ubicacion usando el comando “cd ubicacion”.
En mi caso es esta ubicacion. C:\xampp\htdocs\react>
En nuestra carpeta de proyectos ya en la cmd vamos a usar el comando.
npx create-react-app app1El comando npx recibe 2 parametros, el primero es “create-react-app” es decir la instruccion de que vamos a crear una aplicacion react y el segundo parametro es el nombre del proyecto o de la carpta donde se va a grabar el nuevo proyecto, en este caso app1.
En la terminal va a correr el proceso de instalacion y vamos a esperar a que nos devuelva el prompt y nos notifique que el proceso ha terminado.
Cuando la creacion de la app termine, en la carpeta que seleccionamos se van a crear varios archivos y carpetas
Carpetas: build, node_modules, public, src….
Por el momento nos vamos a centrar en la carpeta src, es donde se guardan los archivos de los componentes y el archivo de la aplicacion principal es App.js
Ejecutar App React
Para ejecutar o visualizar nuestra aplicacion en React vamos usar el comando.
npm startDesde la cmd y tenemos que estar ubicados en la carpeta de nuestro proyecto o cualquier proyecto en react.
Al ejecutarlo se va a abrir un servidor temporal y en el navegador veremos algo asi. Indicando que todo ha salido bien.
Modificar App.js React
Ahora vamos a modificar el archivo App.js para crear un simple Hola mundo, para ello vamos a remover parte del codigo que hay inicialmente y vamos a dejar el archivo App.js de la siguiente manera.
function App() {
return (
<div className="App">
<h1>Hola Mundo!</h1>
<p>Este es un ejemplo de App en React.js</p>
</div>
);
}
export default App;
Con este codigo vamos a hacer un simple hola mundo con un parrafo, pero este es el inicio para crear nuestras aplicaciones en React.
En proximos articulos vamos a hablar o escribir mas sobre React Js y vamos a crear mas ejemplos y proyectos utiles.
Mostrar una Lista en React
Vamos a mostrar una lista de elementos con React Js apartir de un Array utilizando la funcion map.
En un articulo anterior ya vimos una Introduccion a React Js donde vimos como crear un proyecto en react y le hicimos unas modificaciones al proyecto inicial.
Ahora que ya conocemos la estructura de react vamos a editar el archivo App.js.
Codigo
Los siguientes 3 bloques de codigo van juntos en el archivo App.js
Vamos a definir una lista de elementos, por ejemplo animales o mascotas.
const elements = [
{name: "Gallina", english:"Hen", id:1},
{name: "Mono", english:"Monkey", id:2},
{name: "Perro", english:"Dog", id:3},
{name: "Gato", english:"Cat", id:4},
{name: "Ardilla", english:"Squirel", id:5},
{name: "Tigre", english:"Tiger", id:6},
{name: "Gorila", english:"Gorilla", id:7},
{name: "Tortuga", english:"Turtle", id:8},
{name: "Tiburon", english:"Shark", id:9},
{name: "Ballena", english:"Whale", id:10}
];
Despues vamos a crear una funcion que va a tomar el Id de un elemento de la lista para obtener el valor en INGLES o ENGLISH de cada elemento.
function showEnglish(id){
alert(elements[id-1].english)
}
Esta funcion nos va a mostrar una alerta cada vez que hagamos click en un elemento de la lista.
Y ahora vamos con la funcion App en la cual vamos a generar la lista, asignar el evento CLICK a cada elemento y mostrar el resultado.
function App() {
/* Funcion para mapear los elementos de la lista y converirlo en elementos LI*/
const listitems = elements.map(ele =>
<li key={ele.id} onClick={()=>showEnglish(ele.id)}>
{ele.name}
</li>
);
/* Mostramos la lista de elementos y mostramos los datos */
return (
<div className="App">
<h1>Lista de Mascotas</h1>
<ul>{listitems}</ul>
</div>
);
}
export default App;
Resultado
Para ver el resultado tenemos que ejecutar los comandos.
cd applist1
npm start
Motrar Tabla en React
Seguimos creando ejemplos con React Js, ahora vamos a crear y mostrar una tabla HTML con React, de una manera facil apartir de un array con los datos.
En el articulo anterior hablamos sobre como Mostrar una lista con React Js, vamos a usar la logica de ese ejemplo.
Todo el codigo que vamos a escribir lo vamos a colocar en el archivo App.js de nuestro proyecto en React.
Codigo
Lo primero que vamos a definir es un array asociativo con los datos, cada fila con sus valores.
const elements = [
{name: "Gallina", english:"Hen", id:1, tipo:"Domestico"},
{name: "Mono", english:"Monkey", id:2, tipo:"Salvaje"},
{name: "Perro", english:"Dog", id:3, tipo:"Domestico"},
{name: "Gato", english:"Cat", id:4 ,tipo:"Domestico"},
{name: "Ardilla", english:"Squirel", id:5,tipo:"Salvaje"},
{name: "Tigre", english:"Tiger", id:6,tipo:"Salvaje"},
{name: "Gorila", english:"Gorilla", id:7,tipo:"Salvaje"},
{name: "Tortuga", english:"Turtle", id:8,tipo:"Marino"},
{name: "Tiburon", english:"Shark", id:9,tipo:"Marino"},
{name: "Ballena", english:"Whale", id:10,tipo:"Marino"}
];
Tenemos 10 elementos con los siguientes atributos: name, english, id y tipo.
Y ahora vamos a hacer unn recorrido del array y en cada fila de la tabla vamos a agregar un elemento del array, y en cada columna pondremos los atributos.
function App() {
/* Funcion para mapear los elementos de la lista y converirlo en elementos LI*/
const listitems = elements.map(ele =>
<tr key={ele.id}>
<td>{ele.id}</td>
<td>{ele.name}</td>
<td>{ele.english}</td>
<td>{ele.tipo}</td>
</tr>
);
/* Mostramos la lista de elementos y mostramos los datos */
return (
<div className="App">
<h1>Tabla de Mascotas</h1>
<table border="1">{listitems}</table>
</div>
);
}
export default App;
Usamos la funcion “map” para recorrer el array y crear una coleccion de elementos tipo “<tr>” al final mostramos elemento “table” y le pasamos como parametro la coleccion de elementos que creamos.
Resultado
Para ver el resultado tenemos que ejecutar los comandos.
cd apptabla1 npm start
Y este es el resultado.
Como usar React Router Dom
React Router Dom es una libreria de react que nos permite navegar y crear rutas en nuestra aplicacion react sin recargar la pagina, ulti para las SPA (Single Page Apps).
React Router Dom es parte de las librerias basicas o estandar de react por lo que aveces ya esta instalada en un proyecto react, pero para instalarla vamos a usar el comando.
npm i react-router-domreact-router-dom cuenta con varios componentes para crear manejar nuestras rutas, entre ellos estan: BrowserRouter, Router, Routes
- BrowserRouter nos permite convertir nuestra aplicacion en un navegador, por lo que toda nuestra aplicacion debe estar englobada por BrowserRouter
- Router: Es el componente donde se van a crear o almacenar las diferentes rutas
- Route: Corresponde a una ruta individual , por lo que el componente Router puede tener varias Rutas dentro
Este proyecto lo cree usando el comando.
mkdir myapp123
cd app123
npm create vite@latestLa manera en la que se aplican estos componentes va de la siguiente manera.
Archivo main.jsx
En el archivo main.jsx, el componente aplicacion debe estar dentro de BrowserRouter.
createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>
)
Archivo Prueba.jsx
El archivo Prueba.jsx es una vista de prueba.
import React from 'react'
import { useParams } from 'react-router-dom'
export function Prueba(){
return (
<>
<h1>Pagina de prueba</h1>
<p>Estas es la pagina inicial</p>
</>
)
}
export default Prueba
Archivo Products.jsx
El archivo Products.jsx es otra vista de prueba.
import React from 'react'
import { useParams } from 'react-router-dom'
export function Products(){
return (
<>
<h1>Productos</h1>
<p>Esta es la pagina de productos</p>
</>
)
}
export default Products
Archivo App.jsx
El archivo App.jsx es el archivo principal, y desde aqui vamos a crear el enrutador y un menu o nav.
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { Prueba} from './Prueba'
import { Products} from './Products'
import { Routes, Route , Link } from 'react-router-dom'
function Inicio() {
return <h1>Hola Mundo!</h1>;
}
function App() {
return (
<>
<div>
<Link to="/">Inicio</Link>
<Link to="/prueba">Prueba</Link>
<Link to="/products">Products </Link>
</div>
<Routes>
<Route path="/" element={<Inicio/>}/>
<Route path="/prueba" element={<Prueba/>}/>
<Route path="/products" element={<Products/>}/>
</Routes>
</>
)
}
export default App
El componente Route debe tener como parametro path que es la ruta que vamos a escribir o manejar en el navegador y el parametro element hace referencia a un componente de React.
Ahora solo falta ejecutar nuestro proyecto con el comando.
npm run dev