Los paradigmas de programación son enfoques o estilos que determinan cómo un programador estructura su código. Los dos paradigmas más populares son el imperativo y el declarativo.
Imperativo: Este paradigma se centra en describir detalladamente cada paso a seguir para lograr un objetivo en el código. Cada instrucción es explícita y se sigue un orden secuencial.
Declarativo: Busca especificar qué acción o proceso se desea ejecutar sin detallar los pasos específicos. La lógica subyacente se implementa en otras funciones o métodos.
En el contexto del estado en React, se ha trabajado tradicionalmente de manera imperativa, especificando directa y detalladamente los cambios en el estado.
¿Cómo crear diferentes vistas en React sin usar rutas?
En React, a veces es necesario gestionar diferentes "vistas" o "pantallas" sin recurrir a enrutadores completos como React Router. Esto se puede lograr mediante el uso de estados para controlar qué contenido mostrar. Aquí se explica cómo hacerlo:
Crear estados para las diferentes vistas:
delete: inicializado en false, para controlar si se debe mostrar la vista de eliminación.
confirm: también inicializado en false, para gestionar la solicitud de confirmación.
Usar condicionales para renderizar vistas:
Verificar los estados delete y confirm para decidir cuál vista mostrar.
Utilizar un condicional simple para ocultar o mostrar contenido.
¿Cómo implementar cambios de estado y validaciones en React?
Para gestionar el cambio de vistas basado en el estado, podemos crear validaciones condicionales que alteran la interfaz del usuario.
Condicionales fuera del JSX:
Se pueden hacer validaciones de estado y renderizaciones condicionales fuera del JSX utilizando lógica de JavaScript estándar.
El ciclo de vida de los componentes y las actualizaciones de estado se pueden gestionar usando useEffect.
¿Cómo integrar botones con eventos onClick en React?
Para hacer que los botones reaccionen a las acciones del usuario, como confirmar o cancelar una eliminación, podemos usar el evento onClick.
Agregar eventos onClick a los botones:
<button onClick={()=>setState({...state,confirm:true})}>Sí, eliminar</button><button onClick={()=>setState({...state,confirm:false})}>No, me arrepentí</button>
Resetear o modificar estados:
Para reiniciar estados o cambiar a una vista anterior, se deben mutar los valores relevantes del estado en respuesta a un evento.
¿Por qué considerar la experiencia del usuario (UX)?
La gestión de estados en React también afecta la experiencia del usuario, razón por la cual es fundamental considerar cómo las acciones del usuario impactan la interfaz.
Estado persistente vs. reset: Determinar si el campo input debería conservar su valor después de ciertas acciones como reset o cancelación.
Al implementar vistas dinámicas, la importancia de equilibra entre los paradigmas imperativo y declarativo ofrece flexibilidad. Invitar a los estudiantes a seguir explorando estas técnicas ayudará en la creación de aplicaciones más robustas y efectivas. Mantén siempre tu curiosidad y ganas de aprender a medida que avanzas en tus proyectos de programación.
Profe Juan, usted no pregunte por los cursos, láncenlos :D, 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 :D, gracias por eso.
Supongo que están tratando de saber si hay una audiencia antes de ponerse a crear el curso.
Sip, seguramente, pero la verdad no se que cursos necesito o no, veo que sacan uno de react o en la escuela de desarrollo web y lo tomo :D
Que se venga el curso de React router :3
Segurísimo
El de react router V6 estaría bueno!
Agradecido con el curso, ya hacia falta mas cursos actualizados en react, me gustaria un curso con la nueva version del react router v6 .
Al parecer están trabajando en ellos
La energía del profe Juan hace los cursos muy amenos y agradables.
CURSO DE REACT ROUTER
con Juan 💚
Este comentario me represente, y finalmente llegó
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:
functionUseState({ name }){const[state, setState]=React.useState({value:'',error:false,loading:false,deleted:false,confirmed:false,})console.log(state);consthandleChange=(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><h3>Eliminar{name}</h3><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>);}elseif(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:'',})}}>RecuperarUseState</button></React.Fragment>)}}
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.
Hay un pequeñito error, al momento de dar click en comprobar e inmediatamente volvemos a escribir lo que sea, cuando termine el timeout devolverá lo que escribimos "antes" de dar click en el botón comprobar.
Para arreglar esto simplemente, podemos poner la propiedad "disabled" tanto en el "botón" como en el "input"
Muy bien identificado ese error :clap:
Algo tal que así:
<input
placeholder="Código de Seguridad" value={value} disabled={loading}//va a estar desabilitado cuando loading sea true onChange={(ev)=>{setState({...state,value: ev.target.value})}}/>
Yo lo que mas pido y siempre pediré son cursos de tdd Lol y css "frameworks cosas avanzadas" las 2 cosas más complicadas de la programación en el front !!
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.
lo confirmo xD
faltaria mirar cual es mejor práctica a la hora de trabajar en proyectos o empresas, pero mi parte me parece mas intuitivo usar estados independientes
Yo lo separé en pequeños componentes 🤓
import{ useState, useEffect }from'react';constSECURITY_CODE='paradigma';functionUseState({ name }){const[state, setState]=useState({value:'',error:false,loading:false,confirmed:false,deleted:false,});useEffect(()=>{console.log('Empieza el efecto');if(state.loading){setTimeout(()=>{console.log('Haciendo la validación');if(state.value!=SECURITY_CODE){setState({...state,error:true,loading:false,});}else{setState({...state,error:false,loading:false,confirmed:true,});}console.log('terminando la validación');},3000);}console.log('Terminando el efecto');},[state.loading]);consthandleChangeInput=(event)=>{const{ value }= event.target;setState({...state, value,});};consthandleClick=()=>{setState({...state,loading:true,error:false,});};return(<div><h3>Eliminar{name}</h3><p>Por favor, escribe el código de seguridad.</p>{state.error&&<p>🚫 Error: el código es incorrecto</p>}{state.loading&&<p>⏳ Cargando...</p>}{!state.deleted&&!state.confirmed&&(<Form inputValue={state.value} inputEventOnChange={handleChangeInput} handleClick={handleClick}/>)}{state.confirmed&&!state.deleted&&<Confirm setCurrentState={setState}/>}{state.confirmed&& state.deleted&&<Delete setCurrentState={setState}/>}</div>);}functionForm({ inputValue, inputEventOnChange, handleClick }){return(<><input placeholder='Código de seguridad' value={inputValue} onChange={inputEventOnChange}/><button onClick={handleClick}>Comprobar</button></>);}functionConfirm({ setCurrentState }){consthandleClickConfirm=()=>{setCurrentState((currentState)=>({...currentState,deleted:true,}));};consthandleClickCancel=()=>{setCurrentState((currentState)=>({...currentState,confirmed:false,value:'',}));};return(<><p>Advertencia ⚠️, ¿Estás seguro de querer eliminar esto?</p><button onClick={handleClickConfirm}>Sí, eliminar</button><button onClick={handleClickCancel}>No, cancelar</button></>);}functionDelete({ setCurrentState }){consthandleClick=()=>{setCurrentState((currentState)=>({...currentState,deleted:false,value:'',confirmed:false,}));};return(<><p>Estado eliminado</p><button onClick={handleClick}>¿Quiere recuperarlo?</button></>);}export{UseState};
que buena ! así se podría dejar menos cantidad de código en un archivo
importReactfrom"react";constSECURITY_CODE="paradigma";functionUseState({ 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><h3>Delete{name}</h3><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>);}elseif(!!state.confirmed&&!state.deleted){return(<React.Fragment><p>¿Are you sure to deleteUseState?</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:'',})}}>RecoveryUseState,return back</button></React.Fragment>);}}export{UseState};
Este curso es el mejor, Juan David eres un excelente profesor. Bienvenido todos los curso que quiera lanzar, estaré en primera fila :)
Basicamente el estilo imperativo es como siempre hemos estado ecribiendo React?
Yep, estados imperativos independientes con useState.
Este curso ha sido maravilloso, aqui he comprendido mucho mas varios de los temas de los cursos anteriores que no me quedaban del todo claros. Gracias Profe Juan.
el value "" lo hubiera pueston en el if de if (state.value === SECURITY_CODE) {
setState({
...state,
error: false,
loading: false,
confirmed: true,
value: '',
});
donde aqui se esta volviendo si o si al estado inicial sin importar la respuesta pues ahorro dos pequeñas lineas de codigo.
Sii mas cursos de react 😍
¿Qué es más mantenible?
Usar varios if para retornar los estados (Como le hizo Juan)
Separar cada trozo al que se le debería de hacer render como componentes individuales
Usar composición para re usar una misma "maqueta"
Separar cada trozo al que se le debería de hacer render como componentes individuales
