En este artículo, aprenderemos cómo crear nuestro propio tema de arranque de reacción en un sitio web Themestr.app y agregarlo a nuestro proyecto de reacción.
Características:
- No es necesario pensar en la capacidad de respuesta.
- Una amplia gama de opciones de color está disponible para elegir.
- Muy fácil de trabajar e integrar en el proyecto.
Requisito previo:
Creando la aplicación React e instalando Bootstrap:
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app project
Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.
cd project
Paso 3: ahora instale react-bootstrap en su directorio de trabajo, es decir, proyecto
npm install react-bootstrap bootstrap
Siga los pasos para crear su propio tema de arranque:
Paso 1: Siga el enlace al sitio web: https://themestr.app/ y haga clic en el botón Comenzar aquí en el sitio web.
Paso 2: después de eso, se abrirá una página con el título UI Kit Builder y en esta página debe elegir la paleta de colores para su tema y luego de seleccionar, haga clic en el botón siguiente .
Paso 3: Ahora en esta página tenemos que seleccionar una fuente para nuestro tema y después de seleccionar hacemos clic en siguiente.
Paso 4 : Ahora tenemos opciones para elegir el estilo, después de elegirlo para pasar al siguiente .
Paso 5: Por último elegiremos iconos y después de elegir iconos hacemos clic en el botón de vista previa .
Paso 6: En este paso, podemos cambiar los colores, cambiar el tamaño de fuente, podemos deshabilitar o habilitar las propiedades de los elementos y mucho más.
Paso 7: después de personalizar, desplácese al final del sitio web y descargue el archivo CSS
Agregue el archivo descargado a su directorio de proyectos y luego impórtelo en su App.js.
Ejemplo: En este ejemplo, hemos personalizado un tema básico con Paleta de colores llamado Bootstrap 5 (predeterminado) y luego elegimos la fuente Bungee Shade , mantuvimos más opciones en el valor predeterminado, seleccionamos el primer conjunto de íconos, luego hacemos clic en vista previa, esto muestra todo los componentes que ha seleccionado se pueden personalizar aún más en esta página como el cambio de colores. Hemos optado por los siguientes colores:
Principal como #53565A, Secundario: #3DF5D6, Correcto #19AE32, Peligro #862831, Información #09076E, Advertencia #FFC629, Luz #CFE3F7, Oscura #21084F
Estructura de archivo inicial
Agregue el archivo CSS descargado al directorio del proyecto en la carpeta src y cámbiele el nombre, estamos renombrándolo como theme.css.
Después de agregar theme.css
En el archivo App.js estamos importando el componente del botón desde react-bootstrap. Estamos creando siete botones con variantes como secundario, éxito, advertencia, peligro, información, claro, oscuro que mostrarán los colores que hemos elegido para el tema que hemos creado.
Aplicación.js
Javascript
import './theme.css';
// Importing from react-bootstrap
import { Button } from 'react-bootstrap'
function App() {
return (
<div className="App">
<header>
<h1>Colors According the customize theme</h1>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="danger">Danger</Button>
<Button variant="info">Info</Button>
<Button variant="light">Light</Button>
<Button variant="dark">Dark</Button>
</header>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
