Creación de componentes

Clase 7 de 58 • Curso Profesional de React con Redux 2016

Resumen

Debemos pensar nuestra aplicación como un conjunto de componentes, que siguen la filosofía de separación de responsabilidades.

En los componentes de react, todo es JS

Para crear un componente podemos:

Crear un componente puro con una función
Usar class y extender desde React.Component
Usar class y extender desde React.PureComponent
Usar React.createClass()

Jhon Fredy Beltrán León

student•

Un PureComponent implementa un metodo para validar si los props y si el estado han cambiado y solo hace el render si cambian (Ventaja de rendimiento) aunque si internamente tiene elementos con un estado interno (como un componente que extiende component) no va a renderizar esa parte de la apliación (Util para el ultimo componente del arbol o en el caso que hayan solamente componentes puros)

Iván Medina

student•

Otra manera de agregar eventos sin tener que bindear this por cada handler, es usando los arrow functions de ES6, por ejemplo:

class MyComponent extends React.Component {
	handleClick = (e) => {
		// código de event handler
	}
	render() {
		return (
			<button onClick={this.handleClick}>
				Click me!
			</button>
		);
	}
}

Sergio Daniel Xalambrí

student•

Cierto 😃, pero eso solo funciona si activas un plugin específico de Babel para un feature que todavía no es parte de ECMAScript y solo es una propuesta 😦, se puede, la verdad que yo lo hago ya que es mucho más fácil, pero en este caso mostré como hacerlo con código 100% estándar y sin usar propuestas de ECMAScript (por eso mismo más adelante no uso decoradores por ejemplo 👍)

William Reaño Reyes

student•

class Hola extends React.Component no hay duda esta es la mejor manera de crear componentes

Markoz Peña Mendez

student•

Completamente de acuerdo su sintaxis es bastante sencilla de leer 😄

David Camacho

student•

Nando Alvarado Alvarado

student•

El método **Render **es el unico metodo obligatorio que tienen todos los componentes hechos con clases

Juan Carlos Correa Herrera

student•

Tres modos de hacer componentes básicos:

1.- Función pura (usando JS), que es como el ejemplo del vídeo anterior.

2.- Clase heredando de React.Component

MyComponent extends React.Component {}

Así accedes a mayores propiedades y métodos para el componente. Cuando usas un metodo de esta clase debes hacer “bind” para asociar tu método como método del componente (algo que puede ser confuso).

3.- Clase heredando de React.PureComponent

MyComponent extends React.PureComponent{}

Es como la anterior pero su diferencia es que se aplica cuando virtual dom detecta que hubo un cambio. La ventaja es el rendimiento. Su desventaja es que si es parte de un componente padre que virtual dom no detecta cambios, aunque los componentes hijos sí hayan tenido no se aplicarán ya que sigue el algoritmo de virtual dom.

4.- Usando un método createClass que pronto estará obsoleto, quizá sea útil conocerlo por si te topas en un futuro con él.

David Camacho

student•

React.createClass funciona de igual manera:
Tenemos un render () { … }
Tenemos un state, pero en este caso en vez de usar el constructor lo que hacemos es un getInitialState(){ … } el cual va a devolver un objeto, y ese objeto va a tener un count : 0
getInitialState(){
return {
count: 0
};
}
Entonces en vez de usar el constructor para inicializar estados, vamos a utilizar el metodo de getinitialState.

Cuando usamos clases no tenemos que hacer un bind de handleClick, porque createClass automaticamente hace bind de todos los metodos que definamos en nuestra clase.

Jose Meira

