No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React Router 5 y Redux

Curso de React Router 5 y Redux

Oscar Barajas Tavares

Oscar Barajas Tavares

Validaciones de UI

27/29
Recursos

Aportes 56

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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?

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"
      }
>

Para instalar classnames solo necesitan usar el comando

npm install classnames --save

Recuerden que es necesario importar classnames con

npm install --save classnames

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

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

<p className='login__container--register'>
    No tienes ninguna cuenta, &thinsp;
    <Link to='register'>Reg铆strate</Link>
</p>

Alguien me recuerda cuando utilizamos import classNames from 鈥榗lassnames鈥, no recuerdo haberlo utilizado antes

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;

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

&nbsp;

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

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

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

馃 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:

Login.jsx:

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

Register.jsx:

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 鈥 />

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.

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

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.

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

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

Se puede separa con un padding-left: 1rem y ya no?

JSX no maneja espacios en los textos

Si pulsan Alt + 255 si lo reconocera como un caracter distinto y funcionara

Para agregar un espacio vaci贸 solo usen la siguiente entidad de html.

&nbsp;

Se que a la mayor铆a no les agrada dar este tipo de soluciones a los estilos css desde el Javascript, claro que es mucho mejor corregir el problema desde css. pero piensen en situaciones donde sea muy dif铆cil hacerlo, como los Templates de terceros. Justo en esos momentos; estas soluciones te salvan la vida.

Yo lo que hice fue anexar otra propiedad a mi initialState llamado el cual es modificado por un action que se ejecuta cada vez que entro a home, login o register y modifica el valor de mi state
luego dentro de header use classNames y le asigne el valor de mi state, de esta manera sin importar desde que ruta entra el usuario siempre se renderizara la que le asigne el action dentro de mi componente

Me parece interesante el tema de classname, sin embargo los errores que preseta el proyecto se pueden arreglar usando especificidad en las clases asi como una buena metodolog铆a de construcci贸n (como BEM).

.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: 鈥楳uli鈥, sans-serif;
height: 50px;
letter-spacing: 1px;
margin: 10px 0;
}

Un peque帽o aporte, cuando usan el autocompletado en chrome para el login y el register cambia los estilos y genera un fondo de color blanco, yo lo solucione as铆:

    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff;

Y para la clase del input v谩lide que fuera diferente a isHome para agregar los estilos al input del login y register
con la pseudo-clase :not ese lo agregue en el app.scss, ya que si mira el curso de frontend developer los inputs del login y register solo tienen border-bottom y en esta clase quedo con todos los bordes.

Al final quedo:

App.scss

.input:not(.isHome) {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff;
    border-bottom: 2px solid white;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
}

Y en el .input quedo con los siguientes estilos:

.input {
    font-family: 'Muli', sans-serif;
    height: 50px;
    outline: none;
    color: white;
    margin-bottom: 20px;
    padding: 0px 20px;
    font-size: 16px;
}

Search.scss

.input.isHome {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid white;
    border-radius: 25px;
    width: 70%;
}

Hola Todos, como estan??? Queria preguntarles si ustedes me podrian ayudar con la parte de 鈥淥lvide mi Contrase帽a鈥 ya que no me sale lo que necesito!!! se los agradeceria mucho!

&nbsp;

otra forma de dar espacio es 聽

<p className="login__container--register">
   No tienes ninguna cuenta&nbsp;
   <Link to="/register">
      Reg铆strate
   </Link>
</p>

.button__index{
    background-color: rgba(255, 255, 255, 0.1);
    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: 0px 10px;
}```

Nunca vi cuando cambio el header de color 馃槮

Wuau qyue genial proyecto, Genial curso y un exc elente profesor 馃挭馃挭

Un problema que tuve con mis estilos fu茅 que no cargaban bien, especialmente en los inputs no me tomaba bien los borders.

No hallaba la soluci贸n, pero me di cuenta que ten铆a que ver con el nombre de las clases, ya que les ten铆a asignado input como nombre de clase, al parecer esto causa alg煤n conflicto, as铆 que con solo cambiarlo qued贸 solucionado. 馃槃

Usar铆a mejor el <br /> al final que el { 鈥 鈥 } para separar el reg铆strate

A帽adiendo padding en Link se puede dar el espacio requerido

.login__container鈥搑egister {
font-size: 14px;
display: flex;
justify-content: space-between;
}

<code>

Mi soluci贸n para el maquetado.

paddind-left:5px; al register para separarlo

En mi caso ya los pude alinear con lo hecho en el curso de Frontend. All铆 si tuve que hacer una separaci贸n de input para el login y el del search!
login color.PNG

const Header = (props) => {

    const { user, isLogin, isRegister } = props;
    const hasUser = Object.keys(user).length > 0;

    const handleLogout = () => {
        props.logoutRequest({});
    }

    const headerClass = classNames('header', {
        isLogin,
        isRegister,
    });
    
    return (
        <header className={headerClass}>

Espacio en blnaco con html:

&nbsp;

Solamente le agregue una clase al reg铆strate de register鈥揵utton y en el scss del login puse

.register--button {
  margin-left: 10px;
}

Mi soluci贸n para la separaci贸n:

Login.jsx

<<Link to="/register" className="margin-left-10">
              Reg铆strate
            </Link>>

App.scss

<.margin-left-10{
  margin-left:10px;
}>

Sencillo pero necesario

yo ya lo tenia separado de es manera jeje

Agregue unas l铆neas de mas para que se viera mas como lo tra铆amos de el curso de frontend-developer aqu铆 las dejo.
por que en este curso quedo todo muy pegadito y no me gusto :b.

Register.scss

.register__container{
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
  min-height: 700px;
}

Login.scss

.login__container {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
  min-height: 700px;
}

.login__container--remember-me {
  margin-top: 15px;
  align-items: center;
 }

.login__container--remember-me a {
 margin-left: 20px;
}

Cuando separa el registrate es xq cuando hace el salto de linea para identar el code, de alguna manera no toma los espacios, para ahorrar c贸digo pongan todo junto鈥 ej:

<p className="login__container--register">No tienes ninguna cuenta <Link to="/register">Reg铆strate</Link></p>

en Login.scss

.login__container鈥搑egister {
font-size: 14px;
text-align: center;
}

.login__container鈥搑egister a {
color: white;
font-weight: bold;
font-size: 16px;
text-decoration: none;
display: block;
}

Es necesario instalar classnames?

Buena clase

I am using <br/> to separate REGISTER

El espacio lo genere colocando 聽 en el html.

a

Gracias por el aporte

Pr谩ctica: