Bienvenido/a al primer tutorial de React JS de Imagina Formacion. En este tutorial, aprenderás los conceptos básicos de React JS y cómo empezar a construir aplicaciones web modernas y dinámicas. Con este tutorial, te convertirás en un desarrollador de React en poco tiempo. Sin embargo, si deseas ampliar tus conocimentos te recomendamos que consultes nuestro curso de React JS
¿Qué es React JS?
React JS es una biblioteca de JavaScript de código abierto desarrollada por Facebook. Es ampliamente utilizada para construir interfaces de usuario (UI) interactivas y reutilizables. React utiliza un enfoque basado en componentes, lo que significa que puedes crear componentes individuales y combinarlos para construir aplicaciones web complejas.
¿Qué hace diferente a React JS de otras librerias?
Lenguaje JSX
Utiliza lenguaje JSX para construir la interfaz de usuario, por lo que si dominas HTML podrás con gran facilidad crear tus propios componentes y su comportamiento. JSX crea plantillas donde se pueden anidar elementos, por lo que podrás crear componentes tan pequeños o grandes como creas conveniente.
Virtual DOM eficiente
React JS usa un DOM Virtual que recarga individualmente cada componente cuando haga falta, por lo que ofrece una gran velocidad a la hora de renderizar vistas.
Componentes reutilizables
Los componentes son totalmente independientes y contienen su propio comportamiento, un estado y el contenido a renderizar. Éstos, contienen elementos que se pueden anidar, igual que podemos anidar componentes y que se comuniquen entre ellos.
Las aplicaciones en React JS tienen un estado global que repercute en el estado individual de cada componente.
Renderización HTML en servidor
El isomorfismo (renderización HTML en servidor como en cliente) de ReactJS ofrece la posibilidad de entregar el HTML ya renderizado a los buscadores web, como Google, y así mejorar el posicionamiento. De esta manera se evita el problema de que el buscador se encuentre el cuerpo de la página vacío).
Creación de un proyecto React JS
Paso 1. Descargar Node.js
Para facilitar la creación de un proyecto, su estructura de carpetas, hacer uso de librerías externas y el despliegue local de la aplicación usaremos npm. Para hacer uso de ello tenemos que tener descargado e instalado Node.js en nuestro equipo.
Puedes descargarlo en este link.
Si quieres profundizar más en este lenguaje tienes a tu disposición nuestro curso online de Node.js
Paso 2. Instalar create-react-app
Gracias a create-react-app podremos, con un simple comando, crear nuestra primera aplicación con React JS. Para instalar este paquete, usaremos npm y lo instalaremos de forma global usando el parametro -g.
Deberás abrir la consola de comandos (cmd en Windows, Terminal en Mac) y escribir lo siguiente:
npm install -g create-react-appEste paso suele ser algo largo, pero sabremos identificar cuando ha terminado de instalar con facilidad.
Paso 3. Crear proyecto React con create-react-app
Con la consola de comandos y haciendo uso del comando cd nos colocaremos en la carpeta donde queremos que se almacene nuestro proyecto de React JS. Por ejemplo, vamos a crearlo dentro de la carpeta react que se encontrará en el Escritorio: cd C:\Users\nombreUsuario\Desktop\react. Donde nombreusuario es el nombre tu usuario y react la carpeta que debes haber creado previamente en el escritorio.
Una vez que ya estamos colocados en la carpeta que queremos, simplemente usaremos create-react-app para crear el proyecto, que llamaremos, por ejemplo, prueba-react.
create-react-app prueba-reactLa creación puede que lleve un rato, pero sabremos que ha acabado cuando salga un mensaje de éxito y nos indique que el proyecto ya está disponible en el directorio donde nos situábamos. También nos indicará los siguientes dos pasos a seguir si queremos desplegarlo en local (se explicará más adelante en este tutorial)
Cuando haya terminado de ejecutar, podremos entrar en la carpeta react y apreciar que se ha creado una nueva carpeta llamada prueba-react. Dentro encontraremos el proyecto distribuido en una serie de carpetas y ficheros.
Paso 4. Comprender la Estructura del Proyecto creado
Es importante conocer la estructura del proyecto, dado que será la base de nuestra aplicación. Por defecto, create-react-app crea la siguiente estructura:
Vamos a analizar el contenido de los distintos elementos generados:
Carpeta node_modules
Aquí se guardan todas las dependencias ppm del proyecto que vayamos necesitando. Create-react-app ya nos habrá instalado unas cuantas por defecto.
Carpeta public
Esta es la raíz del proyecto y aquí estará el archivo principal: index.html y el favicon: icono que aparecerá en la pestaña del navegador cuando despleguemos la aplicación. Habrá una etiqueta <div> dentro de index.html con un id "root" que nos indica dónde se va a introducir el componente principal (App.js) de nuestra aplicación.
Carpeta src
En esta carpeta, es donde están los componentes y sus estilos, a parte de otros ficheros js que necesitemos. Por defecto, el componente principal de todo proyecto React JS se llama App.js. También habrá un index.js que se encarga de introducir el componente App en el <div> de index.html que hemos mencionado en el punto anterior.
Encontramos a la misma altura, las hojas de estilo: App.css e index.css; una imagen (svg) del logo de React JS; un archivo para realizar tests sobre el componente App y un archivo javascript llamado registerServiceWorker.js.
Archivo readme.md
Se trata de un fichero de informacion sobre el proyecto.
Archivo package.json
Aquí encontramos las dependencias de npm que hayamos instalado en el proyecto, tanto para desarrollo como para producción.
Archivo .gitignore
Documento donde se definen aquellos archivos a ignorar en git.
Paso 5. Desplegar el proyecto y visualizarlo en el navegador
El proyecto a estas alturas es perfectamente desplegable. Obviamente, es el proyecto por defecto que nos ha ofrecido create-react-app.
Para poder desplegar el proyecto en nuestro entorno local (localhost) usaremos un comando npm que nos abrirá el navegador que tengamos predeterminado y en una pestaña nueva nos mostrara la interfaz de usuario definida. Tenemos que estar en la carpeta del proyecto, por lo que haremos cd para entrar en pruebaReact y desde ahí podremos hacer:
npm startUna vez ejecutado, nos debe salir un mensaje de éxito como el siguiente:
y si entramos en http://localhost:3000/ podremos ver lo siguiente:
Creación de un Componente y Hola Mundo
Como hemos comentado mas arriba, la base de React JS son los componentes. Es por ello que es imprescindible comprender como crear uno y como renderizarlo en nuestro proyecto.
Cuando desarrollamos componentes de React JS, debemos tratar de individualizarlos lo máximo posible para que podamos usarlos en otros proyectos, ya sean existentes o nuevos.
En esta ocasión vamos a crear un componente llamado (Saludo.js) - en React, los componentes deben comenzar con mayúscula - que renderizará el famoso mensaje de Hola Mundo.
Crearemos Saludo.js a la misma altura de carpetas que App.js para simplificar, dejaremos el header con el logo de React y únicamente cambiaremos el cuerpo de App.js añadiendo una etiqueta <Saludo /> que será nuestro nuevo componente.
Saludo.js
Haciendo uso de ES6, definiremos Saludo.js como una clase que va a heredar todo aquello que tiene un componente React (Component).
El método render de la clase Saludo, básicamente devuelve un JSX con un título cuyo contenido es Hola Mundo. También tenemos definido un constructor donde se define el estado del componente y donde podremos acceder y definir las propiedades y comportamiento del componente.
Para poder hacer uso de este componente en App.js y renderizarlo, debemos exportarlo (export default) con un nombre. En este caso Saludo.
import React, { Component } from 'react';
class Saludo extends Component {
render() {
return (
<h1>
Hola Mundo!
</h1>
);
}
}
export default Saludo;App.js
El componente principal de todo proyecto que use React JS es App.js y es el encargado de contener todos los componentes necesarios para la aplicación, ya sean propios o externos. En nuestro caso, App.js sera el encargado de renderizar un componente Saludo para que así podamos ver por pantalla "Hola Mundo".
Para poder hacer uso de la etiqueta <Saludo /> debemos importarlo al comienzo del fichero. Debes editar el archivo para que quede de la siguiente manera:
import React, { Component } from 'react';
import Saludo from './Saludo'
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<Saludo />
</div>
);
}
}
export default App;index.js
En este archivo se define cómo incrustar nuestro componente principal (App), que contendrá en su interior el componente Saludo que hemos creado un poco mas arriba. Haciendo uso de la clase ReactDOM, podremos renderizar App en nuestro unico fichero html: index.html.
Concretamente renderizará App en el elemento HTML que contenga el id "root".
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();index.html
Este es el HTML de nuestro proyecto que contendrá el componente App y éste a su vez, contendrá el nuevo componente Saludo. Puedes apreciar el elemento donde se va a introducir, ya que dispone del id root.
¡Felicidades! Has conseguido crear tu primera aplicación de React
Como habrás podido apreciar, los cambios que vayas haciendo en cualquiera de los archivos o carpetas, se ven rápidamente reflejados en el navegador sin la necesidad de re-desplegar manualmente. Una vez hemos realizado nuestro componente Saludo y lo hemos introducido en el componente App.
¡Ya tienes un Hola Mundo creado usando componentes de React JS!
Conclusiones
En este tutorial, has aprendido los fundamentos de React JS y has dado tus primeros pasos en la creación de una aplicación con esta biblioteca. Has configurado tu entorno de desarrollo, creado componentes, utilizado JSX y renderizado tu aplicación. ¡Felicidades por llegar hasta aquí!
En nuestro curso de React JS, te sumergirás en los conceptos avanzados de React y aprenderás a construir aplicaciones web sofisticadas y de alto rendimiento. Desde el enrutamiento hasta el manejo del estado global, explorarás técnicas y mejores prácticas para llevar tus habilidades de desarrollo de React al siguiente nivel.
Recuerda que seguir practicando y construyendo proyectos reales te ayudará a consolidar tus conocimientos y crecer como desarrollador de React. ¡Sigue explorando las posibilidades infinitas de React JS y disfruta de la experiencia de construir aplicaciones web increíbles!