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

Bootstrap React JS Tutoriales

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.

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 http://localhost:3000/ en el navegador y puedo ver que todo esta ok

La página o vista que hemos visto se ha creado en el archivo App.js, este archivo lo podemos encontrar en paginaweb >src > App.js

El archivo App.js lo puedo usar para la página Principal de mi Página Web, pero para mantener un orden crearé otro archivo llamado Home.js mas adelante de este tutorial

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.

Componentes

Voy a crear componentes para cada parte de mi Página Web, estos componentes lo 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 o parte de mi Página Web

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

Bien hasta aquí hemos creado el primer componente llamado Menú el cual va contener botones y opciones determinadas.

Para no hacer muy extenso el tutorial y tengas un correcto aprendizaje, continuaremos con una Parte 2 en donde terminaremos de crear los demás elementos  de la Página Web en donde te mostrare una Demo y compartiré un repositorio GitHub con el código de este Proyecto.

Notas

  • 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