Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Crear una interfaz front-end puede ser un desafío si es nuevo en ReactJS. El marco Bootstrap, junto con sus plantillas, lo hace más fácil y rápido.

Bootstrap tiene plantillas temáticas que cualquiera puede personalizar y publicar de forma gratuita. Puede elegir entre muchas plantillas antes de descargarlas y usarlas en su aplicación.

Las plantillas lo ayudan a crear rápidamente interfaces de usuario notables, lo que le da más tiempo para concentrarse en funciones complejas. Puede obtener información sobre las plantillas de Bootstrap integrando una con una aplicación ReactJS.

Crea tu aplicación React

Comienza por creando una aplicación ReactJS en una carpeta en su máquina. Alternativamente, puede seguir el oficial guía de reacción en la creación de una nueva aplicación.

Descargar una plantilla de Bootstrap

Descargue una plantilla de su elección de la

instagram viewer
Iniciar Bootstrap web de temas u otro de tu preferencia. Hay varios sitios con plantillas gratuitas de Bootstrap en línea.

Para esta guía, descargue el tema de Bootstrap denominado Agency.

Una vez descargado, descomprima el archivo de la carpeta para ver su contenido. Notará que tiene carpetas llamadas assets, CSS, JS y un archivo llamado index.html.

Agregar plantilla de Bootstrap a la aplicación ReactJS

A continuación, copie el contenido de la carpeta descargada en la carpeta denominada público en su aplicación React. Notará que ahora tiene dos archivos index.html. Copie el contenido de Bootstrap índice.html archivo en la aplicación React índice.html archivo.

Muestra la plantilla de Bootstrap

Después de agregar Bootstrap HTML al index.html de la aplicación, ejecute la aplicación para ver si la integración fue exitosa. Usa el siguiente comando:

inicio de npm

Debería ver la plantilla en su navegador, como ilustra la siguiente imagen.

Integre el tema Bootstrap en los componentes de la aplicación

Para integrar la plantilla de Bootstrap en la aplicación React, debe copiar las secciones HTML de index.html a cada componente. Los componentes le permiten escribir código para diferentes partes de la aplicación y reutilizarlos. Esto reduce la repetición y también organiza la estructura de su aplicación.

El archivo index.html ahora tiene diferentes secciones Navegación, Acerca de nosotros, Contacto y Pie de página. En la carpeta src, cree dos carpetas, componentes y páginas. Divida las secciones en las carpetas que se muestran a continuación:

Los componentes deben incluir lo siguiente:

  • Header.jsx: la sección de cabecera.
  • Navigation.jsx: la barra de navegación y el pie de página.

La carpeta de las páginas tendrá lo siguiente:

  • AboutUs.jsx: Información sobre nosotros.
  • Home.jsx: secciones Servicios, Portafolio, Clientes y Equipo.
  • Contactos.jsx: Información de contacto.

Copie el HTML de cada sección del archivo index.html y agréguelo a cada componente. La sintaxis debería verse así:

importar Reaccionar de'reaccionar'
constante Encabezado = () => {
devolver (




"tope">
"envase">
"subtítulo de cabecera">¡Bienvenidos a Nuestro Estudio!</div>









"texto de cabecera-encabezado-mayúsculas">
 ÉlEs un placer conocerte
 </div>



"btn btn-principal btn-xl texto en mayúsculas" href="#servicios">
 Dime más
 </a>
 </div>
 </header>
 </div>
 );
};


exportarpor defecto Encabezamiento

Luego, cambie la sintaxis del HTML en los componentes a JSX. Para hacer esto automáticamente en el editor de Vscode, haga clic en Ctrl + Mayús + P. Haga clic en la opción HTML a JSX en la ventana que aparece, para cambiar el HTML a JSX.

JSX es una extensión de sintaxis para JavaScript. Le permite usar una mezcla de HTML y JavaScript para escribir código en componentes. Una vez que copie todas las secciones a los componentes, el archivo index.html permanece solo con los enlaces de estilo y las secuencias de comandos.

Se verá así:

