Aprende a crear un modal (popup) con ReactJs - Learn how to create a modal (popup) with ReactJs

Tecnología
  
Programación Web
  
Javascript
  
Desarrollo Web
  
React
    25 Enero, 2021   Regresar el blog
Compartir:

En el día de hoy vamos a crear un simple modal (popup) con react, de esta manera vamos a empezar a familiarizarnos con el desarrollo frontEnd en este caso usaremos la librería creada por Facebook llamada React

Today we are going to create a simple modal (popup) with react, in this way we are going to begin to familiarize ourselves with the front development in this case we will use the library created by Facebook called React

Vamos a iniciar / Let´s start

Iniciaremos activando la terminal de nuestra pc, para hacer eso presionamos las teclas (simulteneamente)

We will start activating the terminal of our pc, to do that we press the keys (simultaneously)

Tecla windows
Tecla R

Procedemos a escribir el siguiente comando:

We proceed to write the following command:

cmd

Una vez dentro de la terminal nos dirigimos al escritorio tecleando el siguiente comando:

Once inside the terminal we go to the desktop by typing the following command:

cd desktop

Ubicados en el escritorio escribimos el siguiente comando y presionamos Enter:

Located on the desktop we write the following command and press Enter:

npx create-react-app modal

Ahora con visual studio code abrimos el proyecto y empezamos con el ejercicio

Now with visual studio code we open the project and start with the exercise

Procedemos a eliminar aquellos archivos que no necesitaremos dentro de la carpeta src/:

We proceed to eliminate those files that we will not need inside the src / folder
  • App.css
  • App.test.js
  • logo.svg
  • reportWebVitals.js
  • reportWebVitals.js
  • setupTests.js

dejamos el index.js / app.js de la siguiente manera:

we leave the index.js / app.js as follows:

Index.js
import React from ´react´;
import ReactDOM from ´react-dom´;
import App from ´./App´;
ReactDOM.render(<App />,document.getElementById(´root´));

App.js
function App() {
  return (
Hello World!!
) } export default App;

Ejecutamos en la consola integrada de nuestro editor tecleando (control + shift + P) la siguiente instrucción

We execute in the integrated console of our editor by typing (control + shift + P) the following instruction

npm start

Nos debería aparecer nuestro Hello World!! / Our Hello World !! should appear.


Procedemos a crear un nuevo componente llamado Modal.js que será el contenido que se renderizará al hacer clic en el botón Abrir modal

We proceed to create a new component called Modal.js that will be the content that will be rendered when clicking the Open modal button

Modal.js
import React from ´react´
export default function Modal({children}) {
    return (
        <div>
          {children}  
        </div>
    )
}

Y nuestro App.js quedaria de la siguiente manera / And our App.js would be as follows


App.js
import {useState} from ´react´
import Modal from ´./Modal´
const DIV_BUTTON_STYLE = {
  position: ´relative´,
  zIndex:1
}
const CONTENT_STYLE =  {
  background: ´red´,
  padding: ´20px´,
  zIndex: 2
}
function App() {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <>
	<Modal>Contenido dentro del modal / Content inside of the modal</Modal>
       <div style = {DIV_BUTTON_STYLE}>
         <button>Abrir modal / Open modal</button>
       </div>
       <div style = {CONTENT_STYLE}>
         Otro contenido / Other content
       </div>
    </>
    )
}
export default App;

Obtendremos el siguiente resultado / We will obtain the following result:



Ahora procederemos a hacer funcionar el botón de abrir modal y cerrar modal / Now we will proceed to make the button open modal and close modal work


App.js
import {useState} from ´react´
import Modal from ´./Modal´
const DIV_BUTTON_STYLE = {
  position: ´relative´,
  zIndex:1
}
const CONTENT_STYLE =  {
  position: ´relative´,
  background: ´red´,
  padding: ´20px´,
  zIndex: 2
}
function App() {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <>
	<Modal open = {isOpen} close = { () => setIsOpen(false)} >Contenido dentro del modal / Content inside of the modal</Modal>
       <div style = {DIV_BUTTON_STYLE}>
         <button onClick = {() => setIsOpen(true) }>Abrir modal / Open modal</button>
       </div>
       <div style = {CONTENT_STYLE}>
         Otro contenido / Other content
       </div>
    </>
    )
}
export default App;

Modal.js
import React from ´react´
export default function Modal({children, open, close}) {
    if(!open) return null
    return (
        <div>
          <div><button onClick={close}>x</button> </div>
          {children}
        </div>
    )
}

Si todo lo han seguido al pie de la letra debería funcionar el botón de abrir/cerrar modal

If everything has been followed to the letter, the modal open / close button should work

Procedemos a modificar el estilo del div que contiene el contenido del modal / We proceed to modify the style of the div that contains the content of the modal

Modal.js
import React from ´react´
const DIV_MODAL_STYLE = {
    position : ´fixed´,
    top: ´50%´,
    left: ´50%´,
    transform : ´translate(-50%,-50%)´,
    backgroundColor: ´#fff´,
    padding: ´50px´,
    zIndex: 1000
}
export default function Modal({children, open, close}) {
    if(!open) return null
    return (
        <>
            <div style={DIV_MODAL_STYLE}>
                <div><button onClick={close}>x</button></div>
                {children}
            </div>
        </>
    )
}



Como notaran necesitamos agregar un div para diferenciar el modal del contenido, crearemos un div general llamado Overlay

As you will notice we need to add a div to differentiate the modal from the content, we will create a general div called Overlay

Modal.js
import React from ´react´
const DIV_MODAL_STYLE = {
    position : ´fixed´,
    top: ´50%´,
    left: ´50%´,
    transform : ´translate(-50%,-50%)´,
    backgroundColor: ´#fff´,
    padding: ´50px´,
    zIndex: 1000
}
const DIV_OVERLAY_STYLE = {
    position : ´fixed´,
    top : 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor : ´rgba(0,0,0,.7)´,
    zIndex : 1000
}
export default function Modal({children, open, close}) {
    if(!open) return null
    return (
        <>
            <div style = {DIV_OVERLAY_STYLE} />
            <div style={DIV_MODAL_STYLE}>
                <div><button onClick={close}>x</button></div>
                {children}
            </div>
        </>
    )
}

Quedando de la siguiente manera / Staying as follows



Podemos ver el ejemplo en vivo haciendo clic en este link / We can see the live example by clicking on this link


Ver ejemplo en vivo / See live example



Y con eso amigo llegamos al final del tutorial, espero que lo hayan disfrutado y hasta la próxima!! / And with that friend we come to the end of the tutorial, I hope you enjoyed it and until next time!


Visita mi web oficial / Visit my official website

tupaginaonline.net

247 vistas
Compartir:


Autor
Jose Fuentes

- Web Developer -

 


0 COMENTARIO(S)
Contesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Comentario *
Nombre *
Correo electrónico *
Sitio web

Articulos Relacionados
Articulos recientes

Desarrollos en venta

$ usd dólar 600