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

Bootstrap React JS Tutoriales

Demo

Continuamos con el artículo anterior llamado Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 2 en donde creamos el componente Home para la página Principal que contiene los componentes Slider y Servicios, en esta Parte 3 vamos a crear la página Nosotros y Servicios entre otros detalles, vamos con este Post.

Partes

Vamos a crear la siguiente Página Nosotros, para esta página y las demás voy a usar el componente Menu y Footer que he creado en la Parte 1 de este tutorial, es decir estos 2 componentes se repiten en todas las páginas del Sitio Web.

Página Nosotros

Para esta página voy a crear un nuevo directorio llamado nosotros y dentro de este directorio creo un archivo llamado Nosotros.js

Abro el archivo llamado Nosotros.js y agrego lo siguiente

Estoy importando el componente Menú y Footer los cuales he creado en la Parte 1 de este Tutorial, asimismo estoy importando el componente Jumbotron y Footer los cuales crearé a continuación

Componente Jumbotron

Para mantener un orden crearé un directorio llamado jumbotron y dentro de este creo un archivo llamado Jumbotron.js

Abro el archivo que he creado llamado Jumbotron.js y agrego el elemento Jumbotron de Bootstrap 4 en donde muestro un encabezado h1 con un texto y debajo un botón

Entonces mi página Nosotros se debe  ver así

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 Detalles

Debajo de mi componente Jumbotron voy a colocar otro componente llamado Detalles, para esto creo un directorio llamado detalles y dentro de este directorio creo un archivo con el nombre Detalles.js

Abro mi archivo Detalles.js y agrego lo siguiente

En mi componente Detalles he agregado 3 columnas en donde aparecerán el Objetivo, Misión y Visión.

Entonces ahora mi Página Nosotros se debe 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.

Con esto tengo terminada la página Nosotros.

Página Servicios

Ahora voy a crear el contenido de mi página Servicios, para esto creo un directorio llamado servicios y dentro de este creo un archivo llamado Servicios.js

Abro mi archivo Servicios.js y agrego lo siguiente

He agregado un un encabezado h1 con una descripción y debajo varios elementos de tipo Card de Bootstrap 4 en donde muestro los servicios.

La página Servicios entonces se ve 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. 

En la imagen puedes ver que el Footer esta más abajo, solo que la página Servicios es bien amplia y el Footer no encajo en la captura de Pantalla.

Bien con esto ya tengo lista las Páginas Nosotros y Servicios.

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.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required