Rick and Morty

Página hecha con React, la cual mediante una petición a la API devuelve un listado de personajes de la serie Rick y Morty, los cuales al pinchar en cada personaje muestran sus detalles.

Tecnologías utilizadas 🚀

Este proyecto está hecho con React, JavaScript, HTML5, preprocesador Gulp, Sass y CSS3.

Instalación 🔧

Para poner en marcha el proyecto abre una terminal en la carpeta raíz de tu repositorio e instala las dependencias locales ejecutando en la terminal el comando:

npm install

Para arrancar el proyecto, hay que ejecutar el comando siguiente en la consola:

npm start

Por último para publicar la página en GitHub Pages, ejecutamos el siguiente comando:

npm run docs

Proyecto

Este proyecto está divivido en componentes, la mayoría de clase. Cada uno representa una funcionalidad o componente. 1. App 2. CharacterList 3. CharacterCard 4. CharacterInfo 5. Header 6. Input filter

Por otro lado en la carpeta Data, tenemos el fetch con la petición a la API.

Algunos ejemplos de código, que merece la pena destacar serían:

renderCharacterInfo(props) {
    const routeId = parseInt(props.match.params.id);
    const size = this.state.characters.length;
    const selectedCharacter = this.state.characters.find(
      (character) => character.id === routeId
    );
    if (selectedCharacter === undefined) {
      return (
        <div className="go__home">
          <Link to="/">
            <img className="portal__home" src={Portal} alt="" />
          </Link>
          <div className="not__exist">
            <h2>The character you are looking for, doesn't exist.</h2>
            <div className="not-found">
              <img src={NotFound} alt="" />
            </div>
          </div>
        </div>
      );
    } else {
      return (
        <CharacterInfo
          character={selectedCharacter}
          size={size}
          charactersToShow={this.allFilters()}
        />
      );
    }
  }

const actualIndex = props.charactersToShow.indexOf(props.character);
const prevId =
  actualIndex > 0
    ? props.charactersToShow[actualIndex - 1].id
    : props.charactersToShow[actualIndex].id;
const nextId =
  actualIndex < props.charactersToShow.length - 1
    ? props.charactersToShow[actualIndex + 1].id
    : props.charactersToShow[actualIndex].id;

handleInput(ev) {
    const character = ev.currentTarget.value;
    this.props.filterCharacter(character);
  }
  handleSpecies(ev) {
    const specie = ev.currentTarget.value;
    this.props.filterSpecies(specie);
  }
  handleSubmit(ev) {
    ev.preventDefault();
  }

Y ya estaría!!

---

⌨️ Con ❤️ por SandraTapia 😊