student•

      // Función pura
      function Hello(props) {
        const name = props.name;
        return (
          <h1 id="Title">
            Hola {name}
          </h1>
        );
      }

      // ... extends React.PureComponent
     // Problemas de renderizado con Component hijos, usar en el último component
      class MyComponent extends React.Component {

        constructor(props) {
          // Props a la clase padre
          super(props);

          // Elementos con posibilidad de cambio que necesitan bindeo
          this.state = {
            count: 0
          };

          // Bind para rerenderizar una propiedad interna del componente apuntando a this (el propio componente)
          this.handleClick = this.handleClick.bind(this);
          // Se recomienda realizar los bindeos en el constructor
        }

        handleClick() {
          // setState encapsula elementos que pueden cambiar de estado dentro del componente
          this.setState({
            count: this.state.count + 1
          });
        }

        // Método obligatorio
        render() {
          // Props está dentro del ámbito de la clase (this)
          const name = this.props.name;
          return (
            <h1 id="Title" onClick={this.handleClick}>
              Hola {name} {this.state.count}
            </h1>
          );

        }
      }

      // Próximo deprecated
      /*
      const newComponent = React.createClass({
        getInitialState() {
          return count: 0
        },
        // createClass hace un bindeo automático
        handleClick() {
          // setState encapsula elementos que pueden cambiar de estado dentro del componente
          this.setState({
            count: this.state.count + 1
          });
        },
        render() {
          // Props está dentro del ámbito de la clase (this)
          const name = this.props.name;
          return (
            <h1 id="Title" onClick={this.handleClick}>
              Hola {name} {this.state.count}
            </h1>
          );
        }
      });
      */
      
      const hello = React.createElement(Hello, {
        name: 'Platzi'
      });

      ReactDOM.render(
        <MyComponent name="Platzi" />,
        document.getElementById("app")
      );

Roberth Solís Solís

student•

Deberían probar React Developer Tools para firefox, también está para Chrome.

Sergio Daniel Xalambrí

student•

Más adelante en el curso vemos como usarlas
https://platzi.com/clases/react/concepto/creacion-del-proyecto/herramientas-de-desarrollo-de-react/material/

Roberth Solís Solís

student•

Oh, perfecto, gracias

Erick Vanegas

student•

Entiendo que usar super() dentro de constructor(), asi como recibir props como parámetros de constructor, no es requerido, salvo que se vaya a usar herencia con ese componente.

Sergio Daniel Xalambrí

student•

Es requerido siempre y cuando definas el método constructor.

Eso es porque por defecto ese método ya usa super y envía los props a Component o PureComponent, pero si definís el método a mano entonces estás obligado a usar super(props) y luego ya podés hacer cualquier otra cosa (bind, definir state, etc.).

Erick Vanegas

student•

Pero aún sin definir super(props) , podés definir states y binds y funcionan 😕

Gustavo Moreno

student•

La parte del this.handleClick.bind(this) no me quedo claro cual es la funcion del bind llamando la funcion, entiendo para que se usa pero no como funciona. Agradezco profundizar un poco mas o algun enlace.

Sergio Daniel Xalambrí

student•

Te recomiendo leer entender como funciona this en JavaScript.

Sobre que hicimos:
La función handleClick al usarla para escuchar el evento click del <h1> define el valor de this por el elemento del DOM (si haces console.log(this) verías el elemento del DOM en vez del componente de React), pero como necesitamos usar this.setState para poder cambiar el valor del estado necesitamos que this sea nuestro componente de React, para hacer eso tenemos que usar la función bind.

this.handleClick = this.handleClick.bind(this);

Lo que hace bind es devolver una nueva función (no la ejecuta, crea una función nueva) cuyo valor de this es lo que pasemos como argumento a bind.

function hola() {
	console.log(`Hola ${this}`);
}
const holaGustavo = hola.bind('Gustavo');
holaGustavo(); // 'Hola Gustavo'

Ahí hay un ejemplo simple, nuestra función hola al hacerle .bind('Gustavo') crea una nueva función la cual al ejecutar imprime Hola Gustavo. Podríamos haber hecho .bind('Sergio') y entonces hubiese mostrado en la consola Hola Sergio y así con cualquier valor que pasemos a bind.

De la misma forma la línea que agregamos en el constructor crea una nueva función handleClick cuyo this es el componente y no el elementos del DOM, así es posible usar this.setState.

Espero que te haya quedado más claro para que sirve, cualquier otra duda que tengas sobre this (o cualquier cosa en general) podés dejarla en las discusiones del curso 😄

Danilo Paez

student•

muchas gracias Sergio…muy clara tu explicacion… aqui coloco el enlace de Medium que recomiendas porque se ha roto

David Camacho

student•

Cuando utilizamos clases, los props se acceden mediante this : const name = ;
Hacer super(props) es obligatorio siempre que definamos el método constructor:
constructor(props){
super(props);
}
El metodo constructor nos permite acceder al this.state = { … } y en el podemos settear un objeto que va a ser el estado actual de la aplicación.
Cuando asignamos un escuchador de eventos en un elemento nativo del DOM o del virtual DOM de JSX, el valor de this se pisa por el elemento.

Gladys Yovana Mamani Camaticona

student•

que es bind??

Diego Forero

Team Platzi•

