Creando nuestro primer componente: Category

… la extensión de VSCode.

URL

const DEFAULT_IMAGE = https://i.imgur.com/dJa0Hpl.jpg

Una buena practica seria definir desde styled-components, los globalStyles, de esta manera podras definir los valores que mejor te convengan… aqui un ejemplo:

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
html {
  box-sizing: border-box;
  font-size: 10px;
}

*, *:before, *:after {
  box-sizing: inherit
}

body {
  padding: 0; 
  margin: 0;
  font-size: 1.5rem;
  font-family: sans-serif;

}

h1, h2, h3, h4, h5, p {
  margin: 0;
}
a { 
  text-decoration: none;
  color: #393939
}`;
export default GlobalStyles;

Traaaaaalalata!!Traaaaaalalata!! Traaaaaalalata!!

ala madre! mi cabeza exploto desde ahora todo así jaja

por si alguien le tiene un typo les comparto el codigo
index.js

import React from 'react'
import { Anchor, Image } from './styles'

const DEFAULT_IMAGE = 'https://i.imgur.com/dJa0Hpl.jpg'

export const Category = ({ cover = DEFAULT_IMAGE, path, emoji = '?' }) => (
  <Anchor href={path}>
    <Image src={cover} />
    {emoji}
  </Anchor>
)

styles.js

import styled from 'styled-components'

export const Anchor = styled.a`
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  width: 75px;
`
export const Image = styled.img`
  border: 1px solid #ddd;
  box-shadow: 0px 10px 14px rgba(0, 0, 0, .2);
  border-radius: 50%;
  height: auto;
  overflow: hidden;
  object-fit: cover;
  height: 75px;
  width: 75px;
`

Recuerden que si estan trabajando con archivos jsx en vez de .js solamente.

En la configuracion de webpack dentro de rules, deberia quedar asi:

{
        test: /\.js|.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }

Esto de styled-components me ha volado la mente. Adios colisiones

Link de la Documentación de Styled-components
https://www.styled-components.com/docs/basics

Bueno asi llevo mi codigo realice unas modificaciones pero al final es lo mismo.

export const StyledCategory = styled.a`
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 75px;
    text-decoration: none;
    img {
        border: 1px solid #ddd;
        box-shadow: 0px 10px 14px rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        height: 75px;
        width: 75px;
        overflow: hidden;
        object-fit: cover;
    }
`;

importo el syled component asi

 <StyledCategory href={path}>
        <img src={cover} alt="Categoria" />
         {emoji}
  </StyledCategory>

styled-component me rompió mi estructura mental de entender css jajja
una cosa no entiendo.
para dar estilo a una ancla <a> se agrega el styled.a´…´ pero que pasa si tengo varias anclas dentro del componente y todos con estilos distintos, como discrimino uno de otro ? 🤔

Recuerden que para levantar el entorno de desarrollo de este proyecto lo hacen con el comando:

npm run dev

import styled from 'styled-components'

export const Anchor = styled.a`
    display: flex;
    flex-direction: column;
    flex-align: center;
    text-decoration: none;
    width: 75px;
`

export const Image = styled.img`
    border: 1px solid #ddd;
    box-shadow: 0px 10px 14px rgba(0,0,0,.2);
    border-radius: 50%;
    height: auto;
    overflow: hidden;
    object-fit: cover;
    height: 75px;
    width: 75px;

cuando crea el styled component de Image, dos veces escribe height, el de de 75px termina sobre escribiendo al auto, creo que es mejor eliminar si no se necesita

Para usar .JSX no fué suficiente adicionar en la sección rules para mi.

Adicioné resolve, quedaría así:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    mode: 'development',
    output:{
        filename: 'app.bundle.js'
    },
    resolve: {
        extensions: ['.js', '.json', '.jsx'],
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                                '@babel/preset-env',
                                '@babel/preset-react'
                        ]
                            }
                }
            }
        ]
    }
}

Que buena clase!! Pero si usaramos Link de Router como hacemos para estilarlo?

Les recomiendo a todos que si están usando Coc en vim usen la extensión .jsx para poder usar el autocompletado de esta herramienta y ser más productivos. Pero habría que modificar el webpack.confg.js, la línea del “test: /.js$/” hay que cambiarla. Yo al menos lo tengo así:

Aqui les dejo los styles

import styled from 'styled-components'

export const Anchor = styled.a`
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  width: 75px;
`
export const Image = styled.img`
  border: 1px solid #ddd;
  box-shadow: 0px 1px 14px rgba(0, 0, 0, .2);
  border-radius: 50%;
  height: auto;
  overflow: hidden;
  object-fit: cover;
  height: 75px;
  width: 75px;
`

Que paso acá, me termino explotando la cabeza!! Desde ahora los estilos siempre los haré con styled-components

tengo una pregunta, veo que en el Image esta este estilo

height: auto;
  overflow: hidden;
  object-fit: cover;
  height: 75px;
  width: 75px;

al final el height auto no es redundante y seria reemplazado por el de 75px ?

Creo que los beneficios de Styled Components son superados por los problemas que ocasiona así que prefiero quedarme con Sass, al final haces exactamente lo mismo pero es más rápido utilizar Sass porque le das toda la funcionalidad que te brinda Sass como funciones hechas, mixins y variables de configuración que sirven para todo el equipo como pueden ser colores, tamaños específicos, queries, etc.

tambien podemos escribir nuestro css de styled-components dentro de nuestro codigo y quedaria algo asi, sin necesidad de crear un nuevo archivo para el css ni importar nada

import React from "react";
import styled from "styled-components";

