Componentes y propiedades

Los componentes permiten seprarar la interfaz de usuario (IU) en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.

Componentes funcionales y de clase

La forma mas sencilla de construir un componente de React es mediante una funcion de JS

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Tambien se puede utilizar una clase de ES6 para definir un componente:

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

Renderizando un componente

Los elementos de React pueden represenar etiquetas del DOM

const element = <div />;

pero tambien pueden representar componentes definidos por el usario:

const element = <Welcome name="Sara" />;

Cuando React detecta que estamos utilizando un elementos con componentes definidos por el usuario, pasa atributos e hijos JSX a este componente como un solo objeto, denominado “props”.

//componente definido por el usuario
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
//elemento de React basado en el componente definido anteriormente
//este tiene el atributo y valor (tambien podrian estar los hijos del elemento)
//todos estos son los considerados objeto props que seran renderizados cuando llamemos al elemento
const element = <Welcome name="Sara" />;
//y aca nada, se renderiza
ReactDOM.render(
  element,
  document.getElementById('root')
);

Recapitulemos lo que sucede en este ejemplo:

Composicion de componentes

Los componentes pueden referirse a otros componentes en su salida. Esto nos permite utilizar la misma abstraccion de componente para cualquier nivel de detalle.

Botones, cuadros de dialogo, formularios. Todos son expresados comunmente como componentes en React.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Extraccion de componentes

Considera el dividir los componentes en otros mas pequeños, donde sea posible, por ejemplo:

Las props son de solo lectura

Ya sea declarando un componente como funcion o como clase nunca debe modificar sus props, osea la salida de la funcion no debe modificar la entrada de esta.

Ej:

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

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

Esta es considerada una regla de React, los componentes deben de actuar como funciones puras, para saldar esta regla en paginas dinamicas donde los valores pueden cambiar con el tiempo, se introduce el concepto de “estado”. Gracias al estado los componentes pueden cambiar su salida segun se requiera, dependiendo de la interaccion del usuario, respuesta de red, etc; sin violar esta regla.

Bibliografia

Glosario de palabras

Buscar conceptos