Usar Reactstrap: un framework en base a Bootstrap para React.js
Una buena alternativa para agilizar el desarrollo de nuestras UI
Bootstrap es una buena alternativa para desarrollar nuestras UI siempre y cuando
sepamos aplicarlo, en lo personal, me gusta usar los componentes y el maquetado ejecutarlo
usando flexbox o cssGrid según sea el caso, ya que si usamos las grillas propias de boostrap,
como anteriormente lo he explicado, siempre se tendrá problemas a la hora de personalizar
un maquetado en base a ciertos requerimientos.
Cuando trabajamos con React tenemos una opción que nos ayuda a integrar componentes bootstrap a nuestra app
llamado REACTSTRAP, además su documentación es bastante buena.
Pasos a seguir:
1. Ir a la documentación oficial e instalar los paquetes:
2. Ir al archivo App.js en nuestra app, incluir el Css y llamar al componente Container:
Esto se hace con la finalidad de que todo el proyecto quede dentro de un contenedor
general y así evitar que existan problemas en cuanto al tamaño de las cajas más grandes
respecto a su width al maquetar. Podemos ver esto en la linea 5, 11 y 29.
3. Usar Reactstrap en los componentes que necesitemos:
Simplemente llamamos a los componentes del paquete que vamos a usar y maquetamos,
esto lo puedes ver en la linea 2,3 y del 28 al 52.
EXTRA: Vamos a implementar fontAwesome en nuestro proyecto, en este caso, he usado la siguiente
librería: FONTAWESOME FOR REACT
Y funciona de la misma manera, instalamos los paquetes y llamamos en los componentes los items que necesitamos
aplicar. El resultado:
Pueden clonar los proyectos aquí: FRONTEND, API
Espero que les sirva. Saludos!
#React.js
#Reactstrap
#Javascript
#Bootstrap
#UI
"Una forma de apoyar la creación de contenido técnico y de calidad es donando la cantidad que
creas conveniente, si quieres que haga un post sobre un tema en específico no dudes en avisarme"