Se usa para enlazar eventos y lo que hace es crear una nueva función enlazada, en este caso se esta usando para que la propiedad this del método handleClick tenga enlazado el this del componente.

Puedes leer más sobre bind aquí

Jose Antonio Corona

student•

No se se si es algo tonta la pregunta, soy nuevo en esto de React pero que pasa cuando se cuelga un evento(no finaliza ) hay forma de detenerlo (cancelarlo) con otro evento.

Sergio Daniel Xalambrí

student•

Al igual con con eventos normales del DOM eso no ocurre, si la función que usas como handler tiene un problema normalmente va a mostrar un error directamente, si haces algo pesado o lento (como pedir datos por AJAX) eso igual es y debería ser asíncrono por lo que incluso si tarda mucho no va a colgar nuestra aplicación.

No deberías tener necesidad de detener un evento y si por alguna razón ocurre probablemente hay alguna tarea síncrona que debería ser asíncrona 😃

Ahora si necesitas hacer algo como cancelar la ejecución de algo asíncrono eso ya no tiene nada que ver con React y depende 100% de que estás haciendo y como, por ejemplo si querés cancelar una petición AJAX entonces debés usar el método abort de que posee el objeto request te devuelve new XMLHttpRequest, pero eso ya no tiene nada que ver con React.

Ivan Ortega Alba Ortega Alba

student•

¿Crear un componente extendiendo de PureComponent equivale a crearlo mediante una Arrow Fuction?
Con Arrow Function el código es mas escueto y elegante. Pero si con PureComponent impacta en el rendimiento; preferiría este.

// Component usando arrow function
const MyComponent = ({prop}) => <h1>Hola Mundo </h1>

// Component usando Pure Component
class MyComponent extends React.PureComponent {
render() {
  return <h1>Hola Mundo </h1>
}

Sergio Daniel Xalambrí

student•

No, crear un componente usando una arrow function es similar a usar una función normal.

Excepto por una cosa, las arrow function son funciones anónimas que se guardan en una constante, por lo que no tienen nombre, esto hace que durante el desarrollo al ver nuestros componentes en la React DevTools (que más adelante en el curso vemos como usar) vamos a ver muchos componentes llamados StatelessComponent lo que hace más difícil el debugging de nuestra aplicación.

Por eso aunque pueda verse mejor nuestro código al usar arrow function no recomiendo su uso, es mejor usar una función normal.

Sobre PureComponent, este es similar a extends Component pero usando el método shouldComponentUpdate, igual como expliqué en la clase si nuestro PureComponent renderiza otros Component que tengan un estado propio nunca vamos a ver los cambios de estos debido a que PureComponent no va a permitirles volver a hacer render. Si vas a usar PureComponent tené cuidado de donde y cuando.

En la gran mayoría de casos la mejora de rendimiento de PureComponent no es necesaria ya que React ya es suficientemente rápido como para que no se note tanto, hay que estar seguro de afecta antes de usarlo.

Jonathan Samines

student•

Solo para estar claro, te refieres a que si un componente que utiliza PureComponent tiene como hijo a otro componente con estado como hijo (Ya sea PureComponent o Component), entonces éste no se actualiza aún si su propio estado ha cambiado? Si es así, creo que esto no es del todo cierto.

Según la documentación de React sobre shouldComponentUpdate:

Returning false does not prevent child components from re-rendering when their state changes.

Un ejemplo práctico:

Juan Martin Cataldo

student•

Hola gente, tengo una duda: tengo un formulario armado como componente, con todos los inputs dentro de él. Como puedo obtener el form en una forma de array con todos los inputs que tengan su value distinto a null ? hasta ahora lo unico que logré es capturar el event.target.[input].value pero eso es individual, y yo lo que busco es capturar todos los elementos. Muchas gracias!

Gabriel Sánchez Villacorta

student•

Cuál es la diferencia entre return() y return{} ?

Sergio Daniel Xalambrí

student•

return {};
Eso devuelve un objeto vacío.

return ();
Eso devuelve una expresión.

Dentro de la expresión podemos colocar nuestro JSX o una condición o muchas otras cosas.

Augusto Gonzalez

student•

Alguien me podría explicar que es un modal? 😮

Camilo Arguello

student•

Piensa que un modal es como un pop-up u otra nueva sección que se despliega.

Rafael Villarreal

student•

Que funcieón cumple super ? y porque le pasamos los datos props? seria de gran ayuda si me sacaran de la duda. Gracias.

Sergio Daniel Xalambrí

student•

Llama al constructor de la clase Component y le pasa los props, es necesario cuando definimos un método constructor en nuestros componentes.

Cristian David Pulido Sarmiento

student•

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <main id="app"></main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.2/babel.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
  <script type="text/babel">
    function Hola(props) {
      const name = props.name;

      return (
        <h1 id="Title">
          Hola {name}
        </h1>
      );
    }

Forma 1: extends React.Component