const DEFAULT_IMAGE = "https://i.imgur.com/dJa0Hpl.jpg";

export const Category = ({ cover = DEFAULT_IMAGE, path, emoji = "?" }) => (
  <Anchor href={path}>
    <Image src={cover} />
    {emoji}
  </Anchor>
);

const Anchor = styled.a`
  width: 76px;
  display: flex;
  text-align: center;
  flex-direction: column;
  text-decoration: none;
`;

const Image = styled.img`
  width: 76px;
  height: 76px;
  border: 1px solid #ddd;
  overflow: hidden;
  object-fit: cover;
  box-shadow: 0px 10px 14px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
`;

Recuerden que dentro de los styled components podemos usas una sintaxis muy similar a sass, permitiendo ahorrarnos componentes y agregar multiples estilos mediante anidacion.

Sin embargo hay que ser precavidos de no caer en una sobre anidacion

const Anchor = styled.a`
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    width: 75px;

    img{
        border: 1px solid gray;
        box-shadow: 0px 10px 14px rgba(0,0,0,0.2);
        border-radius: 50%;
        height: auto;
        overflow: hidden;
        object-fit: cover;
        height: 75px;
        width: 75px;
    }
`;

Category/index.js

import React from 'react';

import {Anchor, Image} from './styles';


const DEFAULT_IMAGE = "https://imgur.com/dJa0Hpl.jpg";

export const Category = ({
    cover = DEFAULT_IMAGE, path, emoji= "=D"
}) => (
    <Anchor href={path}>
        <Image src={cover} />
        {emoji}
    </Anchor>
)

Category/styles.js

import styled from "styled-components";


export const Anchor = styled.a`
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    width: 75px;
`

export const Image = styled.img `
    border: 1px solid #ddd;
    box-shadow: 0px 10px 14px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    height: auto;
    overflow: hidden;
    object-fit: cover;
    height: 75px;
    width: 75px;

`

npm run dev

Genial

comando para instalar styled

npm install styled-components

Me sigue saliendo el mismo error: alguien sabe porque?

Como aplicaría las medía querys en Style-componentes

Nice code 😄

alguien más con este error ?¿

ERROR in ./src/index.js 4:16
Module parse failed: Unexpected token (4:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App from './App'
| 
> ReactDOM.render(<App />, document.getElementById('app'))

el contenido de mi index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('app'))

y por si acaso el contenido de mi App.js

import React from 'react'

export default function () {
  return (
    <div>
      <h1>Test</h1>
    </div>
  )
}

y por si acaso el webpack.config

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  output: {
    filename: 'app.bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['babel-plugin-styled-components']
          }
        }
      }
    ]
  }
}

pero no se borre el node_modules lance el npm i y nada no se que esta cargando mal el loader¿?

Bien!

Hola, tengo un error con webpack y nose como solucionarlo 😦

Porque al nombre del archivo del componente Category se le puso index.js y no Category.js/jsx ?
que hace la diferencia ? cual es la ganancia ?

¿Esto no afecta el rendimiento de la app? perdón si es una pregunta tonta, recién estoy aprendiendo.

En lo personal me gusta mas los module.css es muy similar a como se trabaja esto de los StylesComponent pero siento que mas fácil e intuitivo

Che alguien sabe porque cuando inicio el servidor en desarrollo siempre me manda un puerto distinto
Osea nunca es el mismo, alguna idea?

¿Como usariamos correctamente variables globales (Por ejemplo para guardar los colores) como se hacía en sass? Sería fatal que tengamos que cambiar el color de nuestra app y tengamos que ir componente a componente a componente a cambiarlo. 😁

genial esto de styled components

No se si se me esté escapando algo pero no puedo renderizar el App component como se hizo al principio de la clase, alguien sabe a que se debe? Tuve que hacerlo de la siguiente manera.

export const App = () => {
  return (
    <h1>Seguimos con el curso avanzado</h1>
  )
}

export const App = () => (
  <h1>Seguimos con el curso avanzado</h1>
)

Esto es pura magia

Qué extensión usa el profesor para que visual studio le diga hace cuánto tiempo ha modificado el código?

Wow brutal el Styled Component, me encantó

Hola, ¿Hay una forma diferente de exportar los estilos?
Es que es engorroso estar importando cada una de los componentes, entonces se me ocurrió poner algo como:

import import Styles from './style.js'; 

y después cuando lo quiera utilizar solo hacer <Styles.Container>, pero esto no funciona.
¿Alguien tiene una mejor idea ?
Saludos.

Alguien me puede ayudar, la consola me arroja un ERROR y no logro determinar donde esta, he revisado mi (index.js) y no le veo el problema, por aqui voy a dejar mis archivos…![]

Hmmm tal vez mi css esté mal pero en el min 8:10 está escribiendo la misma propiedad dos veces .-. [height]

Como dato…
A mi personalmente me gusta definir los components de la siguiente forma

components
category
Category.js

A mi personalmente me parece mas declarativo… que tener muchisimos index.js

Aprendi bastante, ahora me siento más fluido

Excelente! Me encanta Styled components

Al galope va el profesor.
EXCELENTE!!!

Para poder utilizar la extensión .jsx hay que agregar lo siguiente en el archivo de configuración de Webpack.

 module: {
      rules: [
        {
          test: /\.(js|jsx)$/,  ->Esta línea de código
          exclude: /node_modules/,
	 /* Code... */
          },
      ],
    },

Todo al paso y a la primera, excelente!!!

j

Prácticas:

Personalmente prefiero meter los styled components todo dentro del mismo archivo donde esta la funcion, para no tener que andar cambiando de un archivo a otro