Modern React with Redux - Sec 3

Sección 3: Communicating with Props

• Componentes
• Bloque de Comentarios como ejemplo
• Semantic UI como biblioteca de estilos

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  

• Extrayendo un bloque repetido como componente
• Utilidad faker-js para contenido ficticio

  import faker from '@faker-js/faker';
  faker.image.avatar()
  

• Componentes anidados
• Props de un componente

  const CommentDetail = (props) => {
    return (
      <a href="#" className="author">{props.author}</a>
    );
  }
  

• Tarjeta de aprobación como ejemplo
• Hijos de componentes

  <ApprovalCard>
    <CommentDetail
      ...
    />
  </ApprovalCard>
  

  const ApprovalCard = (props) => {
    return (
      <div class="content">
        {props.children}
      </div>
    );
  }