html>
<htmlidioma="es">


<cabeza>
<metajuego de caracteres="utf-8" />
<enlacereal="icono"href="%PUBLIC_URL%/favicon.ico" />
<metanombre="ventana de visualización"contenido="ancho = ancho del dispositivo, escala inicial = 1" />
<metanombre="color del tema"contenido="#000000" />
<metanombre="descripción"contenido="Sitio web creado usando create-react-app"/>
<enlacereal="icono-toque-manzana"href="%PUBLIC_URL%/logo192.png" />
<enlacereal="manifiesto"href="%PUBLIC_URL%/manifest.json" />
<título>Reaccionar aplicacióntítulo>
<enlacereal="icono"tipo="imagen/icono x"href="activos/favicon.ico" />


 Iconos de Font Awesome (versión gratuita)
<guionorigen=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"origen cruzado="anónimo">guion>


 Fuentes de Google
<enlacehref=" https://fonts.googleapis.com/css? familia=Montserrat: 400.700"real="hoja de estilo"tipo="texto/css" />
<enlacehref=" https://fonts.googleapis.com/css? familia=Roboto+Losa: 400,100,300,700"real="hoja de estilo"tipo="texto/css" />


 CSS del tema central (incluye Bootstrap)
<enlacehref="%PUBLIC_URL%/css/estilos.css"real="hoja de estilo" />
cabeza>


<cuerpo>
<sin guion>Debe habilitar JavaScript para ejecutar esta aplicación.sin guion>


<divisiónidentificación="raíz">división>


 Núcleo de Bootstrap JS
<guionorigen=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">guion>


 Tema central JS
<guionorigen="%PUBLIC_URL%/js/scripts.js">guion>


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


 * * Formularios SB JS * *


 * * Activa tu formulario en https://startbootstrap.com/solution/contact-forms * *


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


<guionorigen=" https://cdn.startbootstrap.com/sb-forms-latest.js">guion>
cuerpo>
html>

Crear rutas para componentes

Ahora que tiene los enlaces, scripts y componentes en la aplicación, debe crear rutas para ellos en el archivo App.js. Las rutas renderizarán las páginas en la aplicación para hacerla dinámica.

Para representar las páginas, instale react-router-dom con el siguiente comando:

npm instalar reaccionar-enrutador-dom

En el Aplicación.js archivo, importe BrowserRouter como un enrutador, rutas y ruta desde el biblioteca reaccionar-router-dom. A continuación, importe todos los componentes y Paginas. El archivo debería verse así:

importar { NavegadorRouter como Enrutador, Rutas, Ruta } de"reaccionar-router-dom";
importar Navegación de'./componentes/Navegación';
importar Hogar de'./Páginas/Inicio';
importar Acerca de de'./Páginas/Acerca de';
importar Contacto de'./Páginas/Contacto'
importar Encabezamiento de"./componentes/Encabezado";
funciónaplicación() {
devolver (


"Aplicación">










"/" elemento={} />
"/acerca de" elemento={} />
"/contacto" elemento={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


exportarpor defecto aplicación;

Debería ver las páginas representadas en el host local cuando navega por el navegador. Similar a la plantilla que descargó, como se ilustra a continuación.

Felicitaciones, ha integrado con éxito un tema de Bootstrap en su aplicación React. Ahora puede personalizar las páginas según sus preferencias.

¿Por qué usar las plantillas temáticas de Bootstrap?

Las plantillas de Bootstrap ayudan a crear notables interfaces de usuario en muy poco tiempo. Hay muchos temas para elegir. Todos los temas son de la última versión de Bootstrap. También vienen con licencias MIT y son los últimos diseños de la industria.

Si bien las ventajas son muchas, depender de plantillas reduce la creatividad. Es común encontrar un tema popular utilizado en otros sitios en línea. Sin embargo, puede personalizar una plantilla con un diseño único.

Ahora puede integrar una plantilla de Bootstrap con su aplicación React. Comience a crear con plantillas de Bootstrap y disfrute de hermosas interfaces de usuario.