React es una biblioteca front-end de Javascript que se utiliza para crear aplicaciones de una sola página (SPA). Las aplicaciones de React se pueden diseñar fácilmente asignando los estilos a la propiedad className.
Hay varias formas de diseñar una aplicación de reacción. En este artículo, vamos a discutir las siguientes cuatro formas de diseñar una aplicación de reacción.
- Uso de estilos en línea
- Usando el archivo CSS
- Usando el módulo CSS
- Uso de componentes con estilo
Configuración del proyecto: podemos crear la aplicación React usando el comando mencionado a continuación en la línea de comando.
npx create-react-app name_of_the_app
Nota: para seguir el ejemplo, elimine todo el contenido de los archivos App.js y App.css.
Estilo usando estilos en línea: para aplicar los estilos en línea a los elementos, usamos la propiedad de estilo. Pasamos un objeto con clave como propiedades CSS en camelCase y valor como los valores que se pueden asignar a estas propiedades CSS.
Sintaxis: La sintaxis para asignar estilos en línea a elementos CSS se menciona a continuación.
<div style={{backgroundColor: 'red'}}></div>
Nombre de archivo: App.js El contenido del archivo App.js se menciona en el código que se proporciona a continuación, en el que hemos agregado un estilo en línea a los elementos de React.
App.js
const App = () => { return ( <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", backgroundImage: "linear-gradient(to right, #427ceb, #1dad6f)", }} > <h1 style={{ color: "white" }}>GeeksForGeeks</h1> </div> ); }; export default App;
Paso para ejecutar la aplicación: Use el siguiente comando para iniciar la aplicación.
npm start
Salida: abra el navegador y vaya a http://localhost:3000 , verá la siguiente salida.
Nota: Para todos los ejemplos dados a continuación, la salida permanecerá como arriba solamente. Aunque puede verificarlo al final pegando el contenido de los archivos App.js y App.css y ejecutando la aplicación React en su dispositivo.
Estilo usando el archivo CSS: para aplicar estilo a los elementos React usando el archivo CSS, primero importamos el archivo CSS y luego asignamos las clases contenidas en el archivo CSS a la propiedad className de los elementos React.
Sintaxis: La sintaxis para asignar las clases a la propiedad className se menciona a continuación.
<div className="name_of_the_class"></div>
Nombre de archivo: App.js El contenido de los archivos App.js y App.css que demuestra el uso de archivos CSS para diseñar elementos de React se menciona a continuación.
App.js
import './App.css'; const App = () => { return ( <div className='container-div'> <h1 className='heading'>GeeksForGeeks</h1> </div> ); }; export default App;
App.css
.container-div { display: flex; align-items: center; justify-content: center; height: 100vh; background-image: linear-gradient( to right, #427ceb, #1dad6f); } .heading { color: white; }
Diseñar usando el módulo CSS: los módulos CSS son una forma de abarcar localmente el contenido de su archivo CSS. Podemos crear un archivo de módulo CSS nombrando nuestro archivo CSS como App.modules.css y luego se puede importar dentro del archivo App.js usando la sintaxis especial que se menciona a continuación.
Sintaxis:
import styles from './App.module.css';
Ahora podemos asignar fácilmente las clases a las propiedades className que se mencionan a continuación.
<div className={styles['container-div']}> <h1 className={styles.heading}>GeeksForGeeks</h1> </div>
El corchete se usa para acceder a la clase cuando contiene un guión o también podemos usarlo en general. El punto se puede usar para acceder a la clase cuando no contiene un guión.
Nombre de archivo: App.js El contenido de los archivos App.js y App.css que demuestran el uso de módulos CSS para diseñar el elemento React se menciona a continuación.
App.js
import styles from './App.module.css'; const App = () => { return ( <div className={styles['container-div']}> <h1 className={styles.heading}>GeeksForGeeks</h1> </div> ); }; export default App;
App.modules.css
.container-div { display: flex; align-items: center; justify-content: center; height: 100vh; background-image: linear-gradient( to right, #427ceb, #1dad6f); } .heading { color: white; }
Estilo usando componentes con estilo: los componentes con estilo son un paquete de terceros que nos ayuda a crear un nuevo componente con estilo basado en el elemento React y los estilos CSS que se le proporcionan.
Instalación del módulo: para usar los componentes con estilo, primero debe instalarlo como una dependencia usando el siguiente comando desde la línea de comandos.
npm install styled-components
Sintaxis: para crear un componente con estilo, puede usar la sintaxis que se menciona a continuación.
import styled from 'styled-components'; const GeeksHeading = styled.h1` color: white; `;
El código anterior creará un nuevo componente basado en el elemento h1 y lo diseñará con las propiedades CSS que se le pasan. El contenido del archivo App.js que demuestra el uso de componentes con estilo se menciona a continuación.
App.js
import styled from 'styled-components'; const PageDiv = styled.div` display: flex; align-items: center; justify-content: center; height: 100vh; background-image: linear-gradient( to right, #427ceb, #1dad6f); `; const GeeksHeading = styled.h1` color: white; `; const App = () => { return ( <PageDiv> <GeeksHeading>GeeksForGeeks</GeeksHeading> </PageDiv> ); }; export default App;
Publicación traducida automáticamente
Artículo escrito por shivamsingh00141 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA