A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Estados imperativos con useState

10/19
Recursos

Aportes 22

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Profe Juan, usted no pregunte por los cursos, l谩ncenlos 馃槃, es conocimiento puro y bueno que me ha ayuda a comprender muchas mas cosas, feliz de aprender con los cursos de react que salgan.
Honestamente no se que conocimientos necesito ya que vengo desde 0, Platzi me ayuda a darme la ruta 馃槃, gracias por eso.

Que se venga el curso de React router :3

Agradecido con el curso, ya hacia falta mas cursos actualizados en react, me gustaria un curso con la nueva version del react router v6 .

Curso de React Router rigth now!!!

Uff, se escucha tentador el curso con React Router :3
Ojala se aproveche para aprender a usar otras librerias como Redux e ir mas alla con el manejo del estado.

La energ铆a del profe Juan hace los cursos muy amenos y agradables.

Paradigma
Paradigma de programaci贸n son la forma que traducimos lo que pensamos al c贸digo que vamos a escribir.
.
Paradigma imperativo:
Describir el paso a paso de lo que vamos a hacer en el c贸digo.
.
Paradigma declarativo
Cuanto mas declarativo, menos se concentra en el paso a paso. Eso se vera en otra funci贸n.

C贸digo usado durante la clase:

function UseState({ name }) {
    const [state, setState] = React.useState({
        value:'',
        error:false,
        loading:false,
        deleted: false,
        confirmed: false,
    })

    console.log(state);

    const handleChange = (event)=>{
        setState({ 
            ...state,
            value: event.target.value,
        });
        console.log(event.target.value);
    }

    React.useEffect(()=>{
        console.log('Empezando el efecto');
        if(state.loading){
            // setError(false);
            setTimeout(()=>{
                console.log("Haciendo la validaci贸n xd");
                if(state.value === SECURITY_CODE){
                    setState({ 
                        ...state,
                        error: false, 
                        loading: false ,
                        confirmed: true,
                    });
                }else{
                    setState({ 
                        ...state,
                        error: true, 
                        loading: false 
                    });
                }
                console.log("Terminando la validaci贸n");
            },1500);
        }
        console.log('Terminando el efecto');
    },[state.loading]);

    if(!state.deleted && !state.confirmed){
        return (
            <div>
                <h2>Eliminar {name}</h2>
                <p>Por favor, escriba el c贸digo de seguridad.</p>
    
                {(state.error && !state.loading ) && (
                    <p>El c贸digo es es incorrecto</p>
                )}
    
                {state.loading && (
                    <p>Cargando ...</p>
                )}
    
                <input 
                    type='text' 
                    placeholder='c贸digo de seguridad'
                    value={state.value}
                    onChange={handleChange}
                />
                <button
                    // onClick={()=>setError(!error)}
                    onClick={()=>{
                        // setError(false);
                        setState({ 
                            ...state,
                            loading: true 
                        });
                    }}
                >Comprobar</button>
            </div>
        );
    }else if(state.confirmed && !state.deleted){
        return(
            <React.Fragment>
                <p>驴Seguro que quieres eliminar UseState?</p>
                <button
                    onClick={()=>{
                        setState({
                            ...state,
                            deleted: true,
                        })
                    }}
                >Si, eliminar</button>
                <button
                    onClick={()=>{
                        setState({
                            ...state,
                            confirmed: false,
                            value:'',
                        })
                    }}
                >No, volver</button>
            </React.Fragment>
        )
    } else {
        return (
            <React.Fragment>
                <p>Eliminado con exito</p>
                <button
                    onClick={()=>{
                        setState({
                            ...state,
                            confirmed: false,
                            deleted: false,
                            value:'',
                        })
                    }}
                >Recuperar UseState</button>
            </React.Fragment>
        )
    }
}

Para aprender c贸mo usar los estados compuestos con useState estuvo bueno hacerlo de esa manera, pero era mucha batalla xD yo los regres茅 a estados individuales, me parece mejor.

Yo lo que mas pido y siempre pedir茅 son cursos de tdd Lol y css 鈥渇rameworks cosas avanzadas鈥 las 2 cosas m谩s complicadas de la programaci贸n en el front !!

Sii mas cursos de react 馃槏

import React from "react";

const SECURITY_CODE = "paradigma";

function UseState({ name }) {
  const [state, setState] = React.useState({
    value: "",
    error: false,
    loading: false,
    deleted : false,
    confirmed: false,
  });

  console.log(state);

  React.useEffect(() => {
    console.log("Starting the effect");

    if(!!state.loading) {
      setTimeout(() => {
        console.log("Doing the validation");

        if(state.value === SECURITY_CODE) {
          setState({
            ...state,
            error: false,
            loading: false,
            confirmed: true,
          });
      } else {
        setState({
          ...state,
          error: true,
          loading: false,
        });
      }
        console.log("Finishing the validation");
      }, 1000);
    }

    console.log("Finishing the effect");
  }, [state.loading]);

  if (!state.deleted && !state.confirmed) {
    return (
      <div>
        <h2>Delete {name}</h2>

        <p>Please enter the security code</p>

        {(state.error && !state.loading) && (
          <p>Error: Security code is incorrect</p>
        )}

        {state.loading && (
          <p>Loading...</p>
        )}

        <input
          placeholder="Security Code"
          value={state.value}
          onChange={(event) => {
            setState({
              ...state,
              value: event.target.value,
            });
            //setError(false);
            //setValue(event.target.value);
          }}
        />

        <button
          onClick={() => {
            setState({
              ...state,
              loading: true,
            });
            //setLoading(true);
            //setError(false);
            }}
        >Check</button>
      </div>
    );
  } else if (!!state.confirmed && !state.deleted) {
    return (
      <React.Fragment>
        <p>驴Are you sure to delete UseState?</p>
        <button
            onClick={()=>{
                setState({
                    ...state,
                    deleted: true,
                })
            }}
        >Yes, delete</button>
        <button
            onClick={()=>{
                setState({
                    ...state,
                    confirmed: false,
                    value:'',
                })
            }}
        >No, back
        </button>
      </React.Fragment>
    );
  } else {
    return (
      <React.Fragment>
        <p>Deleted state</p>
          <button
            onClick={()=>{
                setState({
                    ...state,
                    confirmed: false,
                    deleted: false,
                    value:'',
                })
            }}
          >Recovery UseState, return back</button>
      </React.Fragment>
    );
  }
}

