por Contenidos
Crear una interfaz front-end puede ser difícil si eres 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 impresionantes interfaces de front-end rápidamente, 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
Comience creando una aplicación ReactJS en una carpeta de su computadora. Alternativamente, puede seguir la guía oficial de React sobre cómo crear una nueva aplicación.
Descargar una plantilla de Bootstrap
Descarga una plantilla de tu elección desde el sitio web Start Bootstrap Themes u otra 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.
Agregue la plantilla de Bootstrap a su aplicación ReactJS
Luego, copie el contenido de la carpeta descargada en la carpeta nombrada público en su aplicación React. Notará que ahora tiene dos archivos index.html. Copie el contenido de Bootstrap índice.html archivos en la aplicación React índice.html expediente.
Ver plantilla de arranque
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:
npm start
Debería ver la plantilla en su navegador, como ilustra la siguiente imagen.
Integre el tema Bootstrap en los componentes de su aplicación
Para integrar la plantilla de Bootstrap en su 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 su 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 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 ser así:
import React from 'react'const Header = () => {
return (
<div>
<header className="masthead">
<div className="container">
<div className="masthead-subheading">Welcome To Our Studio!</div>
<div className="masthead-heading text-uppercase">
It's Nice To Meet You
</div>
<a className="btn btn-primary btn-xl text-uppercase" href="#services">
Tell Me More
</a>
</div>
</header>
</div>
);
};
export default Header
A continuación, cambie la sintaxis del HTML en los componentes a JSX. Para hacerlo 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 se abre para cambiar HTML a JSX.
JSX es una extensión de sintaxis de JavaScript. Le permite usar una combinación de HTML y JavaScript para escribir código en componentes. Una vez que todas las secciones se copian en los componentes, el archivo index.html se deja solo con los enlaces y las secuencias de comandos de estilo.
Se verá así:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<link href="%PUBLIC_URL%/css/styles.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="%PUBLIC_URL%/js/scripts.js"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>
Crear rutas para componentes
Ahora que tiene los enlaces, los scripts y los componentes en su aplicación, debe crear rutas para ellos en su archivo App.js. Las rutas renderizarán páginas en la aplicación para hacerla dinámica.
Para representar las páginas, instale react-router-dom con el siguiente comando:
npm install react-router-dom
En el Aplicación.js archivo, importe BrowserRouter como enrutador, ruta y ruta desde la biblioteca react-router-dom. Luego importa todos los archivos componentes Y Paginas. El archivo debería verse así:
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from './components/Navigation';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact'
import Header from "./components/Header";function App() {
return (
<div className="App">
<Header />
<Home />
<About />
<Contact/>
<Router>
<Navigation>
<Routes>
<Route exact path="https://www.makeuseof.com/" element={<Home />} />
<Route exact path="/about" element={<About />} />
<Route exact path="/contact" element={<Contact />} />
</Routes>
</Navigation>
</Router>
</div>
);
}
export default App;
Debería ver las páginas representadas en el host local cuando navegue en el navegador. Similar al modelo descargado, como se muestra a continuación.
Felicitaciones, ha integrado con éxito un tema de Bootstrap en su aplicación React. Ahora puedes personalizar las páginas según tus preferencias.
¿Por qué usar plantillas de temas de Bootstrap?
Las plantillas de Bootstrap ayudan a crear impresionantes 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 tienen licencia MIT y son los últimos diseños en la industria.
Si bien los beneficios son muchos, depender de plantillas reduce la creatividad. Es común encontrar un tema popular que se utiliza 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.
