Estructura y Estilos de Carousel y Carousel Item

Clase 18 de 29 • Curso Práctico de React JS 2019

Alexander Rayo

student•

❤️ En vsCode existe un plugin llamado HTML to JSX. Muy bueno para resolver de errores de cierres de etiquetas, renombrar el atributo class, etc. … En fin, te puede ahorrar mucho tiempo. 😃

Wilson Delgado

student•

Gracias!! Super aporte

Rodrigo Reyes

student•

esta muy cool, lo bajare

David Guerrero Diaz

student•

Para los scrollbars, la solucion para que no aparezcan:

.carousel::-webkit-scrollbar{
     display: none;
{

Beto Toro

student•

Gracias 🙏🏼

Edmundo Salamanca Villa

student•

Gracias!

Jonatan Ariste

student•

Para evitar ese div que hace Wrapper podemos usar React.Fragment. El para incluir muchas etiquetas html dentro del return usa un div como Wrapper y eso genera siempre un nodo mas html para cada componente con React.Fragment evitamos eso :) Quedaria asi:

import React from "react";

const Carousel = ({ children }) => (
  <React.Fragment>
    <section className="carousel">
      <div className="carousel__container">{children}</div>
    </section>
  </React.Fragment>
);

export default Carousel;```

Alejandro González Reyes

student•

La configuración del Linter para este curso, marca incompatibilidad con dichas etiquetas. Recomiendo usar

<></>

José Tuzinkievicz

student•

Muy cierto lo del fragment, Richard Kauffman lo explica muy bien en el curso de React.js.

Beto Martinez

student•

Oscar lo explica de una manera increible, la metodologia BEM se nota exageradamente como ayuda a identificar cada uno de los componentes, excelente clase

Jimmy Buriticá Londoño

student•

Tienes razón, si no fuera por BEM no sería tan fácil hacer estas particiones.

Jhon Manuel Angulo Moncada

student•

Revisando el código para ver por que salia el scroll es a causa del section en el componente Carousel,

pueden quitar el section y todo quedara bien.

import React from 'react'
import '../assets/styles/components/Carousel.scss'

const Carousel = ({ children }) =&gt; (
    &lt;div className=&quot;carousel__container&quot;&gt;
      {children}
    &lt;/div&gt;
)

export default Carousel

Juan Pablo Corredor Rodriguez

student•

Hola use tu solución y me funciono, pero mi pregunta es que pasa con esos estilos que estan asignados la clase carousel.

Jhon Manuel Angulo Moncada

student•

según recuerdo siguen trabajando normal solo que ahora quedan en el div y se llaman es por la clase

Axlin Miranda

student•

Excelente clase, estoy trabajando con react-bootstrap no ha sido fácil pero va tomando casi el mismo resultado

Paolo Donato Torregrosa Navarro

student•

Para los que usamos sistemas diferentes a Mac y tenemos el problema de las scrollbars en el carousel aquí esta la solucion:

/*Esto dentro de los estilos de Carousel*/
::-webkit-scrollbar{
	display: none;
}

Roso Peñaranda

student•

Muchas gracias Paolo, en mi caso uso firefox y no me funciono, pero me ayudaste con el nombre de la propiedad y buscando en el MDN de morzilla consegui la propiedad scrollbar-width, es suficiente agregarla a la clase carousel, quedaria algo asi:

.carousel {
  overflow: scroll;
  padding-left: 30px;
  width: 100%;
  position: relative;
  scrollbar-width: none;
}

Roso Peñaranda

student•

Esta propiedad solo funciona para las ultimas versiones de firefox, asi que el estilo que estas comentando tambien debe ser utilizado.

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

Ricardo Celis

teacher•

Puedes obtener los archivos del curso en el siguiente enlace: https://github.com/platzi/escuela-js/tree/feature/react

Jhon Carlos Romo Ramirez

student•

Gracias por compartir la información Ricardo.

Britney Hadassa Ascencio Henriquez

student•

Thanks

Luis Lira

student•

Yo tuve un problema con los estilos, aunque los pasará tal como los tengo del ese curso el scroll no me funcionaba aunque tenga la propiedad de "overflow-x: scroll" se hacía wrap y bajaba los items

Mi solución, agregar esta dos propiedades en el CSS:

.carousel__container {
    display: flex;
}

.carousel-item {
    flex-shrink: 0;
}

Cynthia Jazmín Romero

student•

¡Muchas gracias! Esto solucionó mi problema

Cristhian Daza

student•

Carousel.scss

.carousel {
	overflow: scroll;
	padding-left: 30px;
	width: 100%;
  position: relative;

  &__container {
    transition: 450ms -webkit-transform;
    transition: 450ms transform;
    transition: 450ms transform, 450ms -webkit-transform;
    font-size: 0;
    white-space: nowrap;
    margin: 70px 0px;
    padding-bottom: 10px;

    &:hover {
      .carousel-item {
        opacity: 0.3;

        &:hover {
          -webkit-transform: scale(1.5);
          transform: scale(1.5);
          opacity: 1;
        }
      }
    }
  }

}

CarouselItem.scss

.carousel-item {
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	display: inline-block;
	width: 200px;
	height: 250px;
	margin-right: 10px;
	font-size: 20px;
	cursor: pointer;
	transition: 450ms all;
	-webkit-transform-origin: center left;
  transform-origin: center left;

	&:hover {
		~ {
			.carousel-item {
				-webkit-transform: translate3d(100px, 0, 0);
				transform: translate3d(100px, 0, 0);
			}
		}
		.carousel-item__details {
			opacity: 1;
		}
  }

  &__img {
    width: 200px;
    height: 250px;
    -o-object-fit: cover;
    object-fit: cover;
  }

  &__details {
    align-items: flex-start;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    bottom: 0;
    display: flex;
    font-size: 10px;
    flex-direction: column;
    justify-content: flex-end;
    left: 0;
    opacity: 0;
    transition: 450ms opacity;
    padding: 10px;
    position: absolute;
    right: 0;
    top: 0;

    &--img {
      width: 20px;
    }

    &--title {
      color: white;
      margin: 5px 0px 0px 0px;
    }

    &--subtitle {
      color: white;
      font-size: 8px;
      margin: 3px 0px;
    }
  }
}

Jhon Alexander Romero Gonzaga

student•

Para los que deseen trabajar con emmet en VSCode deben irse a configuraciones y luego irse al archivo json. File -> Preferences -> Settings y busquen el archivo settings.json y agreguen lo siguiente:

estando en el archivo json, pegamos el siguiente codigo

"emmet.includeLanguages": {
        "javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true

y luego ya solo falta reiniciar el VSCode, y ya pueden trabajar con emmet

Agustín Lanusse

student•

En React es un estándar nombrar a los componentes en ++singular++, en vez de Categories lo mejor sería llamarlo Category.

Dimas Antonio Mendoza Lozano

student•

Pregunta.... La palabra

{Children}```


Es una palabra reservada?

Miguel Torres

student•

Hola, @dimasmendoza. :D

En JavaScript Children no es una palabra reservada. Puedes usarla.

Andres David Sanchez

student•

No lo es, es solo el nombre que se le asigno al componente que se instanciara dentro de este.

Podemos llamarle {hijos} o como queramos

Miguel Angel Reyes Moreno

student•

Ya que un elemento tendrá hijos es importante pasar el props de 'children'.

const Categories = ({ children }) => (
  <div className='categories'>
    <h3 className='categories__title'>Mi lista</h4>
    {children}
  </div>
);

Así, al momento de escribir el componente en App.jsx este elemento podrá tener otros elementos dentro de él.

Lo mismo pasa aquí:

const Carousel = ({ children }) => (
  <section className='carousel'>
    <div className='carousel__container'>
      { children }
    </div>
  </section>
);

Joel Chaccha Cóndor

student•

Como ven esta todo funcionando bien pero no aparece el carousel... estoy seguro que debe ser una tonteria pero no doy con ella aun.

Lucia Pereda

student•

Me pasa lo mismo , lo solucionaste ?

Jimmy Alexander Castiblanco Bustos

student•

Hola revisa el children puede ser un typo depronto uno esta en mayúscula y el otro en minúscula, suele pasar que te lo corrige el editor a mi me paso y me toco ver mi codigo poco a poco espero te sirva saludos!!.

Alexander De Abreu

student•

Tengo una pequeña duda de novato.. al incorporar los estilos del componente Carousel se me hace visible el overflow (tanto el X como el Y) pero viendo el curso noto que no aparece eso.. adjunto una imagen para observar el error.. ¿Es debido al navegador.. debido al style que posee overflow: scroll; o que pudiera ser? Cabe destacar que uso Google chrome https://imgur.com/a/pEc0qJS

JOSE ARMANDO QUIÑONEZ

student•

Misma duda

Steven Benjamín Diaz Flores

student•

Me temo que puede ser algun estilo que tiene chrome para windows en modo escritorio. También me pasa pero si me voy a ver como otro dispositivo la vista cambia y no se observan esos scroll.

Cesar Pelaez

student•

Tengo un duda hice todo tal cual esta en el vídeo, pero no se ven los estilos asignados a los CarouselItems, como por ejemplo, cuando paso el cursor por encima de uno de ellos no se agranda ni se opacan los otros

Oscar Barajas Tavares

Team Platzi•

Cesar, si tienes un repositorio con tu proyecto puedo darle seguimiento y entender donde esta el error y ayudarte a solucionarlo.

Cesar Pelaez

student•

gndx, muchas gracias, revisando mi codigo, me di cuenta que estaba situando el { children } por fuera de uno de los div de carouselContainer y por esa razon no tomaba los estilos.

Jonathan Antonio González

student•

Para los que no se les ve el CategoriesItem

import React from 'react';
import '../assets/styles/components/Categories.scss';

const Categories = ({ title, children }) => (
  <div className="Categories">
    <h3 className="categories__title">{title}</h3>
    {children}
  </div>
);

export default Categories;```

Ángel David Vargas Hernández

student•

MUCHISIMAS GRACIAS! Porqué el title se manda por parametro? Si me pudieras explicar te lo agradecería mucho más.

Jorge Joel Anaya Moreno

student•

Quiero pensar que el enviar el titulo por parámetro es para la reutilizacion del modulo. ¿Es así?

Adrian Rodriguez

student•

Alguien saber por qué en Carousel.jsx deja las clases de los elementos como "class" en lugar de "className". Si le funciona todo así, ¿por qué es necesario que esté utilizando className en las demás ?

Juan Camilo Mejía Huguett

student•

Quizas se le olvido cambiar a "className" react lo podrá renderizar pero aparecera un warning en la consolo del navegador como este:

Warning: Invalid DOM property `class`. Did you mean `className`?

Adrian Rodriguez

student•

Sí, ya le saltó el warning unas clases después, gracias!

Laura Albarracín

student•

Hola tengo el siguiente error : 1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack 5.24.3 compiled with 2 errors in 189 ms

Luis Lira

student•

Hola! ¿Podrías mostrarnos tu código por favor? En el curso se uso la versión 4 de Webpack y ahora con la 5 algunas cosas han cambiado.

import React from "react";

const Carousel = ({ children }) => (
  <React.Fragment>
    <section className="carousel">
      <div className="carousel__container">{children}</div>
    </section>
  </React.Fragment>
);

export default Carousel;```

import React from 'react'
import '../assets/styles/components/Carousel.scss'

const Carousel = ({ children }) =&gt; (
    &lt;div className=&quot;carousel__container&quot;&gt;
      {children}
    &lt;/div&gt;
)

export default Carousel

.carousel {
	overflow: scroll;
	padding-left: 30px;
	width: 100%;
  position: relative;

  &__container {
    transition: 450ms -webkit-transform;
    transition: 450ms transform;
    transition: 450ms transform, 450ms -webkit-transform;
    font-size: 0;
    white-space: nowrap;
    margin: 70px 0px;
    padding-bottom: 10px;

    &:hover {
      .carousel-item {
        opacity: 0.3;

        &:hover {
          -webkit-transform: scale(1.5);
          transform: scale(1.5);
          opacity: 1;
        }
      }
    }
  }

}

.carousel-item {
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	display: inline-block;
	width: 200px;
	height: 250px;
	margin-right: 10px;
	font-size: 20px;
	cursor: pointer;
	transition: 450ms all;
	-webkit-transform-origin: center left;
  transform-origin: center left;

	&:hover {
		~ {
			.carousel-item {
				-webkit-transform: translate3d(100px, 0, 0);
				transform: translate3d(100px, 0, 0);
			}
		}
		.carousel-item__details {
			opacity: 1;
		}
  }

  &__img {
    width: 200px;
    height: 250px;
    -o-object-fit: cover;
    object-fit: cover;
  }

  &__details {
    align-items: flex-start;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    bottom: 0;
    display: flex;
    font-size: 10px;
    flex-direction: column;
    justify-content: flex-end;
    left: 0;
    opacity: 0;
    transition: 450ms opacity;
    padding: 10px;
    position: absolute;
    right: 0;
    top: 0;

    &--img {
      width: 20px;
    }

    &--title {
      color: white;
      margin: 5px 0px 0px 0px;
    }

    &--subtitle {
      color: white;
      font-size: 8px;
      margin: 3px 0px;
    }
  }
}

import React from 'react';
import '../assets/styles/components/Categories.scss';

const Categories = ({ title, children }) => (
  <div className="Categories">
    <h3 className="categories__title">{title}</h3>
    {children}
  </div>
);

export default Categories;```

Estructura y Estilos de Carousel y Carousel Item

¿Qué es React JS?

Aprende qué es React.js

DOM, Virtual DOM y React DOM

Crear una Aplicación con React JS

Create React App y Tipos de Componentes

JSX: JavaScript + HTML

Props: Comunicación entre Componentes

¿Qué son los métodos del ciclo vida?

State - Events

Instalación y configuración de entorno

Agregando compatibilidad con todos los navegadores usando Babel

Configurar un entorno de trabajo profesional

Webpack: Empaquetando nuestros módulos

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Estilos con SASS

Configuración final: ESLint y Git Ignore

Arquitectura de componentes para Platzi Video

Llevar un diseño de HTML y CSS a React

Estructura del Header

Estilos del Header

Estructura y Estilos del Buscador

Estructura y Estilos de Carousel y Carousel Item

Estructura y Estilos del Footer

Añadiendo imágenes con Webpack

Imports, Variables y Fuentes de Google en Sass

Uso de una API de desarrollo (Fake API)

Creando una Fake API

React Hooks: useEffect y useState

Lectura React Hooks

Conectando la información de la API

Custom Hooks

PropTypes

Usar React Tools

Debuggeando React con React DevTools

Prepárate para lo que sigue