/week7_day3

React forms, routing, lifecycle

Primary LanguageJavaScript

week7_day3

React forms

  • Los formularios en React (controlled components) reflejan el contenido del estado, manipulándolo a tiempo real frente a la interacción del usuario:
    • Cada input dispone de un atributo value conectado al estado.
    • Cada input dispone de un atributo onChange controlando el estado.
    • Cada input dispone de un atributo name para replicarlos como computed property names en el envío.
    • El formulario dispone de un atributo onSubmit para gestionar el envío.

Nombres de propiedades computados

  • Incluir el nombre de la propiedad de un objeto entre corchetes da lugar a un computed name property, sustituyendo el valor de la variable por el nombre de la propiedad del objeto:
    const keyName = 'age'
    const person = {[keyName]: 33}   // {age: 33}

React stateful components lifecycle

React Router

  • Envolver la App con BrowserRouter (index.js).
  • Crear en App.js un Switch de rutas con Route.
  • Cada link será un NavLink o Link de react-router-dom
  • Los params y las queries son accesibles a través de las props location, history y match. Estas props se envían a traves del componente Route.