Estilos del Header

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

Mariana Cortés

student•

Estas últimas dos clases creo que refuerzan la importancia de trabajar organizadamente en carpetas... Si no tienes el mapa mental en tu cabeza puede ser más engorroso de lo que enrealidad es...

Sebastian Duran

student•

Si, es muy cierto tambien va aclarando que debemos empezar a ir separando los componentes para distiguirlos bien

Rodrigo Reyes

student•

siii aparte creo asi todo mundo puede entenderle y el proyecto puede ser escalable

Carlos Fuentes

student•

Les dejo el link a los estilos en el repositorio de github: https://github.com/platzi/curso-frontend-escuelajs/blob/master/platzi-video/curso-frontend-developer/vista-principal/styles.css

Yeimmy Paola Ramirez Macias

student•

Muchas gracias

Bernardo Aguayo Ortega

student•

thanks!

luis alejandro castañeda varon

student•

App.scss

body {
    margin: 0;
    font-family: 'Muli', sans-serif;
    background: #8f57fd;
  }
  
  * {
    box-sizing: border-box;
  }

Header.scss

.header {
    align-items: center;
    background: #8f57fd;
    color: white;
    display: flex;
    height: 100px;
    justify-content: space-between;
    top: 0px;
    width: 100%;
  }
  
  .header__img {
    margin-left: 30px;
    width: 200px;
  }
  
  .header__menu {
      margin-right: 30px;
  }
  
  .header__menu ul {
    display: none;
    list-style: none;
    margin: 0px 0px 0px -14px;
    padding: 0px;
    position: absolute;
    width: 100px;
    text-align: right;
  }
  
  .header__menu:hover ul, ul:hover {
      display: block;
  }
  
  .header__menu li {
    margin: 10px 0px;
  }
  
  .header__menu li a {
    color: white;
    text-decoration: none;
  }
  
  .header__menu li a:hover {
    text-decoration: underline;
  }
  
  .header__menu--profile {
    align-items: center;
    display: flex;
    cursor: pointer;
  }
  
  .header__menu--profile img {
    margin-right: 8px;
    width: 40px;
  }

Diego Fernando Rojas Quintero

student•

Gracias

Vsqz Gabriel

student•

No seria mejor hacer solo una importación a estar importando cada archivo sass en cada componente ?

Rodrigo Guerrero

student•

Tenia la misma pregunta que tu, encontre algo en: StackOverflow, por lo que leí:

primero de esta forma tus componentes estarán encapsulados, todo los que necesites estará subdivido en componentes lo que lo hace más fácil de llevar a otro proyecto por ejemplo (en pocas palabras genera que sea re-usable), creo por mi parte que será mas fácil de mantener el codigo en scss o css.
La razón de hacer esto no es por el rendimiento, aunque puede llegar a afectarlo.

Andrés Felipe Acevedo Del Rio

student•

Pues en teoría así maneja uno los archivos cuando trabaja con SASS

Jhon Alexander Romero Gonzaga

student•

Por ahora solo se como se utiliza webpack con ReactJS y una idea de como utilizarlo sin react pero sin duda Oscar sigue siendo mi profesor preferido, SPAM: tiene un canal de twitch donde hace directos todos los domingos hablando de temas increibles, se los recomiendo ;)

Alexander Nova Arevalo

student•

YA me acostumbraba a no utilizar punto y coma en JS :'(

Abraham Manuel Munguia Coronado

student•

puedes seguirlo no usando bro

Ginnio Sarabia

student•

Excelente clase. . Destaco el código CSS del curso de frontEnd por @TeffCode

Alejandro Ignacio Herrera Turra

student•

Hola, tengo una duda...¿Qué es más conveniente hacer, crear aparte el código HTML y CSS y luego traspasarlos y transformarlos en componentes con React o crear HTML y CSS en React?

Jonatan Ariste

student•

Yo creo que es mejor hacer HTML directo primero ya que ahi todo funciona y solo nos preocupamos de las vistas. Teniendo en cuenta que luego seran separadas las cosas en componentes seria ideal dejar notas en el css sobre a que pertenecen las clases. Si usamos bem en CSS no tendremos problemas.

Oscar Barajas Tavares

Team Platzi•

Todo depende de como trabajes en tu equipo, lo idea es crear el HTML/CSS dentro del componente utilizando la guía propuesta.

Carlos Alfonso Garcia Rivera

student•

¿Alguien sabe por que al inspeccionar mi pagina encuentro unas lineas en el head que no se donde se agregan?:

<style lang="en" type="text/css" id="night-mode-pro-style">html {background-color: #FFFFFF !important;} body {background-color: #FFFFFF;}</style>

Daniel Adolfo Ordoñez Rubio

student•

Hola, Carlos :) Quizá tengas un plugin en el navegador que agrega ese tag.

Carlos Alfonso Garcia Rivera

student•

si, tienes razón es una extensión d chrome, gracias por el aviso

Jesus Espino

student•

A alguien le funciona el import sin utilizar la extensión .scss (para los estilos) ?

Gerson Montenegro

student•

De acuerdo a la documentación de create-react-app, debes instalar el paquete node-sass para luego hacer uso de la variable SASS_PATH, y así importar los archivos sin la extensión.

Joseph Manuel Salen Pantoja

student•

Existe una extensión de VSCode que es muy muy muy útil a la hora de importar archivos, se llama "Relative Path". Solamente necesitan presionar Ctrl + Shift + H y escribir el nombre del archivo que desean importar y VSCode hará la ruta por ustedes :D

Julian Leonel Lopez

student•