 class MiComponente extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          count: 0,
        };

        this.handleClick = this.handleClick.bind(this);
      }

      handleClick() {
        this.setState({
          count: this.state.count + 1,
        });
      }

      render() {
        const name = this.props.name;
        return (
          <h1 id="Title" onClick={this.handleClick}>
            Hola {name} {this.state.count}
          </h1>
        );
      }
    }

Forma 2: extends React.PureComponent

class MiComponente extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          count: 0,
        };

        this.handleClick = this.handleClick.bind(this);
      }

      handleClick() {
        this.setState({
          count: this.state.count + 1,
        });
      }

      render() {
        const name = this.props.name;
        return (
          <h1 id="Title" onClick={this.handleClick}>
            Hola {name} {this.state.count}
          </h1>
        );
      }
    }

Forma 3: React.createClass

const MiComponente = React.createClass({
      getInitialState() {
        return {
          count: 0,
        };
      },
      handleClick() {
        this.setState({
          count: this.state.count + 1,
        });
      },
      render() {
        const name = this.props.name;
        return (
          <h1 id="Title" onClick={this.handleClick}>
            Hola {name} {this.state.count}
          </h1>
        );
      }
    });

continuación…

 ReactDOM.render(
      <MiComponente name="Platzi" />,
      document.getElementById('app')
    );
  </script>
</body>

</html>

Leonardo Pineda

student•

Otra forma de hacer un bind() en el método render es usando arrow funtions por ejemplo:

render(){
 return (
    <h1 id="title">
     hola {this.props.name}-{this.state.count}<br/>
      <button onClick= {() => this.handleClick()}>Incrementa</button>                    
     </h1>
   )
}

Sergio Daniel Xalambrí

student•

Eso causa lo mismo que hacer el this.handleClick.bind(this), estas definiendo una función nueva cada vez que haces el render, lo que a largo plazo significa que se crean un montón de funciones, que se usan una sola vez.

Lo mejor es hacer el bind en el constructor o si no te preocupa usar funciones experimentales es posible agregar a Babel un preset para soportar atributos de clases y así definir métodos con arrow functions.

class App extends Component {
	handleClick = event => {
		// haces algo
	}

	render() {
		return (
			<div onClick={this.handleClick}>hola mundo</div>
		);
	}
}

Leonardo Pineda

student•

sergiodxa, muchas gracias por tu oportuna recomendación probaré el preset de atributos de clases que recomiendas.

Jorge Mario Carrillo Lopez

student•

Hola Sergio - Quería preguntar si:

Puedo Dejar a un this.state = { Null } (Pues en realidad quiero crear el Componente, pero solo quiero reutilizarlo en otras partes de la APP sin darle otra funcionalidad o estado)
Cuando quiera llamar este componente a cualquier parte de la App tengo que importarlo: import Navgeneral from “./componentes/Navgeneral?” o {} o ambos?

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './src/componentes/Navgeneral.css';
import { Link } from "react-router";

class Navgeneral extends React.Component {
	constructor(props){
		super(props);

		this.state = {
			count: null;
		}
	}
  	render() {
  		const name = this.props.name;
    	return (
	        <div className="App-nav">
	          <nav>
	            <ul>
	              <li>
	                <Link to="./Login"><i className="fa fa-user" aria-hidden="true"></i> L</Link></li>
	              <li>
	                <Link to="./Cursos"><i className="fa fa-university" aria-hidden="true"></i> C</Link></li>
	              <li>
	                <Link to="./Blog"><i className="fa fa-rss" aria-hidden="true"></i> B</Link></li>         
	              <li>
	                <Link to="./Contacto"><i className="fa fa-envelope" aria-hidden="true"></i> C</Link></li>
	            </ul>
	          </nav>
	        </div>
	    	);
	  	}
	}
ReactDOM.render(
  <Navgeneral />,
  document.getElementById('root')
);
export default Navgeneral;

Creación de componentes

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS