Cómo agregar hojas de estilo externas para reaccionar

Cómo agregar hojas de estilo externas para reaccionar

En las aplicaciones de reacción, no necesitamos agregar etiquetas de enlace manualmente a los archivos HTML.

React es una biblioteca de JavaScript utilizada para crear aplicaciones de una sola página. El término "página única" significa que solo hay un archivo html que se reutiliza para cada página que hemos creado en nuestra aplicación.

Veamos un ejemplo de agregar hojas de estilo en react.js.

Supongamos que nuestra aplicación tiene blog-post.js página y necesitamos agregar una hoja de estilo externa a esta página.

blog-post.js

import React from 'react';

class BlogPost extends React.Component{

    render(){
       return(
        <div>
          <h1>My first post</h1>
          <h1>My second post</h1>
          <h1>My third post</h1>
        </div>
       )
    }

}

export default BlogPost;

Ahora creamos un blog-post.css archivar y definir nuestros estilos.

blog-post.css


.post-list{
    display:flex;
    justify-content:center;
    align-items:center;
    max-width:1000px;
    flex-direction:column;
    padding:1rem;
    background-color:#ccc
}

Es hora de agregar nuestra hoja de estilo a la blog-post.js archivar.

Necesitamos importar el blog-post.css archivo dentro del blog-post.js archivo como cómo importamos los componentes o módulos de reacción.

blog-post.js

import React from 'react';
import './blog-post.css'

class BlogPost extends React.Component{

    render(){
     return(
        <div className="post-list">
          <h1>My first post</h1>
          <h1>My second post</h1>
          <h1>My third post</h1>
        </div>
       )
    }

}

export default BlogPost;

En las aplicaciones de reacción tenemos que usar clasName para agregar estilos en lugar de class.

salir



reaccionar ejemplo de hoja de estilo externa

¿Por qué usamos className en lugar de class?

Los novatos en reaccionar probablemente estén confundidos en cuanto a por qué usar className en lugar de normal class usamos en archivos html.

El HTML que escribimos en las aplicaciones de reacción no es HTML, es JSX y se pasa al compilador de Babel y se convierte a JavaScript. Finalmente, todo lo que escribimos HTML como sintaxis es solo un JavaScript.

En Javascript class es una palabra clave reservada por lo que tenemos que usar className para agregar estilos en lugar de class.

Si está utilizando create-react-app para iniciar su aplicación. En tiempo de desarrollo puedes ver todas las hojas de estilo externas que has creado, pero si ejecutas npm run build comando que solo puedes ver index.css archivo porque todos los archivos CSS están concatenados en uno index.css archivar.

Si quieres conocer otros artículos parecidos a Cómo agregar hojas de estilo externas para reaccionar puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas