No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

4 D铆as
21 Hrs
5 Min
57 Seg

C贸mo usar React.js

9/28
Recursos

Aportes 50

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 鈥渟horthand鈥濃 <>):

<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().

Crea tu cuenta de CodeSandbox aqu铆: https://codesandbox.io/.

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>
      ))}
<h3>Solo si lo estan haciendo en VScode 馃憞</h3>

Revisa este comentario

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=鈥渂utton鈥, 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>
      )
  })
  )
}

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 馃槄.

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.

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=鈥渂utton鈥>

      <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=鈥渂utton鈥, y asi no se va a recargar la pagina cuando demos click.

type=鈥榖utton鈥 no type=鈥榮ubmit鈥 porque envia el form y se recarga la pagina

Es c贸mico, un v铆deo llamado 鈥淐omo usar React.js鈥 y yo pendiente por tomar cursos enteros para React XD

Con la clase-----type 鈥渂utton鈥 ; )

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=鈥渂utton鈥>

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 = 鈥渂utton鈥 a cada bot贸n, quedando de la siguiente manera:

<button type = 鈥渂utton鈥> + </button>

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

Para evitar que se recargue la p谩gina se agrega el atributo type=鈥渂utton鈥

<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.

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=鈥渂utton鈥 para que no tenga el type submit por defecto y ya, con eso lo logras.

Agregas el atributo type = 鈥渂utton鈥 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=鈥渂utton鈥 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 鈥渟ubmit鈥, lo que significa que al hacer clic en el bot贸n se enviar谩 un formulario y se recargar谩 la p谩gina. Al establecer type=鈥渂utton鈥, 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 鈥渂utton鈥 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} />
      ))}
    </>
  );
}

馃憣