Sass

 Cree un archivo Sass de la misma manera que crea archivos CSS, pero los archivos Sass tienen la extensión de archivo.scss


En los archivos Sass puedes usar variables y otras funciones Sass:


mi-sass.scss:


Crea una variable para definir el color del texto:

$myColor: red;

h1 {
  color: $myColor;
}


Importa el archivo Sass de la misma manera que importaste un archivo CSS:

índice.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './my-sass.scss';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

cd

Comentarios

Publicar un comentario

Entradas populares de este blog

1-react-intro

React es una biblioteca JavaScript para construir interfaces de usuario. React se utiliza para construir aplicaciones de una sola página. React nos permite crear componentes de interfaz de usuario reutilizables. Es una libreria de javascript para crear interfaces de usuarios en una sola pagina index.html  Estructura react: import React from 'react' ; import ReactDOM from 'react-dom/client' ; function Hello ( props ) { return < h1 > Hello World! </ h1 > ; } const container = document . getElementById ( "root" ) ; const root = ReactDOM . createRoot ( container ) ; root . render ( < Hello /> ) ;   Crear aplicación de reacción Para aprender y probar React, debe configurar un entorno de reacción sobre tu computadora. Este tutorial utiliza la create-react-app. El create-react-app herramienta es una forma de apoyar oficialmente para crear aplicaciones de React. Node.js está obligado a utilizar create-react-app . Abra su term...
Leer más

condicional

En React, puedes renderizar componentes de forma condicional. Hay varias maneras de hacer esto. ifDeclaración Podemos utilizar el ifoperador JavaScript para decidir qué componente renderizar. Utilizaremos estos dos componentes: function MissedGoal ( ) { return < h1 > MISSED! </ h1 > ; } function MadeGoal ( ) { return < h1 > Goal! </ h1 > ; } Ejemplo: Ahora, crearemos otro componente que elige qué componente renderizar según una condición: function Goal ( props ) { const isGoal = props . isGoal ; if ( isGoal ) { return < MadeGoal /> ; } return < MissedGoal /> ; } const root = ReactDOM . createRoot ( document . getElementById ( 'root' ) ) ; root . render ( < Goal isGoal = { false } /> ) ; dfsdf Intente cambiar el isGoalatributo a true: const root = ReactDOM . createRoot ( document . getElementById ( 'root' ) ) ; root . render ( < Goal isGoal = { true } /> ) ; &&Op...
Leer más

useState

Imagen
En React, el estado es mucho más que solo un conjunto de datos; es la "memoria" interna del componente, que le permite " recordar " información y reaccionar a los cambios de forma automática. Veamos más en profundidad por qué es necesario rastrear el estado y cómo funciona. ¿Por qué es necesario rastrear el estado en un componente? Rastrear el estado en un componente es esencial porque nos permite que el componente sea dinámico y reactivo . Esto significa que el componente puede actualizar su interfaz en respuesta a cambios internos o externos sin tener que rehacerse completamente o actualizarse de forma manual.  Veamos algunos puntos clave: 1.-Mantener la interfaz actualizada: Cuando el estado cambia, React vuelve a "pintar" (renderizar) solo aquellas partes de la interfaz que dependen de ese estado. Esto es importante para crear aplicaciones interactivas donde los datos pueden cambiar con las acciones del usuario, como al hacer clic en botones, esc...
Leer más