Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 2

6 minuto(s)

Demo

En este capitulo Nro 2 vamos a continuar con el capitulo anterior llamado Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 1 en donde creamos y desplegamos los elementos esenciales para que nuestra Página Web funcione correctamente en React JS, en este capitulo vamos a crear los componentes de la Página Home del Sitio Web, vamos con esta 2da Parte.

Partes

Como ya creamos el Menú y el Footer en la Parte 1 de este tutorial, ahora vamos a crear la primera Página del Sitio Web, esta Página será el Home o Página Principal.

Página Home

Para la página Principal de mi Sitio Web creo una carpeta llamada home y dentro de ella creo un archivo llamado Home.js


Abro el archivo Home.js que acabo de crear y agrego lo siguiente


Puedes ver que estoy importando los componentes Menú y Footer los cuales he creado en la Parte 1 de este Tutorial.

También estoy importando los componentes Slider y Servicios, estos 2 componentes los voy a crear a continuación y serán el contenido de la página Home


Componente Slider 

Empezare creando el componente Slider, para mantener un orden voy a la carpeta home y dentro de ella creo un nuevo directorio llamado slider y dentro de este creo el archivo Slider.js


Abro el archivo Slider.js y agrego el siguiente codigo para mostrar un Carrusel de Bootstrap 4 que tendrá 3 elementos cada uno con un botón para Leer más acerca de dicho elemento


Bien ahora mi Sitio Web se debería de ver de la siguiente manera

Nota: Si estas siguiendo este tutorial paso a paso, tú aun no puedes ver el Sitio Web en tu Navegador, ya que aún falta configurar el archivo index.js en donde importaré todos los componentes y las rutas del Sitio Web. Este archivo lo configuraré al final.

Componente Servicios 

Igualmente para mantener el orden voy a crear un directorio llamado servicios, dentro de este creo un archivo llamado Servicios.js


Abro el archivo Servicios.js y dentro de este componente voy a colocar 3 columnas con los servicios Servicio 1, Servicio 2 y Servicio 3


Bien ahora debajo del Slider de mi sitio Web se debería de ver el componente Servicios que acabo de crear, el cual muestra 3 servicios: Servicio 1, Servicio 2 y Servicio 3.

Nota: Si estas siguiendo este tutorial paso a paso, tú aun no puedes ver el Sitio Web en tu Navegador, ya que aún falta configurar el archivo index.js en donde importaré todos los componentes y las rutas del Sitio Web. Este archivo lo configuraré al final.

Vista Final (Home)

Mi Página Principal o Home se debe ver de la siguiente manera:

Nota: Si estas siguiendo este tutorial paso a paso, tú aun no puedes ver el Sitio Web en tu Navegador, ya que aún falta configurar el archivo index.js en donde importaré todos los componentes y las rutas del Sitio Web. Este archivo lo configuraré al final.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • Los Pasos y opciones mencionadas en este capitulo del tutorial pueden cambiar, esto no depende de nosotros, si no de las empresas que dan soporte a estas herramientas como React y Bootstrap, que suelen cambiar sus opciones de despliegue y configuración en futuras versiones.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.