En esta no estoy muy de acuerdo con el órden, tal vez porque vengo de angular, no digo que esté mal, simplemente me parece más comodo de otra forma. Tendría en Components una carpeta más por cada componente, donde dentro estén el jsx y el scss. En cuanto a la carpeta de estilos en el assents, solo pondría los globales que comparten todos los componentes

César Palma

student•

Si esa forma es mejor para proyectos grandes

Karen Paola Diaz Duarte

student•

Practica:

Marco Luna

student•

Realmente me causó mucho impacto positivo el uso de BEM en CSS

Enrique Tecayehuatl

student•

Yo uso BEMIT, BEM + ITCSS check this

Luis Lira

student•

Ya que estamos usando SASS, les dejo la estructura que hice con SASS para estos estilos :) Imagino que se puede mejorar bastante si alguien ya es un experto.

.header {
    display: flex;
    width: 100%;
    height: 80px;
    justify-content: space-between;

    &__img {
        width: 200px;
        margin: 10px 0 0 10px;
    }
    &__menu {
        margin-right: 30px;

        & ul {
            display: none;
            list-style: none;
            padding: 0px;
            position: absolute;
            width: 100px;
            text-align: right;
            margin: 0 0 0 -14px;

            &:hover {
                display: block;
            }
        }
        
        &:hover ul {
            display: block;
        }

        & li {
            margin: 10px 0;

            & a {
                color: white;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        &--profile {
            margin-right: 8px;
            display: flex;

            & img {
                margin-right: 8px;
            }

            & p {
                margin: 0;
                color: white;
            }
        }
    }
}

Luis Lira

student•

Hay algunos que los deben separar del "&" porque si no les dará error. No sé por qué al darle "Publicar" al comentario se eliminaron esos espacios D:

Gonzalo Blasco

student•

Luis, el código que compartiste está en un 99% perfecto... Lo que le fallás un poco es en el uso del &.

El & se usa para poder repetir el selector anterior, como en el caso de &--profile, pero usar & img no tiene sentido ya que el selector ya lo está heredando por ser hijo de...

.header {
  align-items: center;
  background: #8f57fd;
  color: white;
  display: flex;
  height: 100px;
  justify-content: space-between;
  top: 0;
  width: 100%;

  &__img {
    margin-left: 30px;
    width: 200px;
  }

  &__menu {
    margin-right: 30px;

    ul {
      display: none;
      list-style: none;
      margin: 0 0 0 -14px;
      padding: 0;
      position: absolute;
      text-align: right;
      width: 100px;

      &:hover {
        display: block;
      }
    }

    &:hover ul {
      display: block;
    }

    li {
      margin: 10px 0;

      a {
        color: white;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    &--profile {
      align-items: center;
      cursor: pointer;
      display: flex;

      img {
        margin-right: 8px;
        width: 40px;
      }
    }
  }
}

Cristhian Daza

student•

Les comparto el código CSS convertido a SASS:


.header {
  align-items: center;
  background: #8f57fd;
  color: white;
  display: flex;
  height: 100px;
  justify-content: space-between;
  top: 0px;
  width: 100%;

  &__img {
    margin-left: 30px;
    width: 200px;
  }

  &__menu {
    margin-right: 30px;

    ul {
      display: none;
      list-style: none;
      margin: 0px 0px 0px -14px;
      padding: 0px;
      position: absolute;
      width: 100px;
      text-align: right;
    }

    &:hover {
      ul {
        display: block;
      }
    }

    li {
      margin: 10px 0px;

      a {
        color: white;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    &--profile {
      align-items: center;
      display: flex;
      cursor: pointer;
    }

    img {
      margin-right: 8px;
      width: 40px;
    }
  }

}

Deyvi Jhonny Bustamante Perez

student•

Super clase

Jackeline Jaimes Ortiz

student•

Alguien que me ayude por favor! Al ejecutar en consola npm run start lo que ocurre es que carga una pagina pero esta me muestra todas las carpetas del proyecto y no el Header que sería el componente a ver. ¿qué parte del código reviso o qué componente, dónde puede estar el error?

Mariangelica Useche

Team Platzi•

Habría que ver tu código, jackelinejaimesortiz1 ¿Puedes montarlo en repo y linkearlo acá?

Mariangelica Useche

Team Platzi•

Habría que ver tu código, jackelinejaimesortiz1 ¿Puedes montarlo en repo y linkearlo acá?

Pablo César Escobar

student•

¿Existe alguna restricción en cuanto al contenido de un archivo scss? O puede trabajar como un archivo css normal.

Kevin malaver

student•

Hola, se puede usar normalmente como un css

Luis Lira

student•

¡Hola!

¿A qué te refieres con restricción de contenido? Un archivo de SCSS te brinda más funcionalidades que puedes tener con CSS para hacer código más ordenado y de forma más rápida. El detalle es que el código de SCSS debe transpilarse hacia código CSS para que el navegador pueda entenderlo.

Andres Ontiveros

student•

Una consulta es recomendable utilizar 1 hoja de estilos para cada componente?? o preferiblemente trabajar 1 hoja de estilos para todos??

Leonardo de los angeles Espinoza Hernandez

student•

Hola @andresontiveros

Es mejor un css por cada componente, ya que así puedes hacer cambios más rápidamente y no tener que leer tanto código para encontrar algún tipo de error que se te presente.

Francisco Imanol Suarez

student•

Ademas de lo que dice @LeoEsp si trabajas en equipo es mas fácil el trabajo, lo cual también no quita que tengas unos estilos globales. Hay paginas que tienen estilos globales, como tipografías o variables de los colores según estados etc.

Estilos del Header

¿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