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

Nube Colectiva

hace 5 años

En esta página:

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

Parte 1
Parte 2
Parte 3
Parte 4 (Final)

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


/paginaweb
├── /node_modules
├── /public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── robots.txt
├── /src
    ├── /componentes
        ├── /contacto // Creo esta Carpeta
            ├── Contacto.js // Y adentro de la carpeta contacto Creo el Archivo 'Contacto.js' 
        ├── /footer 
            ├── Footer.js 
        ├── /home 
            ├── Home.js 
        ├── /menu 
            ├── Menu.js 
        ├── /nosotros 
            ├── Nosotros.js 
        ├── /servicios 
            ├── Servicios.js 
    ├── App.css
    ├── App.js 
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
├──  .gitignore
├──  package-lock.json
├──  package.json
├──  README.md

/paginaweb

├── /node_modules

├── /public

├── favicon.ico

├── index.html

├── logo192.png

├── logo512.png

├── manifest.json

├── robots.txt

├── /src

├── /componentes

├── /contacto // Creo esta Carpeta

├── Contacto.js // Y adentro de la carpeta contacto Creo el Archivo 'Contacto.js'

├── /footer

├── Footer.js

├── /home

├── Home.js

├── /menu

├── Menu.js

├── /nosotros

├── Nosotros.js

├── /servicios

├── Servicios.js

├── App.css

├── App.js

├── App.test.js

├── index.css

├── index.js

├── logo.svg

├── serviceWorker.js

├── .gitignore

├── package-lock.json

├── package.json

├── README.md

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


import React from 'react';

import Menu from '../menu/Menu';
import Formulario from './formulario/Formulario'; <span>// Este Componente lo crearé a continuación </span>
import Mapa from './mapa/Mapa'; <span>// Este Componente lo crearé a continuación </span>
import Footer from '../footer/Footer';


class Contacto extends React.Component {

	render() {

		return(

			<>

			<Menu />

			<main role="main" className="flex-shrink-0 mt-5">

				<div className="container">

					<h1 className="mb-5">Contacto</h1>

            		<div className="row">

            			<div className="col-md-6">
		        
							<Formulario /> <span>// Este Componente lo crearé a continuación </span>

						</div>

						<div className="col-md-6">
		        
							<Mapa /> <span>// Este Componente lo crearé a continuación </span>

						</div>

					</div>
				</div>	

	  		</main>

	  		<Footer />

	  		</>

		)

	}

}

export default Contacto;

import React from 'react';

import Menu from '../menu/Menu';

import Formulario from './formulario/Formulario'; <span>// Este Componente lo crearé a continuación </span>

import Mapa from './mapa/Mapa'; <span>// Este Componente lo crearé a continuación </span>

import Footer from '../footer/Footer';

class Contacto extends React.Component {

render() {

return(

<h1 className="mb-5">Contacto</h1>

<Formulario /> <span>// Este Componente lo crearé a continuación </span>

</div>

<Mapa /> <span>// Este Componente lo crearé a continuación </span>

</div>

</main>

</>

)

}

export default Contacto;

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


/paginaweb
├── /node_modules
├── /public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── robots.txt
├── /src
    ├── /componentes
        ├── /contacto 
            ├── /formulario // Creo esta Carpeta
                ├── Formulario.js // Y adentro de la carpeta formulario Creo el Archivo 'Formulario.js' 
            ├── Contacto.js  
        ├── /footer 
            ├── Footer.js 
        ├── /home 
            ├── Home.js 
        ├── /menu 
            ├── Menu.js 
        ├── /nosotros 
            ├── Nosotros.js 
        ├── /servicios 
            ├── Servicios.js 
    ├── App.css
    ├── App.js 
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
├──  .gitignore
├──  package-lock.json
├──  package.json
├──  README.md

/paginaweb

├── /node_modules

├── /public

├── favicon.ico

├── index.html

├── logo192.png

├── logo512.png

├── manifest.json

├── robots.txt

├── /src

├── /componentes

├── /contacto

├── /formulario // Creo esta Carpeta

├── Formulario.js // Y adentro de la carpeta formulario Creo el Archivo 'Formulario.js'

├── Contacto.js

├── /footer

├── Footer.js

├── /home

├── Home.js

├── /menu

├── Menu.js

├── /nosotros

├── Nosotros.js

├── /servicios

├── Servicios.js

├── App.css

├── App.js

├── App.test.js

├── index.css

├── index.js

├── logo.svg

├── serviceWorker.js

├── .gitignore

├── package-lock.json

├── package.json

├── README.md

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


import React from 'react';
import '../../../App.css';

class Formulario extends React.Component {

