Estilos en los componentes de React

OJO

En la documentación de Sass desaconsejan usar @import para traer archivos de estilos externos.

@import //The Sass team discourages the continued use of the @import rule.

En cambio recomiendan usar @use, esto evita que variables, mixins, placeholders y funciones sean accesibles de manera global, mejora el tiempo de compilación entre otros problemas que surgen cunado se usa @import

@use 'path/for/external/styles';

Ver documentación

Si hiciste el curso de frontend veras que el responsive el logo esta roto

Esto se soluciona importando la imagen en nuestro container/Login.jsx asi:

import logo from '../../public/assets/logos/logo_yard_sale.svg';

e insertándola como una variable en nuestra etiqueta, de esta forma:

<img src={logo} alt='logo' className='logo' />

Si estas siguiendo el curso, tendrás un error al intentar leer los .svgs. Para solucionar esto.
1.-necesitamos fili-loader

npm i -D file-loader

2.- Modificamos nuestro webpack agregando una nueva regla.

rules: {
	[
	{...},
	{
 	test: /\.(png|jp(e*)g|svg|gif)$/,
       	use: [
          	{
         	loader: 'file-loader',
            	options: {
              		name: 'images/[hash]-[name].[ext]',
            		},
          	},
              ],
	},
	]
}

por ultimo matamos el proceso si no lo has hecho, y nuevamente

npm run start

Revisen siempre la consola, en este caso está arrojando un error con el atributo ‘for’ de los labels

Basta con cambiarlo por ‘htmlFor’ para arreglarlo

Cuidado con la palara “children” se escribe con todas sus letras en minúsculas.

Ya salio la nueva version de React v18, en el archivo index.js que esta dentro de /src deben ajustarlo para que funcione de la siguiente forma.

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './components/App';

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

Me estaba dando un error al cambiar el global de .scss a .css, esto era porque en la configuración de webpack de clases anteriores se hizo de esta forma:

{
    test: /\.s[ac]ss$/i,
    use: [
        "style-loader",
        "css-loader",
        "sass-loader",
    ]
}	

Para solucionar este error hay que incluir css al test:

{
    test: /\.(css|s[ac]ss)$/i,
    use: [
        "style-loader",
        "css-loader",
        "sass-loader",
    ]
}	

Tuve el mismo inconveniente que muchos mencionan, el cuál es no visualizar la pantalla de Login pero sin tener ningún Warning ni error en la consola.
Esto en mi caso, se solucionó cambiando la palabra ‘Children’ a ‘children’ en el archivo Layout.jsx, es decir cambiar todo a minúsculas, esto me pasó ya que cuando escribí esa línea de código, por defecto Visual Studio me lo recomendó con la ‘C’ en mayúscula.
Saludos 😃

Compañ[email protected], es importante darse cuenta de que a Oscar en el minuto 5:50 se le añaden los import de Layout y de Login automáticamente y es probable que esto no suceda de forma automática así que tenemos que añadirlo manualmente, los imports son estos:

import { Layout } from '../containers/Layout';
import { Login } from '../containers/Login';

• Y si el export que hemos hecho es como el de Oscar ( defoult ) el código sería así:

import Layout from '../containers/Layout';
import Login from '../containers/Login';

( sin las courly brackets )

Espero que sirva de ayuda, a mi este cambio me ha sido suficiente para hacer que se vea el proyecto.

El error lo arreglé agregando un signo de interrogación a la expresión regular. Como estaba no reconocía archivos CSS. test: /\.s?[ca]ss$/

Al inspeccionar desde la consola aparece:
“Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17.”

Entonces, nuestro index.js quedaría así:

import React from 'react';
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from './components/App.jsx';


const rootElement = document.getElementById('app');
const root = createRoot(rootElement);

root.render(
    <StrictMode>
    <App />
    </StrictMode>
);

Fuente

En mi VSC,
El atajo que me sirve es
rafce+enter, de una vez te coloca el import reacty te crea la constante:
import React from ‘react’

const Layout = () => {
return (
<div>

    </div>
)

}

export default Layout

Para borrar los espacios de indentacion de mas, al copiar el codigo css (minuto 1:08), lo podemos hacer:
1)seleccionando todo el codigo con CTRL A
2)SHIFT + TAB (las veces que sea necesario)

Espero que le sirva a alguien, saludos.

#porlotanto

Si ven que en la consola les sale un warning del ReactDOM sobre una propiedad llamada ‘for’, es por la propiedad for de las etiquetas label. Para corregirlo solo deben de cambiar el nombre de esta propiedad a ‘htmlFor’

¿Alguien ha probado la nueva alternativa de webpack? https://vitejs.dev/

para agregar la imágenes en el Login para la version mobile es necesario agregar esta regla al webpack.config

module: {
      rules: [
         {
            test: /\.(png|jpg|svg|jpeg|webp)$/,
	    /*aquí en test agregas la expresión regular para procesar los diferentes tipos de imagenes que tengas.*/
            type: 'asset/resource',
            generator: {
               filename: 'assets/pictures/[hash][ext]',
		/*aquí en filename pones la carpeta en donde quieres que se guarden tus imagenes (le agrego el [hash] para evitar problemas con el cache, además [ext] hace referencia a la extensión del archivo que se haya procesado).*/
            }
         }
      ]
}

