Contenido

Modern React with Redux - Sec 3

Building Content with JSX

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>
      );
    }