# 147: Iniciar un formulario de comentarios basado en React - Trucos CSS

Anonim

En este screencast de emparejamiento, Sarah Drasner se une a mí y me guía a través de algunos de mis primeros aprendizajes de React. Abordamos algunas funciones de estilo del “mundo real”: un formulario de comentario.

Esto resultó ser una interfaz de usuario bastante útil para trabajar, ya que requería muchas cosas bastante fundamentales para React (o al menos, me parece a mí). Por ejemplo, una "Aplicación" maestra que se ocupa de state(nuestro gran "estado" son los comentarios en sí) y los componentes que se ocupan de la representación de la vista (por ejemplo, el formulario de comentarios es un componente y cada comentario es un componente).

Luego nos metimos en muchas cosas más pequeñas de React, pero también grandes cosas para entender en React-land, como:

  • props- una forma de pasar datos entre componentes. Parecen atributos HTML cuando los envía y llegan como un objeto en forma de this.props.
  • refs - cómo extrae datos del elemento de formulario que creamos.
  • keys- una forma de identificar de forma única un componente cuando se repite. Estamos repitiendo comentarios aquí (puede haber varios comentarios), por lo que si tuviéramos una funcionalidad que pudiera cambiar cualquiera de ellos, tener una clave es lo que hace que React sea eficiente (solo puede reemplazar ese único comentario en lugar de todos) .

¡Y mucho más!

Aquí está la demostración en la que trabajamos:

Vea el formulario de Pen Iniciando un comentario impulsado por React de Chris Coyier (@chriscoyier) en CodePen.

¿Cómo subes de nivel tu aprendizaje de React más allá de esto? Empieza aqui.