React es uno de los marcos y bibliotecas de JavaScript más populares para crear aplicaciones e interfaces de usuario de una sola página. Su flexibilidad en la creación de interfaces de usuario utilizando sus componentes reutilizables, la velocidad de desarrollo y la comunidad de apoyo son las razones de su popularidad.
Sin embargo, Reaccionar debe combinarse con hojas de estilo en cascada (CSS) para que sus aplicaciones sean más atractivas y visualmente presentables. Escribir CSS desde cero puede llevar mucho tiempo.
Los desarrolladores pueden pasar mucho tiempo trabajando en el estilo en lugar de las características clave de una aplicación React. La buena noticia es que las herramientas y marcos como Bootstrap facilitan la adición de CSS a su aplicación React.
Contenido del sitio
¿Qué es Bootstrap?
Principal es un marco CSS de código abierto para el desarrollo front-end. Bootstrap permite a los desarrolladores crear sitios web receptivos y aptos para dispositivos móviles con su completo conjunto de plantillas y herramientas de diseño basadas en JavaScript y CSS.
Bootstrap fue creado por Twitter y también lo mantiene un equipo de ingenieros de la misma empresa. Su código fuente se mantiene en GitHuby los miembros de la comunidad pueden contribuir y enviar informes de errores y sugerencias. Arranque 5.3.0-alpha1 es la última versión en el momento de escribir este artículo.
¿Por qué usar Bootstrap con React?
- Ahorro de tiempo: Bootstrap se encarga del formato, dejándote más tiempo para concentrarte en la funcionalidad. Por lo tanto, no tiene que preocuparse por cuestiones como el aspecto de sus formularios o botones, sino por áreas como si el botón de envío envía o no datos a su backend o API.
- Facilidad de uso: Una vez que haya agregado Bootstrap a su aplicación React, simplemente tome los componentes de la interfaz de usuario prediseñados y agréguelos a su aplicación.
- Diseño coherente: La mayoría de las aplicaciones crecen con el tiempo. Es importante garantizar un diseño consistente para su sitio web si desea atraer usuarios leales. Bootstrap tiene un estilo consistente que le dará a tus páginas un aspecto uniforme.
- Toneladas de plantillas para elegir: Bootstrap tiene cientos de plantillas que van desde barras de navegación, botones, formularios y carruseles hasta menús desplegables, por nombrar algunos, para elegir.
- Facilidad de personalización: Aunque Bootstrap ofrece plantillas de diseño, aún puede personalizar el tamaño de fuente, el color y otras características para satisfacer sus necesidades.
- Soporte comunitario: Bootstrap tiene una extensa documentación para que pueda comenzar. Sin embargo, siempre puede contar con la gran comunidad, siempre agregando nuevas funciones y manteniendo este marco CSS.
- Diseño de respuesta: Una vez que agregue Bootstrap a su aplicación React, puede estar seguro de que su aplicación web responderá en todos los tamaños de pantalla.
Cómo instalar Bootstrap en React
Una aplicación React no viene con Bootstrap instalado de forma predeterminada. Pero antes de explorar cómo agregar/instalar Bootstrap en React, debemos verificar algunas cosas;
condiciones previas
Use este comando para verificar si node.js está instalado en su PC:
node -v
Si node.js está instalado, tendrá un resultado similar a este en su terminal.
Versión de nodo
Si no está instalado, puede ver las instrucciones de descarga desde https://nodejs.org/fr/.
Use este comando para verificar si React está instalado en su PC:
npm list react
Si React está instalado globalmente en su máquina, tendrá algo como esto en su terminal.
Versión de reacción
- Instale la aplicación react-create en su máquina. Usando este comando
npm install -g create-react-app
- Cree su aplicación React usando este comando
npx create-react-app my-app
Puedes reemplazar mi-aplicacion con el nombre de tu elección. Para nuestro caso, llamamos a nuestra aplicación reaccionar-b.
Una vez instalado, tendrás algo similar en tu terminal:
Ejecute estos comandos para comenzar
- cd react-b (use el nombre de su aplicación elegido en el paso anterior)
- npm start (este comando inicia su aplicación React)
Ahora podemos pasar a los siguientes pasos y agregar/instalar Bootstrap a nuestra aplicación React:
Método de arranque de instalación de NPM
Node.js viene con npm (administrador de paquetes de nodos) instalado por defecto.
Puede verificar su versión de npm a través de este comando:
npm -v
Si npm está instalado, obtendrá un resultado como 9.2.0
Ahora puede instalar bootstrap usando este comando:
npm install bootstrap
Una vez hecho esto, vaya a ./src/index.js archivar. Agregue esta línea en la parte superior.
importar ‘bootstrap/dist/css/bootstrap.css’;
Uso del administrador de paquetes de hilo
A diferencia de npm, yarn no se instala de manera predeterminada cuando instala node.js.
Instale el patio usando este comando;
npm install -g yarn
Este comando instalará el hilo globalmente, por lo que ya no necesitará instalar el paquete cada vez que cree una aplicación React.
Ejecute este comando para agregar bootstrap a React:
yarn add bootstrap
Una vez hecho esto, vaya a ./src/index.js archivar. Agregue esta línea en la parte superior.
importar ‘bootstrap/dist/css/bootstrap.css’;
Siempre debe importar Bootstrap en la parte superior del archivo de entrada de su aplicación antes que otros archivos CSS. Esto facilita la edición de sus entradas de Bootstrap si necesita cambiar los valores predeterminados de la plantilla cuando crea su aplicación React.
método CDN
Usando un enlace CDN (red de entrega de contenido), puede agregar Bootstrap a React. Al agregar este enlace CDN, incluye la biblioteca Bootstrap en su aplicación React sin descargar ni alojar los archivos en la carpeta de su proyecto. Sigue estos pasos.
- En su carpeta raíz, navegue hasta .public/index.html archivar
- en el faro agrega esta etiqueta
<link href=" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Debe agregar dependencias de JavaScript a su aplicación. Ve al cuerpo de tu índice.html archivo y agregue esta etiqueta justo antes de la etiqueta de cierre :
<script src=" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Bootstrap finalmente está instalado en su aplicación React.
Uso del paquete React Bootstrap
Los enfoques que hemos cubierto hasta ahora se diseñaron originalmente para archivos HTML. Para comprender mejor esto, considere este código desplegable de Bootstrap:
<div> <button type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div>
¿Qué tiene de malo el código? Bootstrap, por defecto, usa la clase para clasificar sus divisiones (DIV). Sin embargo, React usa JSX, que usa la sintaxis camelCase. Por lo tanto, debe cambiar la clase a className manualmente.
Para que este código funcione en React, necesitamos reemplazar cada «clase» con «className». El código final será:
<div className="dropdown"> <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul className="dropdown-menu"> <li><a className="dropdown-item" href="#">Action</a></li> <li><a className="dropdown-item" href="#">Another action</a></li> <li><a className="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Afortunadamente, tenemos otros dos enfoques, react-bootstrap y reactstrap, donde no se requiere intervención manual.
reaccionar-bootstrap
React-bootstrap tiene componentes React reales creados desde cero. La biblioteca es compatible con el núcleo de Bootstrap.
Siga estos pasos para comenzar con React-bootstrap:
- Instale React-bootstrap con este comando:
npm install react-bootstrap bootstrap
- Ir hacia src/index.js o App.js archivo y agregue esta línea antes de otros archivos CSS
importar ‘bootstrap/dist/css/bootstrap.min.css’;
React-bootstrap le permite importar un componente específico en lugar de la biblioteca completa. Por ejemplo, si necesita importar un botón en uno de sus componentes, puede importarlo de la siguiente manera;
importar {Botón} desde ‘react-bootstrap’;
correa de reacción
Esta es una biblioteca de componentes React para Bootstrap. correa de reacción se basa en el marco CSS Bootstrap para sus estilos y temas. Esta biblioteca importa las clases de Bootstrap correctas en su aplicación React, lo que le permite tener un estilo de aplicación consistente. Tampoco necesita agregar los archivos JavaScript de Bootstrap para activar la función.
Siga estos pasos para agregar Reactstrap a su aplicación React:
- Instale Reactstrap a través de este comando:
npm install reactstrap react react-dom
- Importe Bootstrap usando estos comandos:
npm install --save bootstrap
importar ‘bootstrap/dist/css/bootstrap.min.css’; (agregue esta línea a su app.js)
También puede usar la opción de enlace CDN para incluir Bootstrap en su aplicación. Después del primer paso, navegue hasta el directorio raíz y navegue hasta .public/index.html archivo y agregue esta línea a la etiqueta
<link rel="stylesheet" href=" />
Reactstrap le permite importar un componente específico en lugar de toda la biblioteca. Por ejemplo, si necesita importar un botón en uno de sus componentes, puede importar como ;
importar {Botón} de ‘reactstrap’;
Conclusión
Arriba hay algunos enfoques que puede usar para instalar Bootstrap en su aplicación React para diseñar sus aplicaciones web. La elección del enfoque de instalación es una cuestión de preferencia, ya que el objetivo final es el mismo.
La combinación de React con Bootstrap le evita tener que seguir todos los estilos CSS a medida que se desarrolla su aplicación. Diseñar su aplicación se vuelve fácil y eficiente a medida que tiene más tiempo para concentrarse en la funcionalidad.
Puede explorar algunas razones para elegir React Native para el desarrollo de aplicaciones móviles.
