Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Práctico de React.js

Curso Práctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Estilos en los componentes de React

8/29
Recursos

Aportes 22

Preguntas 15

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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

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

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

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

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

#porlotanto

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

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.

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!

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

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

Nota

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

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’

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.

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.

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

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

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

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

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!

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