  render() {

    return (

        <form className="mb-5">

          <div className="form-group">
            <label htmlFor="nya" className="negrita">Nombres y Apellidos</label>
            <input type="text" className="form-control" id="nya" required />            
          </div>

          <div className="form-group">
            <label htmlFor="email" className="negrita">Email</label>
            <input type="email" className="form-control" id="email" required />
          </div>

          <div className="form-group">
            <label htmlFor="asunto" className="negrita">Asunto</label>
            <input type="text" className="form-control" id="asunto" required />
          </div>

          <div className="form-group">
            <label htmlFor="mensaje" className="negrita">Mensaje</label>
            <textarea className="form-control" id="mensaje" required></textarea>
          </div>

          <button type="submit" className="btn btn-primary">Enviar</button>

        </form>

    )
    
  }

}

export default Formulario;

import React from 'react';

import '../../../App.css';

class Formulario extends React.Component {

render() {

return (

<label htmlFor="nya" className="negrita">Nombres y Apellidos</label>

</div>

<label htmlFor="email" className="negrita">Email</label>

</div>

<label htmlFor="asunto" className="negrita">Asunto</label>

</div>

<label htmlFor="mensaje" className="negrita">Mensaje</label>

</div>

<button type="submit" className="btn btn-primary">Enviar</button>

</form>

)

}

export default 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


/paginaweb
├── /node_modules
├── /public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── robots.txt
├── /src
    ├── /componentes
        ├── /contacto 
            ├── /formulario 
                ├── Formulario.js 
            ├── /mapa // Creo esta Carpeta
                ├── Mapa.js // Y adentro de la carpeta mapa Creo el Archivo 'Mapa.js' 
            ├── Contacto.js 
        ├── /footer 
            ├── Footer.js 
        ├── /home 
            ├── Home.js 
        ├── /menu 
            ├── Menu.js 
        ├── /nosotros 
            ├── Nosotros.js 
        ├── /servicios 
            ├── Servicios.js 
    ├── App.css
    ├── App.js 
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
├──  .gitignore
├──  package-lock.json
├──  package.json
├──  README.md

/paginaweb

├── /node_modules

├── /public

├── favicon.ico

├── index.html

├── logo192.png

├── logo512.png

├── manifest.json

├── robots.txt

├── /src

├── /componentes

├── /contacto

├── /formulario

├── Formulario.js

├── /mapa // Creo esta Carpeta

├── Mapa.js // Y adentro de la carpeta mapa Creo el Archivo 'Mapa.js'

├── Contacto.js

├── /footer

├── Footer.js

├── /home

├── Home.js

├── /menu

├── Menu.js

├── /nosotros

├── Nosotros.js

├── /servicios

├── Servicios.js

├── App.css

├── App.js

├── App.test.js

├── index.css

├── index.js

├── logo.svg

├── serviceWorker.js

├── .gitignore

├── package-lock.json

├── package.json

├── README.md

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


import React from 'react';

class Mapa extends React.Component {

