Listas de componentes

Clase 17 de 37 • Curso de React.js 2019

Contenido del curso

Introducción a React.js

Fundamentos

Creación y diseño de componentes

React Router

Component Lifecycle

Llamadas a un API

Mejorando la UI

Conclusion

37
Conclusión
02:51 min

Tomar examen

Juan Sebastian Higuita Riascos

student•

Algo que podrian implementar en caso de querer añadir mas Badges es crear un .json que contenga toda la data, y luego hacer el import dentro de Badges

data.json

{
  "data": [
    {
      "id": "2de30c42-9deb-40fc-a41f-05e62b5939a7",
      "firstName": "Freda",
      "lastName": "Grady",
      "email": "Leann_Berge@gmail.com",
      "jobTitle": "Legacy Brand Director",
      "twitter": "FredaGrady22221-7573",
      "avatarUrl": "https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon"
    },
    {
      "id": "d00d3614-101a-44ca-b6c2-0be075aeed3d",
      "firstName": "Major",
      "lastName": "Rodriguez",
      "email": "Ilene66@hotmail.com",
      "jobTitle": "Human Research Architect",
      "twitter": "ajorRodriguez61545",
      "avatarUrl": "https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon"
    },
    {
      "id": "63c03386-33a2-4512-9ac1-354ad7bec5e9",
      "firstName": "Daphney",
      "lastName": "Torphy",
      "email": "Ron61@hotmail.com",
      "jobTitle": "National Markets Officer",
      "twitter": "DaphneyTorphy96105",
      "avatarUrl": "https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon"
    }
  ]
}

Badges.js

import data from "./data.json";
import "./styles/Badges.css";
import confLogo from "../images/badge-header.svg";

class Badges extends Component {
  state = {
    data: [data.data]
  };

  render() {
    return (
      <div>
        <Navbar />

        <div className="Badges">
          <div className="Badges__hero">
            <div className="Badges__container">
              <img
                className="Badges_conf-logo"
                src={confLogo}
                alt="Conf Logo"
              />
            </div>
          </div>
        </div>

        <div className="Badge__container">
          <div className="Badges__buttons">
            <a href="/badges/new" className="btn btn-primary">
              New Badge
            </a>
          </div>

          <div className="Badges__list">
            <div className="Badges__container">
              <BadgesList badges={this.state.data} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

BadgesList.js

class BadgesList extends Component {
  render() {
    const dataObj = Object.values(this.props.badges.data)[0];

    return (
      <ul className="list-unstyled">
        {dataObj.map(badge => {
          return (
            <li key={badge.id}>
              <p>
                {badge.firstName}
                {badge.lastName}
              </p>
            </li>
          );
        })}
      </ul>
    );
  }
}

Para poder mapear el .json primero deben de obtener los "values", pueden leer acerca de esto aqui:

David Antonio Garcia Saaib

student•

yo cambié data: [data.data] por ... data y funcionó por lo menos en la primera parte

Jimmy Buriticá Londoño

student•

Muy interesante esta opción.

Listas de componentes

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado