Post Top Ad

Your Ad Spot

lunes, 14 de septiembre de 2020

Tutorial De Ejemplo Modal De Bootstrap De React Js

En este artículo, le explicaremos cómo crear un ejemplo modal de bootstrap de react js. en este artículo, crearemos el cuadro modal bootstrap en react js. así que tenemos que instalar el paquete react-bootstrap para react js.
Por lo tanto, puede aprender a reaccionar js paso a paso usando el siguiente ejemplo.

Crear aplicación React

En este paso, si desea crear una aplicación react js, puede seguir el siguiente comando o la URL para la instalación de react js.

Instalar bootstrap en react js

ahora, después de la instalación de react js, puede instalar el bootstrap usando el siguiente comando.
aquí, importaremos el bootstrap en el archivo index.js, para que pueda ver el siguiente código.
src / index.js

reaccionar js bootstrap modal

Ahora, crearemos un modal de arranque en la función de renderizado. para que pueda ver el siguiente ejemplo.

reaccionar js muestra bootstrap modal

aquí, tomaremos una variable de estado showModal y la configuraremos como falsa. Entonces estará oculto. para que pueda ver el siguiente código.

reaccionar js modal de arranque abierto

crearemos una función abierta para abrir el modal. cuando haga clic en el botón abrir, estableceremos showModal como verdadero y abrirá el modal. para que pueda ver el siguiente código.

reaccionar js cerrar bootstrap modal

crearemos una función de cierre para cerrar el modal. cuando haga clic en el botón cerrar, se establecerá showModal como falso y cerrará el modal. para que pueda ver el siguiente código.
para que pueda ver el archivo app.js completo y modificar su archivo usando el siguiente código.
src / app.js

Ejecutar la aplicación React js

Si desea ejecutar la aplicación, puede seguir el siguiente comando. si realiza algún cambio en su aplicación, utilice la compilación de ejecución npm y, a continuación, podrá ejecutar la aplicación.
Ahora ejecutaremos nuestra aplicación usando la siguiente URL en el navegador.
reaccionar js bootstrap modal

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas