No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Cómo usar React.js

9/28
Recursos

Aportes 49

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Como dato curioso acerca de porqué se recarga la página cuando haces click en esos botones, es porque al estar dentro de un <form>, los elementos button que no tienen el type (button o submit) por default se le asigna el submit, y al darle click se ejecuta se ejecuta el submit del form lo cual genera la recarga de la página.

¿Cómo evitar que todos los componentes vayan envueltos en etiquetas <div> y por ende el DOM se llene de divs innecesarios?
En vez de envolver todo el componente entre etiquetas <div> se puede usar la etiqueta de JSX <React.Fragment> (o su “shorthand”… <>):

<React.Fragment>
	<h2>Titulo</h2>
	<form>...</form>
</React.Fragment>

Lo cual sería equivalente a:

<>
	<h2>Titulo</h2>
	<form>...</form>
</>


¿Cómo hacer que la página no se recargue?
Se puede asociar una función que se ejecute onclick en cada botón, o como submit del form, cuya primera línea sea event.preventDefault().

Agregar esto a los botones del formulario para evitar que se recargue la página:

<button type="button"> - </button> 0 <button type="button"> + </button>

Pequeño recordatorio, siempre que uses map para renderizar algun componente, recuerda que despues de la flecha, debes poner parentesis en vez de corchetes, ya que esto indicia un retorno expicito.

{movies.map(movies =>(
        <h3>{movies.name}</h3>
      ))}

Como dice nuestro compañero @elviss el elemnto button dentro de un form viene predeterminado (by default) como tipo submit que lo que hace es enviar el formulario y tal evento recarga la pagina, tiene 2 soluciones a mi parecer:

1- Manejar el evento submit del form y usar la función event.preventDefault(), documentación aquí

2- Cambiarle el tipo de button a nuestros button con type=“button”, y así no activara ningún tipo de accíon o evento.

Mi codigo y resulución del reto:

App.js

import "./styles.css";
import Form from "./Form.js";

const movies = [
  {
    name: "Green Movie",
    Available: 6
  },
  {
    name: "Superman",
    Available: 8
  },
  {
    name: "Marvel Universe",
    Available: 4
  }
];

export default function App() {
  return (
    <div>
      <h1>Peliculas</h1>
      <Form movies={movies} />
    </div>
  );
}

**Form.js **

import React from "react"

export default function Form(props){
  const { movies } = props
  return ( movies.map(movie => {
    return(<form>
            <h2>movie.name</h2>
            <button type="button"> - 
            </button>0
            <button type="button"> + 
            </button>
          </form>
      )
  })
  )
}

Como buena práctica estuve leyendo que es recomendable que los componentes que vamos creando sean de extensión jsx, en lugar de js, en términos funcionales no cambia nada, pero visualmente nos permite con solo un vistazo darnos cuenta de que un archivo es un componente. Incluso con un plugin adecuado, el árbol de carpetas mostrará el logo de react en estos archivos que son componentes.

Si realizamos una función handlerSubmit que reciba como parámetro el event y llamamos al método preventDefault podemos hacer que nuestra página no se recargue a la hora de disparar el evento submit.

function handlerSubmit( event ) {
   event.preventDefault()
}

Se me ocurre esto 😅.

Codigo de Form.js

import React from "react";

export default function Form(props) {
  const { movie } = props;
  return (
    <form>
      <h3>{movie.name}</h3>
      <button> - </button>0<button> + </button>
    </form>
  );
}

Codigo de App.js

import Form from "./Form";

const movies = [
  {
    name: "Avengers",
    available: 5
  },
  {
    name: "Terminator",
    available: "3"
  }
];

export default function App() {
  return (
    <div>
      <h2>Peliculas</h2>
      {movies.map((movie) => (
        <Form movie={movie} />
      ))}
    </div>
  );
}

tip XD:
al importar la función, tiene q estar con la primera letra en mayúscula =S sino no importa la función:



import Theform from “./formOne.js”;

< Theform myMovies={myMovies} />

Desafío: Para quitar el refresh del button, tenemos que settear el atributo dentro button como button.
<button type="button" ></button>
Ya que viene como un submit por default.

Para que deje de refrescar podemos cambiar el type del button así:

<button type="button">

no se olviden la prop key

<div>
      <h2>Peliculas</h2>
      {movies.map((peli) => (
        <Form peli={peli} key={peli.name} />
      ))}
    </div>

https://stackblitz.com/
Les deje este otro editor que me gusto mas

Los botones internos del form por defecto usan el método GET, por lo que es necesario quitarle desde JS el método GET cuando se realice un click.

para evitar que se recargue <button type=“button”>

      <button type="button"> - </button>
      0<button type="button"> + </button>

Por que CodeSandbox es tan parecido a Figma? No les parece? jajaajaja hasta la misma font creo

para evitar que recargue

<button type="button">

Recomendación, si no quieren tener otra cuenta relacionada que nunca volveran a usar, ya se tiene github codespaces con eso puede crear un entonrno de desarrollo de React o otras tecnologias si tienen sincronizados su vscode con github la configuracion sera la misma con sus plugins.

https://github.com/github/codespaces-react

en la Etiqueta button, agregarle el atributo type con el valor button. asi no se recarga la pagina.

En los botones agregamos el atributo type=“button”, y asi no se va a recargar la pagina cuando demos click.

type=‘button’ no type=‘submit’ porque envia el form y se recarga la pagina

Es cómico, un vídeo llamado “Como usar React.js” y yo pendiente por tomar cursos enteros para React XD

Con la clase-----type “button” ; )

stackblitz.com es otra herramienta que nos permite probar pequeños bloques de código con la sintaxis de un framework determinado.

