Validaciones de UI

Clase 27 de 29 • Curso de React Router 5 y Redux

David Camacho

student•

Estilos del botón:

.button {
  background-color: rgba(255, 255, 255, .3);
  border: none;
  border-radius: 25px;
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Muli', sans-serif;
  height: 50px;
  letter-spacing: 1px;
  margin: 10px 0;
}

Carlos Spagnoletti

student•

Gracias por el aporte

Ginnio Sarabia

student•

Diego Camino Reinoso

student•

PARA TODOS AQUELLOS QUE NO SABEN EN QUE MOMENTO HIZO EL CAMBIO DEL HEADER

Eso también explica porque en el video anterior vi la etiqueta <Header /> encima de <Search isHome/> en Home.jsx

AQUÍ ESTÁ EL COMMIT EN EL QUE SUCEDE ESO

https://github.com/platzi/PlatziVideo/commit/b88411eac8dfd31df54f2f10fb681f9e6119d600

No entiendo porque no hay clase de aquello?

Juan Jose Vega

student•

Queeee Es verdad, tal vez porque así se hizo en el curso de React de la escuela, pero podría haberlo mostrado. Saca mucho de contexto

Luis Carlos Kristen Ospitia

student•

complemento, que en el commit hace falta agregar lo siguiente:

en el Register.jsx

import Header from '../components/Header';

despues del return agregar también

&lt;Header isLogin /&gt;

Jorge Moreno Díaz

student•

Mi solución para poner los estilos adecuados al Header en la página de Login y Register fue usar withRouter de "react-router-dom" para de esta manera obtener la ubicación del path en el que nos encontramos y según el path poner el estilo adecuado.

En el componente de Layout:

const Layout = withRouter(({ children, location }) => (
  <div className="app">
    <Header location={location} />
    {children}
    <Footer />
  </div>
));

En el componente Header:

<header
      className={
        location.pathname === "/login" || location.pathname === "/register"
          ? "header header__login-register"
          : "header"
      }
>

Wilson Marino Pablo Mendez

student•

Buen aporte!!

Ivan Santiago

student•

¡Muy buena solución!

Favio Sauto

student•

Para instalar classnames solo necesitan usar el comando

npm install classnames --save

David Behar

student•

Recuerden que es necesario importar classnames con

npm install --save classnames

Diego Camino Reinoso

student•

Me fascina el curso, cada día estoy más enamorado de React pero quisiera agregar algo y es que a lo largo del curso el profesor Oscar no pronuncia correctamente las palabras en inglés y me parece que es vítal en el mundo de la tecnología, no se pronuncia ainput, sino input como suena, y así hay otras palabras que pude notar que las pronuncia mal como: output o public y otras más que está de más mencionarlas, solo como consejo por favor

Franklin Pineda

student•

El pronunciamiento de las palabras es lo de menos porque al fin no estamos en un curso de Ingles, lo importante es el conocimiento y como si imparte, y pienso que aqui no todos hablamos ingles perfecto hay estudiantes como yo que sabemos poco Ingles

Andrés Campuzano Garzón

student•

@pndafran El inglés es demasiado importante. Si sabes poco Inglés, ya sabes que priorizar en tus estudios. Saludos.

David Vargas Domínguez

student•

Use entidades para agregar ese pequeño espacio en el login.

&lt;p className='login__container--register'&gt;
    No tienes ninguna cuenta, &amp;thinsp;
    &lt;Link to='register'&gt;Regístrate&lt;/Link&gt;
&lt;/p&gt;

Jhon Manuel Angulo Moncada

student•

muy bueno lo de la entidad, andaba buscando algo así para casos mas complejos. pero en el caso de este ejercicio solo había que poner un espacio antes del Registrarse y ya =).

&lt;p className=&quot;login__container--register&quot;&gt;No tienes ninguna cuenta,
    &lt;Link to=&quot;/register&quot; &gt; Regístrate&lt;/Link&gt;
&lt;/p&gt;

Jose Colmenares

student•

Alguien me recuerda cuando utilizamos import classNames from 'classnames', no recuerdo haberlo utilizado antes

Jesús Miguel Quinto Teran

student•

**No en este curso. **

para instalar classname: npm install classnames --save

uso: classname te permite unir clases css dinamicamente.

ejemplos:

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

Para mas información: https://www.npmjs.com/package/classnames

Seba Cardoso

student•

Con poner el border-radius: 50% es suficiente para que se redondee. El espacio se puede arreglar con un margin, padding o agregando esto al jsx

<p className = "login__container--register" > No tienes ninguna cuenta &nbsp;

Carlos Junior Carpio Carnero

student•

hacer el npm install classnames --save antes de correr!

jorge llanque

student•

&nbsp;

Iair Poloniecki

student•

Tampoco entiendo de dónde sale el isHome, en qué clase se vio eso?

Juan Castro

teacher•

Solo debes agregar la propiedad isHome al componente <Search /> en el archivo containers/Home.jsx: https://github.com/platzi/PlatziVideo/commit/a98ab28dee0d5b929c43fd3abdd86043eb59b74a#diff-d1bc95afe81aa0d5125ba66567b63455. :wink:

Juan Jose Vega

student•

Y <Header />

Steven Benjamín Diaz Flores

student•

Para arreglar el color del header lo que hice fue crear una validación para verificar en que pagina nos encontramos, y dependiendo de eso mostrar el header morado o verde:

