Estilos en los componentes de React

Clase 9 de 30 • Curso de React 17 con Webpack 5 y Sass

Carlos Mario

student•

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

Soraimar Claivel Bernal Camacho

student•

gracias 👏🏻

Julio Loarte Huerto

student•

buen dato

Arturo Juárez Sánchez

student•

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

Ricardo Manuel Solis Vizurraga

student•

gran aporte bro vengo del curso de frontend xd

Jose Saúl Guerrero Serrano

student•

Hola!! :D les comento que ya no es necesario descargar file-loader para poder procesar tus imagenes! desde webpack 5 hay una funcionalidad nativa que nos permite hacerlo sin ningún loader externo. Para lograrlo solo debes añadir lo siguiente en tu archivo de configuración de webpack:

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).*/
            }
         }
      ]
}

Y de esta forma, cada vez que webpack encuentre una imagen con alguna de las extensiones especificadas se encargará de procesarla. :D

Espero que le sea de ayuda a alguno :)

Joe Harry Mancera Monroy

student•

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

Danilo Moreno

student•

buen aporte

Daniel Bravo Campino

student•

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

Lucas Aristizábal

student•

y eso para qué es?

David Prado

student•

Esto es debido a que existe una funcionalidad de React llamada Children que nos permite , entre otras cosas, convertir a la propiedad children en un array.

Aquí les dejo un enlace donde el gran Juan DC nos explica sobre esto: React.Children y React.CloneElement

Juan Carlos Moreno Banda

student•

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" />);

Clem Acosta

student•

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

walter Jorge

student•

Gracias por el aporte . :) :)

Jonathan Duarte

student•

Ok esto soluciona el error!!!

Alan Bertinat

student•

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 :)

William David Arias Gomez

student•

Excelente bro.

Antoni Bassols Lopez

student•

Compañer@s, 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.

Juan David Marin marulanda

student•

hay que aclarar que es importante que desde el login y layout.jsx se hayan escrito en el codigo con la primera en mayuscula, para que cuando se haga el llamado automatico en App reconozca desde donde vamos importar. pero muchas gracias me sirvio mucho tu aporte :)

Julio Barrios

student•

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

Guadalupe Monge Barale

student•

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

David Castro

student•

Buenl dato. Gracias por compartir Guadalupe!

Asly Nabil Lamas Corrales

student•

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

Luis Felipe Del Risco Racero

student•

yo utilizo rsc y listo, me crea todo igual

Jimer Samuel Espinoza

student•

eres todo un maquina!

Nicolas Agustin Goitia

student•

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.

ccardenasg cardenas

student•

#porlotanto

Juan Diego Garin

student•

#trabajar

Matias Diaz

student•

#proceder

Erick Escobar

student•

En mi consola no sale ningun error sin embargo en el localhost no sale nada, que puede estar pasando?

Edinson Alexander Urquijo Rozo

student•

X2 aunque en la consola si me sale esto al cargar la pantalla!

Camilo Gaviño

student•

Tengo el mismo incoveniente... hace 5 meses que se pregunto esto Platzi?? que pasa con la comunidad?...

Camilo Ramírez

student•

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'

José Daniel Navarrete Díaz

student•

Hay inconveninetes al importar el global.css, tuve que cambiarle el formato a sass

Héctor Eduardo López Carballo

student•

Qué inconvenientes tuviste?

Juan Castro

teacher•

Revisa muy bien la configuración de Webpack. :wink:

Si quieres, podemos ayudarte a revisar. :D

Luis Ángel Pérez Meléndez

student•

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

Kenneth Angulo L

student•

Buenas, yo trato de concentrarme mas en lo que hace, el profesor le pone muchas palabras y eso distrae un poco.

El profesor esta atacando varios temas a la vez, lo importante es entender lo que esta pasando, cual es el objetivo y ya con eso uno sabe para donbe ir. Dejo por aqui un listado de temas que hemos hecho hasta ahora enelcurso por si son de utilidad.

Instalacion de Webpack
Crear componentes a partir de los recursos HTML del equipo de diseno
Esta usando saas para manejar los estillos, esto se llama css in js

Dejo por aqui unos recursos sobre webpack (explican que son loaders y configuraciones) que pueden ayudar:

Open Webinars - esp Desarrollo Web - esp Colt Steele - eng

Para el trabajo con HTML la recomendacion es ver el curso donde genereraron todos estos recursos, alli van al detalle con HTML y CSS: frontend Developer

Sobre Saas se puede buscar en su pagina oficial o en videos de youtube dependiendo del tema particular, este video explica las cosas basicas: Saas en 20 min - ingles

Luis Ángel Pérez Meléndez

student•

amigo gracias , es de mucha ayuda lo que me compartiste, no se como agradecerte

Eduardo Rafael Romero Bernal

student•

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

Obed Paz

student•

Me encanta, pronto le estaré dando una oportinidad. He visto que se viene hablando bastante de ella y con muy buenas reseñas. ✨

Gino Alejandro Limo Garcia

student•

Qué es eso? D: me costó entender webpack y ahora hay algo más actual y más sencillo?

marco contreras

student•

tengo un pequeño problema, porque a veces nomas puedo usar el slr y el imr? me tiene mal eso me desespera que no pueda ser constante esos shortcode

Santiago Demarco

student•

buenas, la consola no me muestra ningún error, pero no veo nada en pantalla. llevo dos días intentando solucionarlo y todavía no encuentro el problema.

Omar Daniel Centeno

student•

Hola

Puedes compartirnos tu código, una captura de pantalla y en general, más información sobre tu entorno de trabajo para tener más contexto de lo que está sucediendo y poder encontrar la solución.

Saludos

Francisco Murillo

student•

observa el archivo de returno, si estas retornando bien lo que quieres que se muestre

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

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).*/
            }
         }
      ]
}

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" />);

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

Estilos en los componentes de React

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js