Para poder realizar este taller ud debe:

1. Tener instalado node.js en su máquina
2. Haber realizado los talles de useState y useEffect

Para crear una aplicación nueva en React desde una terminal ejecute el comando npx create-react-app myforms, donde myforms corresponde al nombre de la aplicación. Esto creará una nueva carpeta denominada myforms.

Dentro de la carpeta ejecute el comando que instala bootstrap

npm install react-bootstrap bootstrap.

Modifique el archivo principal index.js de la siguiente forma

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
   <Container>
     <Row xs={1}>
       <Col>
        <App />
       </Col>
     </Row>
   </Container>
 </React.StrictMode>
);

En este archivo podemos ver que se importan las librerías React y ReactDOM; el estilo principal de la página (./index.css) y el componente principal App.

Ahora vamos a modificar el componente App.js para que cuente con los elementos que pertenecen a un formulario. Abre el archivo y modificarlo de la siguiente forma:

import './App.css';
import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';


function App() {

 return (
   <div>
     <h1>Ejemplo de formularios!</h1>
    
     <Form>
     <Form.Group className="mb-6" controlId="formBasicEmail">
       <Form.Label>Email address</Form.Label>
       <Form.Control type="email" placeholder="Enter email"/>
       <Form.Text className="text-muted">We'll never share your email with anyone else.</Form.Text>
     </Form.Group>

     <Form.Group className="mb-3" controlId="formBasicPassword">
       <Form.Label>Password</Form.Label>
       <Form.Control type="password" placeholder="Password" />
       <Form.Text className="text-muted">Your password should be have numbers and letters and should be at least 9 char long</Form.Text>
     </Form.Group>
     <Form.Group className="mb-3" controlId="formBasicCheckbox">
       <Form.Label>Favorite Class</Form.Label>
       <Form.Select>
         <option value="1">ISIS3710</option>
         <option value="2">Programación con tecnologias web</option>
       </Form.Select>
     </Form.Group>
     <Button variant="primary">
       Submit
     </Button>
   </Form>
   </div>
 );
}

export default App;

Guarde los cambios y vuelva al navegador donde podrá observar que el contenido de la página ha cambiado.

Empezaremos nuestro proyecto creando estados para todos los elementos que creamos. En esta oportunidad crearemos los estados usando objetos/json como valores.

El primer estado que crearemos será para guardar los valores de los inputs y el select. Este estado lo crearemos usando el siguiente código:

const [formValues, setFormValues] = useState({email:"", password:"", favClass:"1"})

Ahora crearemos los métodos que reaccionan a los cambios en los inputs, para esto crearemos los 3 métodos necesarios:

const handleEmailChange = ((e) => {
   setFormValues({...formValues, email: e.target.value})
 });

 const handlePasswordChange = ((e) => {
   setFormValues({...formValues, password: e.target.value})
 });

 const handleSelectChange = ((e) => {
   setFormValues({...formValues, favClass: e.target.value})
 });

Como podrá ver, el método setFormValues debe recibir un objeto json como parámetro, usaremos la sintaxis de los tres puntos para separar el estado formValues de manera automática, luego pasaremos como segundo parámetro el valor que queremos que se modifique.

Ahora debemos modificar el return de nuestro componente para que tenga en cuenta el manejo de los estados. Modifique los elementos del formulario para que muestren el estado y llamen a los métodos correspondientes cuando el usuario interactúe con la interfaz, su código debería verse de la siguiente forma:

return (
   <div>
     <h1>Ejemplo de formularios!</h1>
    
     <Form>
     <Form.Group className="mb-6" controlId="formBasicEmail">
       <Form.Label>Email address</Form.Label>
       <Form.Control type="email" placeholder="Enter email" onChange={handleEmailChange} value={formValues.email}/>
       { !validationStates.emailState && <Form.Text className="text-muted">We'll never share your email with anyone else.</Form.Text>}
     </Form.Group>

     <Form.Group className="mb-3" controlId="formBasicPassword">
       <Form.Label>Password</Form.Label>
       <Form.Control type="password" placeholder="Password" onChange={handlePasswordChange} value={formValues.password} />
       { !validationStates.passwordState && <Form.Text className="text-muted">Your password should be have numbers and letters and should be at least 9 char long</Form.Text>}
     </Form.Group>
     <Form.Group className="mb-3" controlId="formBasicCheckbox">
       <Form.Label>Favorite Class</Form.Label>
       <Form.Select onChange={handleSelectChange}>
         <option value="1">ISIS3710</option>
         <option value="2">Programación con tecnologias web</option>
       </Form.Select>
     </Form.Group>
     <Button variant="primary" onClick={clickSubmit}>
       Submit
     </Button>
   </Form>
   </div>
 );

Ahora crearemos el último paso para poder hacer el envio de los datos, reaccionar al submit del formulario:

const clickSubmit = (() => {
   //Call fetch
   alert(JSON.stringify(formValues))
 })

Modifique el return para que el botón de submit haga el llamado a este método.

Agregue validaciones a los campos de correo y contraseña, el correo se debe validar solo cuando se haga click en el boton submit, la contraseña se debe validar cada que el usuario escriba algo en el input. Se espera que su interfaz se vea de la siguiente forma al finalizar el reto.