Skip to content

Latest commit

 

History

History
98 lines (66 loc) · 3.51 KB

props.md

File metadata and controls

98 lines (66 loc) · 3.51 KB
Raw

Componentes y propiedades

Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.

Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias (llamadas “props”) y devuelven a React elementos que describen lo que debe aparecer en la pantalla.

Componente funcionales

La forma más sencilla de definir un componente es escribir una función de JavaScript:

const Welcome = (props) => <h1>Hola, {props.name}</h1>

Esta función es un componente de React válido porque acepta un solo argumento de objeto “props” (que proviene de propiedades) con datos y devuelve un elemento de React. Llamamos a dichos componentes “funcionales” porque literalmente son funciones JavaScript.

Componentes de clase

También puedes utilizar una clase de ES6 para definir un componente:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Las clases tienen algunas características adicionales que veremos en las próximas secciones. Hasta entonces, usaremos componentes funcionales por su brevedad.

Accediendo a los hijos

Se puede acceder a los hijos de un componente a través de las props usando props.children

Restricciones

Las props son de solo lectura. Ya sea que declares un componente como una función o como una clase, este nunca debe modificar sus props. Considera esta función sum :

function sum(a, b) {
  return a + b
}

Tales funciones son llamadas “puras” por que no tratan de cambiar sus entradas, y siempre devuelven el mismo resultado para las mismas entradas.

En contraste, esta función es impura por que cambia su propia entrada:

function withdraw(account, amount) {
  account.total -= amount
}

React es bastante flexible pero tiene una sola regla estricta:

Todos los componentes de React deben actuar como funciones puras con respecto a sus props.

¿Entonces como cambio dinámicamente lo que muestra un componente?

En la siguiente sección, introduciremos un nuevo concepto de “estado”. El estado le permite a los componentes de React cambiar su salida a lo largo del tiempo en respuesta a acciones del usuario, respuestas de red y cualquier otra cosa, sin violar esta regla.

Ejercicios:

  1. Dado el siguiente código HTML:
<h1>Necesito partir en componentes todo esto</h1>
<p>Para ello puedo usar React que me permitirá poder reutilizar todos esos componentes. Para ello tengo que:</p>
<ul>
  <li>Observar el HTML</li>
  <li>Pensar en como puedo extraer cada trozo en componentes</li>
  <li>Usarlos en React</li>
</ul>

<a href="https://reactjs.org/">React Docs</a>

Debemos crear los siguientes componentes y que se muestre en React como debería:

  • Title
  • Text
  • List
  • ListItem
  • Link: debemos poder elegir por la prop openInNewTab si queremos que se abra en una nueva ventana o no.

  1. Crear un componente llamado Loading que si su prop show es es verdadera muestre sus hijos. Si es falsa muestre un mensaje: Loading.... Utilizar como hijos el ejercicio anterior.

  2. Crear un componente button y pasarle por props una función (() => console.log('holi')). Añadirla al onClick del botón.

  3. Crear un componente LogProps que renderize una etiqueta p y saque por consola todas las props que se le pasen, que deben ser:

  • colors: array
  • isActive: boolean
  • callBack: function
  • numberOfColors: number
  • name: string

<- Volver al índice