export { UseState };

Mi practica:

import React from "react";

const SECURITY_CODE = "YOUR_CODE";

function UseState({name}) {
    const [state, setState] = React.useState({
        value: "",
        error: false,
        loading: false,
        deleted: false,
        confirmed: false
    });

    React.useEffect(() => {

        if (!!state.loading) {
            setState({
                ...state, error: false
            });
            setTimeout(() => {
                if (state.value !== SECURITY_CODE) {
                    setState({
                        ...state,
                        error: true,
                        loading: false
                    });
                } else {
                    setState({
                        ...state,
                        error: false,
                        loading: false,
                        confirmed: true
                    });
                }

            }, 3000);
        }
    }, [state.loading]);
    if (!state.deleted && !state.confirmed) {
        return (
            <React.Fragment>
                <h2>Eliminar {name}</h2>
                <p>Por favor, escribe el c贸digo de seguridad</p>
                {(!state.loading && state.error) && (
                    <p> El C贸digo es incorrecto</p>
                )}
                {state.loading && (
                    <p> Cargando...</p>
                )}
                <input
                    value={state.value}
                    onChange={(event) => {
                        setState({
                            ...state,
                            value: event.target.value
                        });
                    }}
                    placeholder="C贸digo de Seguridad"
                />
                <button
                    onClick={() => {
                        setState({
                            ...state,
                            loading: true
                        })
                    }}
                >Comprobar
                </button>
            </React.Fragment>
        );
    } else if (!!state.confirmed && !state.deleted) {
        return (
            <React.Fragment>
                <h2>Eliminar {name}</h2>
                <p>驴Seguro que quieres eliminar {name}?</p>
                <button type="button" onClick={() => {
                    setState({
                        ...state,
                        deleted: true
                    });
                }}>Si, eliminar</button>
                <button type="button" onClick={() => {
                    setState({
                        ...state,
                        confirmed: false,
                        value: ''
                    });
                }}>No, cancelar</button>
            </React.Fragment>
        );
    } else {
        return (
            <React.Fragment>

                <h2>隆{name} eliminado!</h2>
                <button type="button" onClick={() => {
                    setState({
                        ...state,
                        confirmed: false,
                        deleted: false,
                        value: ''
                    });
                }}>Recuperar {name}</button>
            </React.Fragment>
        );
    }

}

export {UseState};

CURSO DE REACT ROUTER

con Juan 馃挌

Solo para aclarar, el condicional && es de JS no de react, asi que se puede usar en node por ejemplo

El shortcut para seleccionar todas las palabras iguales sin seleccionar una por una, es: dar click sobre la palabra (confirm) y luego F2.

De todos los profesores de Platzi, usted sin duda es con el que m谩s he aprendido.
Agradezco el conocimiento que nos comparte y su forma tan divertida de ense帽ar!
Por favor saque un curso de React router y Optimizaci贸n de render!
Los necesitamos! 馃憖

Me encant贸 esta clase. Muy sencillo y a la vez muy 煤til.

Esta curso me ha encantado!!
Ojala que saquen todos los cursos de React que menciona Juan, y que los dicte el!

Siguiendo con lo que se ense帽o en la clase, nosotros podemos renderizar una sola vez y tener las validaciones dentro del mismo render. Al final el resultado es el mismo pero de esa forma, no creamos 3 etiquetas <h2> (una para cada render), si no que mas bien, solo una que va cambiando de acuerdo al estado de nuestro componente. Yo hice esto de la siguiente manera

return (
    <div>
      <h2>
        {!state.confirmation && !state.deleted
          ? `Eliminate ${name}`
          : state.confirmation && !state.deleted
          ? "Confirm please"
          : `${name} has been deleted`}
      </h2>

      {!state.confirmation && !state.deleted ? (
        <React.Fragment>
          <p>"Please, type security code"</p>

          <p>
            {state.validation && !state.loading ? `${state.validation}` : ``}
          </p>
          {state.loading && <p>Loading...</p>}

          <input
            onChange={(e) => handleInput(e, state, setState)}
            type="text"
            placeholder="Secutiry code"
          />
          <button onClick={() => handleClick(state, setState, state.value)}>
            Check
          </button>
        </React.Fragment>
      ) : state.confirmation && !state.deleted ? (
        <React.Fragment>
          <p>Are you sure you want to delete {name}</p>

          <button onClick={() => setState({ ...state, deleted: true })}>
            Yes, delete
          </button>
          <button onClick={() => setState({ ...state, confirmation: false })}>
            Nop, I regret
          </button>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <button
            onClick={() =>
              setState({ ...state, confirmation: false, deleted: false })
            }
          >
            Recover {name}
          </button>
        </React.Fragment>
      )}
    </div>
  );

Pa ya es tarde el curso de react router!

Creo que esta clase estuvo de m谩s, realmente se hizo lo mismo que en la anterior. Con haber explicado imperativo vs declarativo bastaba.