Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 4 (Final)

Bootstrap React JS Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

Continuamos con el artículo anterior llamado Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 3 en donde creamos las páginas Nosotros y Servicios y a cada una de estas páginas les creamos sus respectivos Componentes, en esta 4 ta Parte y última vamos a crear la Página Contacto, asimismo configuraremos las rutas de la Página Web, vamos con el Post.

Partes

Primero comenzaré con la creación de la Página Contacto y luego configuraré las rutas de las Páginas del sitio Web.

Página Contacto

Para la página Contacto creo un nuevo directorio llamado contacto y adentro de ella creo un archivo llamado Contacto.js

Abro el archivo Contacto.js y agrego lo siguiente, puedes ver que llamo a 2 componentes, uno es Formulario y el otro es Mapa, estos componentes los creare más abajo

Bien ahora vamos a crear los Componentes de la página Contacto

Componente Formulario

Siempre es bueno mantener un orden, para este componente creo un directorio llamado formulario y dentro de este directorio creo un archivo llamado Formulario.js

Abro el archivo Formulario.js y agrego lo siguiente, creo un formulario HTML con elementos de formularios de Bootstrap 4, agrego 4 campos a mi formulario, estos son Nombres y Apellidos, Email, Asunto, Mensaje y un botón para Enviar el formulario

Si cargo mi página Contacto 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é mas abajo.

Con esto tenemos creado el formulario para la página Contacto

Componente Mapa

Para este componente insertaré un mapa simple de Google, creo un directorio llamado mapa y dentro de ella creo un archivo llamado Mapa.js

Abro el archivo Mapa.js y agrego lo siguiente, lo que hago es colocar un iframe con un mapa simple de Google

Si vuelvo a cargar mi página Contacto debería verse 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é mas abajo.

Con esto entonces tengo un Formulario y un Mapa en mi página Contacto, ahora pasaré a crear las rutas para las páginas del Sitio Web.

Rutas

Tengo 4 páginas en el Sitio Web, estas son Home, Nosotros, Servicios y Contacto, para navegar de manera reactiva por estas páginas en mi sitio Web voy a usar un par de liberas que son react-dom y react-router-dom

Voy a mi Consola de comandos e instalo primero react-dom ejecutando el siguiente comando

Luego instalo react-router-dom ejecutando el siguiente comando

Ahora para poder usar estas librerías que acabo de instalar las llamaré en el archivo index.js que se encuentra en src > index.js

Abro el archivo index.js  y llamo a las 2 librerías que acabo de instalar

En el mismo archivo index.js llamo a los componentes del sitio Web con las páginas Home, Nosotros, Servicios y Contacto

Por último configuro las rutas de la Página Web

A continuación todo el código completo del archivo index.js

Configuradas las rutas, se puede navegar por las páginas del Sitio Web de manera reactiva.

Exportar el Sitio Web

Una vez que terminamos el Sitio Web, necesitamos exportar el HTML para publicarlo en nuestro servidor, para exportar mi proyecto primero debemos especificar la ruta que tendrá mi proyecto en el servidor con el dato y valor “homepage”:”ruta”

Esta ruta la especifico en el archivo package.json

Luego voy a mi consola de comandos y ejecuto el siguiente comando

Una vez que termina el proceso de exportación del proyecto, se me ha creado un directorio llamado build en donde se encuentran lo archivos que debo subir a mi Servidor y publicarlo

Con esto tenemos nuestro proyecto Web terminado.

Conclusión

Mediante este tutorial puedes tener una idea de como crear una página Web, teniendo esta idea puedes crear proyectos Webs más complejos.

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
Subscribirse
Notificar a
guest
3 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
trackback
Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 2 | Blog Nube Colectiva
1 año atrás

[…] Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 4 (Final)26/11/2019 […]

trackback
Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 3 | Blog Nube Colectiva
1 año atrás

[…] Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 4 (Final)26/11/2019 […]

trackback
Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 1 | Blog Nube Colectiva
1 año atrás

[…] Como crear una Página Web con React 16.9 y Bootstrap 4 – Parte 4 (Final)26/11/2019 […]