Crear una web usando React.js

Tiempo de lectura: 4 minutos

Antes de empezar, es importante entender qué es React.js. React.js es una biblioteca de JavaScript utilizada para construir interfaces de usuario. Es ampliamente utilizado para construir aplicaciones de una sola página (SPA) y aplicaciones web escalables.

En este tutorial, crearemos una página de inicio para un sitio web de viajes utilizando React.js en WordPress. Empezaremos desde cero, y crearemos diferentes componentes que se utilizarán para construir la página.

1. Preparación del entorno de trabajo

Antes de empezar, necesitamos asegurarnos de tener nuestro entorno de trabajo correctamente configurado. Para empezar, necesitamos instalar Node.js en nuestro ordenador. Node.js es un entorno de tiempo de ejecución de JavaScript que nos permitirá trabajar con React.js.

Después de instalar Node.js, abrimos la terminal y navegamos hasta nuestro directorio de trabajo. A continuación, ejecutamos el siguiente comando para crear una nueva aplicación de React.js:

npx create-react-app travel-website

Este comando creará una nueva aplicación de React.js en una carpeta llamada «travel-website». Cuando se complete la instalación, navegamos a la carpeta utilizando el siguiente comando:

cd travel-website

2. Estructura de los componentes

Antes de empezar a escribir código, es importante planificar cómo se estructurarán los componentes en nuestra aplicación. Para nuestra página de inicio de viajes, podemos dividir la página en diferentes secciones:

• Barra de navegación
• Cabecera
• Sección de ofertas destacadas
• Sección de categorías de viajes
• Sección de opiniones de clientes
• Pie de página

Cada una de estas secciones será un componente diferente. Para empezar, crearemos una carpeta llamada «components» en nuestra aplicación de React.js. Dentro de esta carpeta, crearemos una carpeta para cada componente que necesitemos.

3. Creación de los componentes

Ahora que hemos planificado cómo se estructurarán los componentes, podemos empezar a crearlos. Empezaremos con el componente de la barra de navegación.

Dentro de la carpeta «components», crearemos una nueva carpeta llamada «Navbar». Dentro de esta carpeta, crearemos un archivo llamado «Navbar.js». Este archivo contendrá el código para el componente de la barra de navegación.

Para empezar, importamos React y creamos un componente de clase llamado «Navbar»:

import React, { Component } from 'react';

class Navbar extends Component {
  render() {
    return (
      <nav>
        <ul>
          <li>Inicio</li>
          <li>Destinos</li>
          <li>Ofertas</li>
          <li>Contacto</li>
        </ul>
      </nav>
    );
  }
}

export default Navbar;

En este código, creamos una barra de navegación simple con cuatro opciones de menú.

Después de crear el componente de la barra de navegación, podemos crear el componente de la cabecera. Dentro de la carpeta «components», creamos una nueva carpeta llamada «Header». Dentro de esta carpeta, creamos un archivo llamado «Header.js».

Para empezar, importamos React y creamos un componente de clase llamado «Header»:

3. Creación del componente «Header»

Para empezar, importamos React y creamos un componente de clase llamado «Header»:

import React, { Component } from "react";

class Header extends Component {
  render() {
    return (
      <header>
        <h1>¡Bienvenidos al sitio web de viajes!</h1>
        <p>Encuentra las mejores ofertas para tus próximas vacaciones.</p>
      </header>
    );
  }
}

export default Header;

En este código, creamos una cabecera simple con un título y una descripción.

4. Creación de más componentes

Después de crear la barra de navegación y la cabecera, podemos continuar con la creación de más componentes. En este caso, crearemos un componente para mostrar una imagen y otro para mostrar una lista de ofertas de viaje.

4.1. Componente «Image»

Para crear el componente «Image», podemos crear una nueva carpeta dentro de «src» llamada «components» y dentro de ella crear un archivo llamado «Image.js».

import React, { Component } from "react";

class Image extends Component {
  render() {
    return (
      <div className="image">
        <img
          src="https://via.placeholder.com/800x400.png?text=Imagen+de+viaje"
          alt="Imagen de viaje"
        />
      </div>
    );
  }
}

export default Image;

En este código, creamos un componente que muestra una imagen de viaje.

4.2. Componente «TravelOfferList»

Para crear el componente «TravelOfferList», podemos crear otro archivo dentro de la carpeta «components» llamado «TravelOfferList.js».

import React, { Component } from "react";

class TravelOfferList extends Component {
  render() {
    return (
      <div className="travel-offer-list">
        <h2>Ofertas de viaje</h2>
        <ul>
          <li>
            <h3>Oferta 1</h3>
            <p>Descripción de la oferta 1.</p>
            <button>Ver más</button>
          </li>
          <li>
            <h3>Oferta 2</h3>
            <p>Descripción de la oferta 2.</p>
            <button>Ver más</button>
          </li>
          <li>
            <h3>Oferta 3</h3>
            <p>Descripción de la oferta 3.</p>
            <button>Ver más</button>
          </li>
        </ul>
      </div>
    );
  }
}

export default TravelOfferList;

En este código, creamos un componente que muestra una lista de ofertas de viaje con un título, una descripción y un botón para ver más detalles.

5. Composición de componentes

Una vez que tenemos los componentes individuales, podemos componerlos para crear la página principal. Para hacerlo, creamos un nuevo archivo dentro de la carpeta «src» llamado «App.js».

import React, { Component } from "react";
import "./App.css";
import Header from "./components/Header";
import NavigationBar from "./components/NavigationBar";
import Image from "./components/Image";
import TravelOfferList from "./components/TravelOfferList";

class App extends Component {
  render() {
    return (
      <div className="App">
        <NavigationBar />
        <Header />
        <Image />
        <TravelOfferList />
      </div>
    );
  }
}

export default App;

En este código, importamos los componentes creados anteriormente y los usamos para componer la página principal.

6. Estilización de componentes

Para darle estilo a los componentes, podemos crear un archivo de hojas de estilo en cascada (CSS) llamado «App.css» dentro de la carpeta «src». Podemos darle estilo a cada componente usando clases CSS. Por ejemplo, podemos darle estilo a la barra de navegación de la siguiente manera:

.navigation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #4a4a4a;
  padding: 10px;
  color: white;
}

.navigation-bar a {
  color: white;
  text-decoration: none;
}

.navigation-bar a:hover {
  color: #f1c40f;
}

En este código, estamos dando estilo a la barra de navegación. La propiedad «display» con el valor «flex» nos permite alinear los elementos horizontalmente. La propiedad «justify-content» con el valor «space-between» nos permite separar los elementos de manera equitativa. La propiedad «align-items» nos permite alinear verticalmente los elementos. También le estamos dando un color de fondo, un relleno, un color de texto y un estilo de texto a los enlaces.

Podemos darle estilo a los demás componentes de manera similar.

7. Conclusión

En este tutorial, hemos aprendido cómo crear una web con React.js. Hemos visto cómo crear componentes, componerlos para crear la página principal y darle estilo a los componentes usando hojas de estilo en cascada. Con React.js, podemos crear páginas web dinámicas y reutilizables con facilidad.