Además, es posible compartir tus mini proyectos con una url simple, muy bueno para compartir soluciones en foros 😃

<button type=“button”>

Me gustan mas las funciones, pero me creo que es mejor aprender ambas formas mi solución con clase

import React, { Component } from 'react'

export default class form extends Component {
    constructor(props) {
        super(props);
        this.movie = props.movie;
    }

    render() {
        return (
            <form>
                <h3>{this.movie}</h3>
                <button type='button'>-</button>
                0
                <button type='button'>+</button>
            </form>
        )
    }
}

Solución con manejo de estados:

import React, { Component } from 'react'

export default class form extends Component {
    constructor(props) {
        super(props);
        this.movie = props.movie;
        console.log(props);
    }

    handleSum = (e) => {
        e.preventDefault();
        console.log(e.type);
    }
    handleRest = (e) => {
        e.preventDefault();
        console.log(e.target);
    }
    render() {
        return (
            <form>
                <h3>{this.movie}</h3>
                <button onClick={this.handleRest}>-</button>
                0
                <button onClick={this.handleSum}>+</button>
            </form>
        )
    }
}

hola en React tenemos si ó si cerrar las etiquetas (/) si no nos va arrojar error

Solución a la tarea
.
Lo que debemos es agregarle al elemento button la propiedad type="button"
.
Quedaría así:

<button type="button"> - </button>
0
<button type="button"> + </button>

?

Quise intentar crear el componente del boton, no se si haya una mejor forma pero así fue

//Boton.js
import React from "react";

export default function Boton(props) {
  return <button type="button">{props.text}</button>;
}


//Form.js
import React from "react";
import Boton from "./Boton";

export default function Form(props) {
  const { movie } = props;

  return (
    <form>
      <h3>{movie.name}</h3>
      <Boton text="-" />0<Boton text="+" />
    </form>
  );
}

Para evitar que la pagina se recargue, basta con poner el atributo type = “button” a cada botón, quedando de la siguiente manera:

<button type = “button”> + </button>

Podemos evitar que nuestro formulario recargue usando event.PreventDefefault()

Para evitar que se recargue la página se agrega el atributo type=“button”

<button type="button"> - </button>
0
<button type="button"> + </button>

Podríamos pasarle el evento que viene por defecto del button y agregarle event.preventDefault()

Habiendo programado tanto tiempo en angular . React parece mas divertido.

```js <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 300px; } #button { background-color: red; width: 80px; font-size: large; border-radius: 20px; } </style> <title>Mas uno</title> </head> <body>
<h1 id="counter">0 <button id="button" type="button">+1</button>
<script> let counter = document.getElementById("counter") const button = document.getElementById("button") button.addEventListener('click', function () { counter.textContent = parseInt(counter.textContent) + 1 }) </script> </body> </html> ```
Hice esto, con la ayuda de sandbox: ```js import React from "react"; export default function Form(props) { const { movie } = props; const handleSubmit = (event) => { event.preventDefault(); console.log("submit"); }; return ( <form onSubmit={handleSubmit}>

{movie.name}

<button type="submit"> - </button>0<button type="submit"> + </button> </form> ); } ```

Aunque esta en el sandbox, adjunto el codigo visto en clase.

Index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";


import App from "./App";


const rootElement = document.getElementById("root");
const root = createRoot(rootElement);


root.render(
<StrictMode>
<App />
</StrictMode>
);



App.js

import Form from "./Form";


const movies = [
{
name: "Avengers",
available: 5
},
{
name: "Terminator",
available: 3
}
];


export default function App() {
return (
<div>
<h2> Pelis </h2>
{movies.map((movie) => (
<Form movie={movie} />
))}
</div>
);
}

Form.js

import React from "react";


export default function Form(props) {
const { movie } = props;


return (
<form>
<h3> {movie.name}</h3>
<button> - </button>0<button> + </button>
</form>
);
}


Sencillamente le pones el type=“button” para que no tenga el type submit por defecto y ya, con eso lo logras.

Agregas el atributo type = “button” a la etiqueta button, ya no se recargara

Para evitar que un botón de HTML recargue la página al hacer clic, puedes agregar el atributo type=“button” a tu etiqueta button. Aquí hay un ejemplo:

<button type="button">Haz clic aquí</button>

Si no especificas el atributo type, el valor predeterminado es “submit”, lo que significa que al hacer clic en el botón se enviará un formulario y se recargará la página. Al establecer type=“button”, se evita esta comportamiento y puedes manejar el evento de clic en JavaScript para realizar cualquier acción que desees.

ME quede un poco confundida por que no usar create-react-app para producción. Es por que no esta hecho para esto, fue creado para que principiantes en React lo usaran sin tener que configurar un archivo wepack.config.js, el usar CRA en producción evita que podamos configurar libremente nuestra app

Los botones están recargando la página porque no tiene el atributo de “button” y lo esta tomando como un submit por defecto

Que tal campeon buen dia,

Mi solucion queda asi…
excelente dia.

<form onsubmit="return false" action="#">
	<h3></h3>
	<button></button>
	...
</form>

Form.js

import React from "react";

export default function Form(props) {
  const { movie } = props;
  return (
    <form>
      <h3>{movie.name}</h3>
      <button type="button">-</button>
      <button type="button">+</button>
    </form>
  );
}

App.js

import "./styles.css";
import Form from "./Form";

export default function App() {
  const movies = [
    { name: "Avengers", available: 5 },
    { name: "Wonder Woman", available: 5 }
  ];
  return (
    <>
      <h2>Peliculas</h2>
      {movies.map((movie) => (
        <Form movie={movie} />
      ))}
    </>
  );
}

👌