Como usar Bulma CSS en React js

Anteriormente ya había usado Bulma CSS para un proyecto pequeño y lo habia configurado para ser usado Gulp 4. Pero las circunstancias han querido que vuelva a usar este pequeño framework css para un proyecto en React. Al ser un framework que no utiliza javascript es Bulma CSS en React es ideal.

Bulma es conocido por tener un sistema de grillas mas simple, es tan simple que las columnas se redimensionan automaticamnete dependiendo del tamaño de la pantalla del dispositivo que se esta utilizando.

A diferencia de la mayoria de los frameworks css, no es un framework de todo o nada (Bootstrap, Material UI, Tailwind, etc); Permite importar y utilizar componentes específicos, como ser: Navbar o un simple formulario.

Y como mencione antes, con Bulma CSS en react solo nos enfocamos en darle funcionalidad de cualquier elemento sin preocuparnos por romper el javascript de Bulma.

Instalar Bulma css en React

En nuestra aplicación en React instalamos Bulma

npm i bulma

importamos bulma en el archivo app.js

import 'bulma/css/bulma.min.css';
<button class="button is-danger">Danger</button>

Si bien existen frameworks mucho mas completos como Bootstrap 5 o Tailwind CSS, pero este ultimo es muy complicado y demasiado código de estilos para un simple boton. Y esa es la ventaja que tiene Bulma sobre ellos, su simplicidad en instalar y usar.