React es una biblioteca de JavaScript para crear interfaces de usuario (UI) y aplicaciones de una sola página. Su popularidad en la comunidad de desarrollo se debe principalmente a su flexibilidad para crear interfaces de usuario con componentes reutilizables. Esto ha llevado a muchos desarrolladores a adoptar esta biblioteca como un marco frontal para sus pilas tecnológicas.
Sin embargo, escribir estilos de hojas de estilo en cascada (CSS) para estos componentes es extremadamente difícil. CSS es un lenguaje muy técnico y, a menudo, implica muchos procesos tediosos que requieren tiempo de desarrollo. Por ejemplo, definir estilos CSS que incluyan componentes globales puede provocar errores que requieran que vuelva a escribir el mismo CSS varias veces en diferentes lugares de la hoja de estilo.
Afortunadamente, existen herramientas y bibliotecas como Bootstrap CSS que hacen que CSS sea mucho más fácil de usar. Bootstrap es una plataforma CSS gratuita y de código abierto para crear sitios web teniendo en cuenta los dispositivos móviles. Es una biblioteca de interfaz de usuario completamente integrada que ofrece estilos CSS predefinidos y otros elementos de interfaz de usuario para ayudar a los desarrolladores a personalizar rápidamente sus sitios web sin tener que empezar desde cero.
Puede combinar fácilmente Bootstrap con muchas otras tecnologías front-end, incluido React. Si bien React ayuda a crear funcionalidad, Bootstrap simplifica la definición y el mantenimiento de formularios.
Este tutorial le muestra cómo agregar Bootstrap a su proyecto React y aprovechar al máximo su estilo CSS.
Usando Bootstrap con React
En este proyecto, usará React para construir un componente de contador simple. Luego agregará CSS Bootstrap al proyecto para personalizar la interfaz de usuario del front-end.
Para completar este tutorial necesitarás:
1. Configure la ip de la aplicación React.
Para crear una aplicación React, abra una terminal Node.js y ejecute el siguiente comando:
npx crear-reaccionar-aplicación
sustituto
Después de ejecutar con éxito el comando, debería ver el siguiente mensaje en la terminal:
Ahora navegue al directorio de su aplicación React y ejecute la aplicación localmente.
Vuelve a la terminal de Node.js y ejecuta los siguientes comandos:
continuado
por ejemplo, empezar
Esto iniciará el servidor de desarrollo donde puede obtener una vista previa de su sitio. Ahora se puede ver en http://localhost:3000 en un navegador web. El resultado debería verse así:
2. Agregue Bootstrap a su proyecto React.
Con su aplicación React en ejecución, puede agregar Bootstrap como un marco CSS.
Esto se puede hacer de varias maneras. Sin embargo, la opción más conveniente es habilitarlo como una dependencia en su aplicación React instalándolo paquete bootstrap npm.
Primero, navegue a la raíz de su aplicación React en la terminal Node.js y ejecute el siguiente comando:
npm instalar arranque
O, si está usando hilo, use esto en su lugar:
hilo agrega bootstrap
Estos comandos instalarán la última versión de Bootstrap en su aplicación React.
Luego agregue la siguiente línea en la parte superior del archivo ./src/index.js archivo.
importar «bootstrap/dist/css/bootstrap.css»;
Nota: Es importante importar Bootstrap al comienzo del archivo de entrada de su aplicación antes que otros archivos CSS. Esto garantiza que los estilos de los archivos CSS tengan prioridad sobre los estilos Bootstrap, lo que facilita cambiar la apariencia de su aplicación del tema Bootstrap predeterminado si es necesario.
Ahora puede importar clases y estilos de Bootstrap en su aplicación React y diseñar sus componentes.
3. Cree un componente de contador.
En esta sección, convertirá su proyecto React vacío en un componente de contador de trabajo con una interfaz de usuario muy simple. La aplicación finalizada mostrará un valor numérico. A continuación, creará dos botones que incrementarán o disminuirán este valor en uno usando el enlace de administración de estado de React.
Para crear el componente de contador básico, vaya a la carpeta ./src de su aplicación React. En la carpeta, cree un nuevo archivo JavaScript llamado Counter.js y rellénelo con el siguiente código:
El código anterior usa React estado de uso gancho para crear una variable de estado de conteo y establecer su valor inicial en 0.
Luego define el agregar () Y sustraer() funciones para modificar el valor de recuento y pasarlos como controladores de eventos a los botones Agregar y Eliminar.
Entonces muestra el tuyo Encimera componente eliminando el contenido del archivo ./Aplicación.js file y rellenándolo con el siguiente código:
Ejecute la aplicación y obtenga una vista previa de su salida en un navegador. Cuando se renderice, debería verse como la imagen a continuación:
Al hacer clic en los botones Agregar y Eliminar, se actualizará el valor de la variable de estado, contar.
4. Estilo con clases de Bootstrap.
Su contador ahora funciona, pero actualmente se ve un poco soso. Aquí es donde puede usar las clases de Bootstrap para agregar un formulario a esta función.
Bootstrap ofrece varias clases de estilo para ayudarlo a diseñar rápidamente su sitio web o aplicación web. Incluyen:
- Lactividades extracurriculares para controlar el diseño y la posición de los elementos en la ventana gráfica
- Clases de componentes para ayudarlo a diseñar componentes independientes como barras de navegación, barras de progreso y botones
- Clases de utilidad escribir estilos CSS para propiedades individuales como márgenes, bordes y colores
En este proyecto, utilizará las tres clases para cambiar el tamaño, la fuente y la posición del texto, y para agregar estilo a los botones.
Para comenzar, abra el archivo ./Counter.js y reemplace el código HTML en la declaración de devolución con el siguiente código:
Ahora, cuando vea su aplicación React en su navegador, debería verse así:
Podría haberle dado a su componente una apariencia y un diseño mucho mejores con solo unas pocas clases de Bootstrap.
Conectando Bootstrap con React
En este tutorial, hizo que una aplicación básica de React se vea mucho mejor con solo unas pocas clases de Bootstrap, sin necesidad de saber CSS.
Para llevar su aplicación React al siguiente nivel de estilo, considere las siguientes preguntas:
- ¿Puede evitar conflictos de nombres y errores específicos?
- ¿Puedes mantener y rastrear todos tus estilos a medida que crece la aplicación?
- ¿El rendimiento de su aplicación será un problema? Tener una gran cantidad de estilos CSS en varias hojas de estilo conducirá a un tamaño de paquete CSS más grande, lo que afectará el rendimiento de la aplicación.
Priorice una técnica de estilo que supere estas preocupaciones y proporcione un proceso simple para agregar estilo a su aplicación React. Este enfoque ahorra tiempo y molestias en el camino al hacer que el estilo de la aplicación sea intuitivo, eficiente y, lo que es más importante, simple.
Ya sea que esté creando un nuevo diseño desde cero o agregando Bootstrap a una aplicación existente, puede ahorrar tiempo y esfuerzo de desarrollo y ayudarlo a crear un sitio web más pulido y estéticamente agradable que se ve muy bien en cualquier dispositivo.