...
let headerClass = ''
    if (path === '/login' || path === '/register') {
        headerClass = 'header__green'
    } else if (path === '/') {
        headerClass = 'header'
    }
    else {
        headerClass = 'd-none'
    }

    return (
        <header className={headerClass}>
            <Link to="/">
                <img className="header__img" src={logo} alt="Platzi Video" />
            </Link>
...

Lo que hago es consultar desde el estado una variable path, la que me indica en que pagina me encuentro actualmente, ya que no puedo acceder al location.pathname desde header, para que esto funcione hice un action y un reducer que actualice el pathname actual, y llamarlo en cada pagina en la que navega, no se si sea la solucion más eficaz pero me ayudo a practicar un estado global de mi sitio web utilizando redux

Aram Ceballos

student•

Tambien puedes instalar el paquete path de npm y te ahorras el tener que hacer un reducer y un action creator

Oscar Barajas Tavares

Team Platzi•

Me gusta la solución, lo que nos propone Aram es interesante, compartan sus soluciones.

Cristian Caraballo

student•

Error de compilacion.. ¿que es classnames?

ERROR in ./src/components/Search.jsx
Module not found: Error: Can't resolve 'classnames' in '/home/leonardo/Documentos/GitHub/Platzi/curso practico de React/PlatziVideo/src/components'
 @ ./src/components/Search.jsx 2:0-36 7:19-29
 @ ./src/containers/Home.jsx
 @ ./src/routes/App.js
 @ ./src/index.js

Joel Bello

student•

npm install classnames --save

Andrés Campuzano Garzón

student•

🦄 Acá el código del proyecto al momento:

https://github.com/AndresCampuzano/React-Router-and-Redux/commits/master

Yo solucioné los diferentes colores del Header de la siguiente manera:

import Header from '../components/Header';
...
<Header setColor='green' />

import Header from '../components/Header';
...
<Header setColor='green' />

Header.jsx:

const { user, setColor } = props;
const inputStyle = classNames('header', setColor); //style header

Header.scss

// Dynamic CSS
.green {
	background: #21c08b;
}

.red {
	background: #ff1100;
}
// -----------

Noten que pueden usar diferentes colores como .red usando <Header setColor='red ' />

Daniel Alcudia

student•

solo que ya no estarías usando el Layout no?

Andrés Campuzano Garzón

student•

Correcto

Alexander Henry Obispo Buendia

student•

Yo no tuve ningún problema con los estilos, ya que hice un buen sass desde el curso de frontend developer, con mejores practicas y pensando en componentes, e implemente react Helmet para unos cunatos bugs que se me generaban principalmente con el background del body.

David Camacho

student•

De pronto el css del curso de Frontend no fue muy pulido... Sin embargo no esta de más aprender a hacer este tipo de validaciones, tarde o temprano tocará hacerlas.

Alejandro González Reyes

student•

Para ser honestos, React le falta mucho soporte en este sentido. Es horrenda esta forma.

Oscar Barajas Tavares

Team Platzi•

Es cuestión de perspectiva, pero hay mucho por mejorar sin duda, en lo personal me gusta trabajar con styled components.

Alexander Henry Obispo Buendia

student•

El problema no es react si no los estilos que fueron muy mal escritos..., yo me evite todos estos problemas escribiendo un buen sass

Daniel Esteban Santos Mendez

student•

Se me hace innecesario la validación del input del Search, a mi nunca me afecto eso el tamaño, solo los borders de los inputs del Login y Register los tomo el Search, pero agregue otro nombre a la clase ej: input-login, input-register y ya. Aunque como enseñanza esta perfecto.

Martin Paez

student•

Tienes razon. Depende mucho de la organizacion de nuestro SASS. Aunque esta cool tener esta opcion para resolver problemas a futuro donde sea mas complicado modificar los estiloso que podamos sacar magicamente algun feauture :)

Iair Poloniecki

student•

En qué curso se ve esto de classnames?? Porque empieza diciendo que lo vimos, y yo no lo recuerdo

Cristobal Vega

student•

Juan Castro

teacher•

Se refiere a la estructura y estilos que construimos en los Cursos de Frontend Developer y React JS Práctico. :wink:

:point_right: https://platzi.com/clases/frontend-developer/ :point_right: https://platzi.com/clases/react-ejs/

Fredy Sarmiento

student•

Uncaught Error: Cannot find module 'classnames' at webpackMissingModule (Search.jsx:6) at eval (Search.jsx:6) at Module../src/components/Search.jsx (bundle.js:1462) at webpack_require (bundle.js:20) at eval (Home.jsx:5) at Module../src/containers/Home.jsx (bundle.js:1474) at webpack_require (bundle.js:20) at eval (App.js:5) at Module../src/routes/App.js (bundle.js:1558) at webpack_require (bundle.js:20)

me aarece ese error al declarar el classnames de search.jsx

alguien sabe que puede ser

Andrés Chapetón

student•

Utiliza npm install classnames --save

.button {
  background-color: rgba(255, 255, 255, .3);
  border: none;
  border-radius: 25px;
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Muli', sans-serif;
  height: 50px;
  letter-spacing: 1px;
  margin: 10px 0;
}

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

...
let headerClass = ''
    if (path === '/login' || path === '/register') {
        headerClass = 'header__green'
    } else if (path === '/') {
        headerClass = 'header'
    }
    else {
        headerClass = 'd-none'
    }

    return (
        <header className={headerClass}>
            <Link to="/">
                <img className="header__img" src={logo} alt="Platzi Video" />
            </Link>
...

ERROR in ./src/components/Search.jsx
Module not found: Error: Can't resolve 'classnames' in '/home/leonardo/Documentos/GitHub/Platzi/curso practico de React/PlatziVideo/src/components'
 @ ./src/components/Search.jsx 2:0-36 7:19-29
 @ ./src/containers/Home.jsx
 @ ./src/routes/App.js
 @ ./src/index.js

Validaciones de UI

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto