No tienes acceso a esta clase

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

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

1D
7H
2M
34S
Curso Pr谩ctico de React.js

Curso Pr谩ctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Estilos en los componentes de React

9/30
Recursos

Aportes 37

Preguntas 27

Ordenar por:

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

o inicia sesi贸n.

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 鈥榝or鈥 de los labels

Basta con cambiarlo por 鈥榟tmlFor鈥 para arreglarlo

Cuidado con la palara 鈥渃hildren鈥 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 鈥楥hildren鈥 a 鈥榗hildren鈥 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 鈥楥鈥 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:
鈥淲arning: 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鈥檚 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 鈥榬eact鈥

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 鈥榝or鈥, es por la propiedad for de las etiquetas label. Para corregirlo solo deben de cambiar el nombre de esta propiedad a 鈥榟tmlFor鈥

驴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 鈥榝or鈥 de los labels, reemplacen 鈥渇or鈥 por 鈥渉tmlFor鈥
<label htmlFor="new-password" className="label">

Si tienen problemas al compilar, el error: 鈥渨ebpack-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 鈥渃hildren鈥 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=鈥減assword鈥 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