luego en el Login.jsx
agregas

import logo from '../../public/logos/logo_yard_sale.svg'

y en la parte de la etiqueta HTML

<img src={logo} alt="logo" className="logo" />

Me gusta la idea de que vayan dejando un quiz por cada módulo que se va abarcando

no logro seguir el paso, a oscar, no logro entender esto

si alguien tiene un link a videos que me puedan ayudar a entender esto, se los agradezco

Hola pequeño programador que esta batallando!

Con respecto al error de :root.
El camino facil fue modificar el webpack quedo asi 😅:

{
	// test: /\.s[ac]ss$/i,
	test: /\.(scss|css)$/,
	use:[
		"style-loader","css-loader", "sass-loader",
	]    
}

GO AHEAD!

Me parece muchisimo mejor usar la regex

 /\.s?css$/

O es .SCSS, o es .CSS, nada de .SASS, eso es para perdedores :p

Actualización 2022 (Con los aportes de otras personas)

1. Ya salio la nueva version de React v18, en el archivo index.js que esta dentro de /src deben ajustarlo para que funcione de la siguiente forma.

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './components/App';

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

1. Revisen siempre la consola, en este caso está arrojando un error con el atributo ‘for’ de los labels, reemplacen “for” por “htmlFor”

<label htmlFor="new-password" className="label">

Si tienen problemas al compilar, el error: “webpack-cli: Invalid options object. Dev Server has been initialized using an options object”

en el archivo webpack.config.js modifiquen la sección de dev server, e introduzcan este código:

<devServer: {
        static: path.resolve(__dirname, 'dist'),
        port: 9000,
      },> 

Con esto solucioné ese problema

Para poder utilizar los shortcuts de react, necesitan tener instalada la extension:

React-Native/React/Redux snippets for es6/es7

Tambien pueden dar Ctrl+P en vscode y pegan el siguiente codigo para instalar la extension:

ext install EQuimper.react-native-react-redux

ESPERO QUE LES SIRVA!

Un forma genial de trabajar un archivo de variables sass, sin necesidad de llamar dicho archivo desde todos nuestro componentes, es convertirlas en variables root, dentro de nuestro global.scss, de la siguiente manera:

_variables.scss

$standard-space: 4px;

@function md($s: 1) {
    @return $standard-space * $s;
}

$colors: (
    "very-light-pink":  #C7C7C7,
    "text-input-field": #F7F7F7,
    "text-grey":        #272727,
    "white":            #FFF,
    "black":            #000,
    "yellow":           #F2CB1F,
    "blue-dark":        #346A92,
    "blue-light":       #5394CC,
    "grey-dark":        #151515,
    "grey-light":       #202020,
);

$radius-sizes: (
    "sm": md(2),
    "md": md(4),
    "lg": md(5),
);

$font-options: (
    "roboto": "'Roboto', sans-serif",

    "sm": 0.8em,
    "md": 1em,
    "lg": 1.3em,
    "xl": 1.5em,

    "thin": 300,
    "regular": 400,
    "semi-bold": 500,
    "bold": 600,
    "extra-bold": 800,
);

global.scss

@import 'variables';

:root{
    @each $key, $value in $colors { --#{$key} : #{$value}; }
    @each $key, $value in $font-options { --font-#{$key} : #{$value}; }
    @for $i from 1 through 20 { --m#{$i}: #{md($i)}; }
    @each $key, $value in $radius-sizes { --radius-#{$key} : #{$value}; }
}

Nota

Verificar que nuestras funciones anónimas en React retornen algún valor

Si quieren usar las variables en el archivo global con css solo deben cambiar el webpack como Oscar lo cambio, y así no es necesario crear otro archivo para guardar las variables.

Por más que continuo este error no deja de aparecer… 😔

Mi aporte para esta clase porque fue algo que me estuvo rompiendo la cabeza es verificar el funcionamiento de las extensiones, si alguien le pasó que al definir Layout.jsx se agrego un import de children…

Guardamos y oramos

Otra solucion para los problemas de compilacion con el style loader es pasar los archivos css a la validacion de la expresion regular en la configuracion; de la siguiente forma:

test: /\.(s[ac]|c)ss$

a mi me gusta la semántica pero no tan exageradamente junta, si que tenga algunos espacios para saber que es cada cosa y hasta donde termina un bloque de código, aunque vsc tiene sus líneas que especifican los bloques.
Esto de declarar el “children” es un reto para mi, ahora solo lo estamos haciendo con una plantilla, mas adelante lo haremos con varias plantillas a la vez y será emocionante.

Si estás usando labels para tus inputs y en los labels tienes for=“password” debes reemplazarlos por htmlFor

Me canse de perder el tiempo con los errores de webpack ya terminen de matar a esa porqueria.
Lo voy a pasar y terminar con Vite.

v: estuve un rato bregando jajajaj
si pasan las variables a formato de Sass no olviden hacer:

npm i -D sass

tenia un type y tuve que ver la clase 2 veces para encontrarlo, ahora tengo todo mucho mas claro🤭

Estoy teniendo problemas con la nueva versión de React Router 😥

Esa extensión que comenta Oscar tambien la tiene vim/nvim con CoC y el tsserver