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

7 minuto(s)

Demo

El Framework React nos permite crear interfaces visuales dinámicas y veloces que pueden lograr generar una buena experiencia en el usuario que visita tu proyecto, React esta entre los Frameworks más estables y usados por todo el potencial que consigo trae, podemos crear aplicaciones más avanzadas, pero podemos iniciar creando la base de una Página Web netamente con React y Bootstrap que es lo que te enseñare en este tutorial, vamos con ello.

Partes

Para que este familiarizado con este tutorial te recomiendo leer los siguientes artículos:

Si ya conoces sobre React y Bootstrap, no hay problema, puedes continuar con el tutorial.

React nos permite mantener ordenado nuestro proyecto mediante módulos independientes y luego unirlos en una sola vista principal.

Para poder ejecutar comandos en React, necesitas tener instalado Node JS el cual nos permite realizar instalaciones de paquetes NPM y otras tareas desde una consola de comandos.

Si no tienes instalado Node JS te recomiendo leer este artículo Que es y Como instalar Node JS, luego de instalar Node JS en tu Computadora, ya podrás ejecutar comandos en React, mediante una consola de comandos.

Si necesitas una consola de comandos te recomiendo usar la consola de Git llamada Git Bash, en el artículo Que es Git, como utilizarlo y otros detalles te explico como instalarla y usarla, entre otros detalles.

Creación de un Nuevo Proyecto

Voy a crear un nuevo proyecto en mi consola de comandos ejecutando el siguiente comando


Se ha creado un nuevo directorio llamando paginaweb y en su interior un conjunto de archivos necesario para que funcione React y mi proyecto.

Paso seguido ingresaré al nuevo directorio para realizar tareas en el, como correr el servidor con el comando npm start y poder ver los cambios que voy haciendo conforme avanzo mi proyecto o Página Web.


Para verificar la correcta creación del proyecto y que este funcionando el servidor, abrimos el servidor que React nos brinda en la URL local https://localhost:3000/ en el navegador y puedo ver que todo esta ok

La página de la imagen anterior se ha creado en el archivo App.js, este archivo lo podemos encontrar en paginaweb >src > App.js


El archivo App.js no lo usaré ya que creare otros archivos para las páginas de mi Sitio Web.

Desplegando Bootstrap 4

Para poder utilizar Bootstrap en React debemos de instalarlo, voy a mi consola de comandos y ejecuto el siguiente comando


Listo ya tengo Bootstrap 4 instalado en mi proyecto React por ende ya puedo usar los elementos de Bootstrap para usarlos en la creación de mi Página Web. A mi me instalo la versión 4.3.1 de Bootstrap, la cual es la ultima versión, al menos lo es hasta la fecha de este tutorial.

Ahora para que Bootstrap funcione correctamente es necesario instalar jQuery, ejecuto el siguiente comando


Y también necesitamos instalar la librería Popper JS, ejecutamos el siguiente comando en la consola de comandos para instalarla


Ahora voy a instanciar el archivo CSS y Javascript de Bootstrap 4 para poder usarlos en mi Página Web, esto lo haré en el archivo index.js, este archivo se encuentra en src > index.js


Abro el archivo index.js e importo el archivo CSS y Javascript de Bootstrap 4


Ahora estoy listo para empezar a crear mi Página Web sin problemas.

Componentes Menú y Footer

Voy a crear 2 componentes que usare en todas las páginas del Sitio Web, estos componentes los podre reutilizar cuando lo desee, eso es lo genial de React.

Creo una nueva carpeta con el nombre componentes en la cual voy a colocar todos mis componentes que conforman mi Página Web


A continuación creare los componentes esenciales de mi Página Web el Menú y el Footer

Menú

En la carpeta componentes que he creado mas arriba colocare una nueva carpeta llamada menu y dentro de esta carpeta crearé un nuevo archivo para mi componente, a este archivo lo llamaré Menu.js


En el archivo Menu.js va ir el menú de Navegación de Bootstrap 4, dentro de este componente tengo el método return() en este método voy a colocar el menú de Navegación de Bootstrap 4


Agrego el siguiente código en donde coloco 4 enlaces de navegación que son Home, Nosotros, Servicios y Contacto. Mi menú haré que se quede fijo en la parte superior, para esto Bootstrap cuenta con una clase nativa llamada fixed-top que me permite hacer esto


Con esto ya tengo creado el menú, con Bootstrap es rápido crear el componente de navegación <nav></nav>, entonces en el navegador se debería ver el menú 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.

Footer

Este componente va al final de cada Página de mi Sitio Web, creo un directorio llamado footer y dentro de este creo un archivo llamado Footer.js


Abro el archivo Footer.js y agrego el siguiente código


En el código de mi componente Footer estoy usando {(new Date().getFullYear())} para mostrar el año actual del calendario y he agregado otros detalles más.

Si voy hacia abajo de la Página debería de ver el Footer que acabo de crear

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.

Bien hasta aquí hemos creado los componentes Menú y Footer, así mismo he desplegado el entorno inicial para poder crear la Página Web con React JS.

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.