  render() {

    return (

        <div className="embed-responsive embed-responsive-4by3">
            <iframe className="embed-responsive-item" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d249744.03228368837!2d-77.12786525611014!3d-12.026267587650159!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c5f619ee3ec7%3A0x14206cb9cc452e4a!2sLima!5e0!3m2!1ses-419!2spe!4v1574809607076!5m2!1ses-419!2spe"></iframe>
        </div>

    )
    
  }

}

export default Mapa;

import React from 'react';

class Mapa extends React.Component {

render() {

return (

</div>

)

}

export default Mapa;

Si vuelvo a cargar mi página Contacto debería verse de la siguiente manera

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


npm install react-dom --save 

... 
... (Proceso de Instalación) 
...

npm install react-dom --save

...

... (Proceso de Instalación)

...

Luego instalo react-router-dom ejecutando el siguiente comando


npm install react-router-dom --save 

... 
... (Proceso de Instalación) 
...

npm install react-router-dom --save

...

... (Proceso de Instalación)

...

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


/paginaweb
├── /node_modules
├── /public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── robots.txt
├── /src
    ├── /componentes
        ├── /contacto 
            ├── Contacto.js 
        ├── /footer 
            ├── Footer.js 
        ├── /home 
            ├── Home.js 
        ├── /menu 
            ├── Menu.js 
        ├── /nosotros 
            ├── Nosotros.js 
        ├── /servicios 
            ├── Servicios.js 
    ├── App.css
    ├── App.js 
    ├── App.test.js
    ├── index.css
    ├── index.js // Abro este Archivo 
    ├── logo.svg
    ├── serviceWorker.js
├──  .gitignore
├──  package-lock.json
├──  package.json
├──  README.md

/paginaweb

├── /node_modules

├── /public

├── favicon.ico

├── index.html

├── logo192.png

├── logo512.png

├── manifest.json

├── robots.txt

├── /src

├── /componentes

├── /contacto

├── Contacto.js

├── /footer

├── Footer.js

├── /home

├── Home.js

├── /menu

├── Menu.js

├── /nosotros

├── Nosotros.js

├── /servicios

├── Servicios.js

├── App.css

├── App.js

├── App.test.js

├── index.css

├── index.js // Abro este Archivo

├── logo.svg

├── serviceWorker.js

├── .gitignore

├── package-lock.json

├── package.json

├── README.md

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


import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';

import ReactDOM from 'react-dom';

import { HashRouter as Router, Route, Switch } from 'react-router-dom';

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


import Home from './componentes/home/Home';
import Nosotros from './componentes/nosotros/Nosotros';
import Servicios from './componentes/servicios/Servicios';
import Contacto from './componentes/contacto/Contacto';

import Home from './componentes/home/Home';

import Nosotros from './componentes/nosotros/Nosotros';

import Servicios from './componentes/servicios/Servicios';

import Contacto from './componentes/contacto/Contacto';

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


ReactDOM.render(
    <Router>
	    <div>
	    	<Switch>

		        {/* Páginas */}
		        <Route exact path='/' component={Home} />
		        <Route path='/nosotros' component={Nosotros} />
		        <Route path='/servicios' component={Servicios} /> 
		        <Route path='/contacto' component={Contacto} /> 

	      	</Switch>
	    </div>
    </Router>,
  document.getElementById('root')
);

ReactDOM.render(

<div>

{/* Páginas */}

</Switch>

</div>

</Router>,

document.getElementById('root')

);

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


import React from 'react';
import ReactDOM from 'react-dom'; // Librería react-dom 
import { HashRouter as Router, Route, Switch } from 'react-router-dom'; // Librería react-router-dom
import './index.css';

import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';

// Páginas del Sitio Web
import Home from './componentes/home/Home'; 
import Nosotros from './componentes/nosotros/Nosotros';
import Servicios from './componentes/servicios/Servicios';
import Contacto from './componentes/contacto/Contacto';


// Configuración de la rutas del Sitio Web 
ReactDOM.render(
    <Router>
	    <div>
	    	<Switch>

		        {/* Páginas */}
		        <Route exact path='/' component={Home} />
		        <Route path='/nosotros' component={Nosotros} />
		        <Route path='/servicios' component={Servicios} /> 
		        <Route path='/contacto' component={Contacto} /> 

	      	</Switch>
	    </div>
    </Router>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

import ReactDOM from 'react-dom'; // Librería react-dom

import { HashRouter as Router, Route, Switch } from 'react-router-dom'; // Librería react-router-dom

import './index.css';

import * as serviceWorker from './serviceWorker';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import '../node_modules/bootstrap/dist/js/bootstrap.min.js';

// Páginas del Sitio Web

import Home from './componentes/home/Home';

import Nosotros from './componentes/nosotros/Nosotros';

import Servicios from './componentes/servicios/Servicios';

import Contacto from './componentes/contacto/Contacto';

// Configuración de la rutas del Sitio Web

ReactDOM.render(

<div>

{/* Páginas */}

</Switch>

</div>

</Router>,

document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

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”


"homepage": "https://nubecolectiva.com/proyecto/pagina_web_react_bootstrap4/", // Especifico la ruta del proyecto en el Servidor

"homepage": "https://nubecolectiva.com/proyecto/pagina_web_react_bootstrap4/", // Especifico la ruta del proyecto en el Servidor

Esta ruta la especifico en el archivo package.json


// Archivo package.json 

{
  "name": "paginaweb",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://nubecolectiva.com/proyecto/pagina_web_react_bootstrap4/", // Especifico la ruta del proyecto en el Servidor 
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

// Archivo package.json

{

"name": "paginaweb",

"version": "0.1.0",

"private": true,

"homepage": "https://nubecolectiva.com/proyecto/pagina_web_react_bootstrap4/", // Especifico la ruta del proyecto en el Servidor

"dependencies": {

"bootstrap": "^4.3.1",

"jquery": "^3.4.1",

"popper.js": "^1.15.0",

"react": "^16.9.0",

"react-dom": "^16.9.0",

"react-router": "^5.1.2",

"react-router-dom": "^5.1.2",

"react-scripts": "3.1.1"

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject"

"eslintConfig": {

"extends": "react-app"

"browserslist": {

"production": [

">0.2%",

"not dead",

"not op_mini all"

"development": [

"last 1 chrome version",

"last 1 firefox version",

"last 1 safari version"

]

}

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


npm run build

> paginaweb@0.1.0 build D:\xampp\htdocs\xampp\nc\tutoriales\paginaweb
> react-scripts build

Creating an optimized production build...
Compiled with warnings.

...
... ( Continua la Exportación )
...

npm run build

> paginaweb@0.1.0 build D:\xampp\htdocs\xampp\nc\tutoriales\paginaweb

> react-scripts build

Creating an optimized production build...

Compiled with warnings.

...

... ( Continua la Exportación )

...

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


/paginaweb
├── /build // Este directorio contiene los archivos que debes subir a tu Servidor 
├── /node_modules
├── /public
├── /src
├──  .gitignore
├──  package-lock.json
├──  package.json
├──  README.md

/paginaweb

├── /build // Este directorio contiene los archivos que debes subir a tu Servidor

├── /node_modules

├── /public

├── /src

├── .gitignore

├── package-lock.json

├── package.json

├── README.md

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.