(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Aprende React JS – Tutorial de Primeros pasos

Bienvenido/a al primer tutorial de React JS de Imagina Formacion. A lo largo de este documento iremos dando los primeros pasos para comprender y crear desde cero un proyecto con React JS.

logo-react

 

¿Qué es React JS?

Se trata de una librería de Javascript  creada por Facebook que nos ayuda a la hora de desarrollar aplicaciones en una sola página. Es una biblioteca de código abierto con una comunidad muy activa que comparte componentes que todo desarrollador podrá usar en sus proyectos.

¿Qué hace diferente a React JS de otras librerias?

Utiliza lenguaje JSX para construir la interfaz de usuario, por lo que si dominas HTML podras 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.

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.

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.

El isomorfismo (renderización HTML en servidor como en cliente)  de React JS 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 librerias 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. logo nodejs

 

Puedes descargarlo en este link.

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

Este 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 encuentrará en el Escritorio: cd C:\Users\nombreUsuario\Desktop\react. Donde nombreusuario es el nombrel 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-react

La 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 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 start

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

> El Resultado

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,vamos a ver cómo queda:

¡Ya tienes un Hola Mundo creado usando componentes de React JS!

¿Te gustaría profundizar mas y poder crear componentes complejos, entender el uso del estado de cada componente, crear manejadores de eventos para tus botones, implementar formularios, hacer peticiones a servicios, etc? Entonces te va a interesar este curso:

Curso-React-Js-Banner

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies