Saltar al contenido

Cómo agregar hojas de estilo externas a reactDec, 27thIn reaccionar aplicaciones que no necesitamos añadir etiquetas de vínculos manualmente al HTML …

marzo 13, 2020

 En

reaccionar aplicaciones que no necesitamos añadir etiquetas de enlace manualmente a los archivos HTML.

Reaccionar es una biblioteca JavaScript utilizado para construir aplicaciones de una sola página, el término “página única” significa que sólo hay un único archivo html que es reutilizar para cada página que hemos creado en nuestra aplicación.

Veamos un ejemplo de cómo agregar las hojas de estilo en react.js.

Supongamos que nuestra aplicación tiene página blog-post.js y tenemos que añadir una hoja de estilo externa a esa página.

import React from 'react';

class BlogPost extends React.Component{

render(){
return(

My first post

My second post

My third post

)
}

}

export default BlogPost;

Ahora estamos creando un archivo del blog-post.css y definir nuestros estilos.

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

Su hora de poner nuestra hoja de estilos en el fichero de blog-post.js.

Tenemos que importar el archivo del blog-post.css dentro del archivo del blog-post.js como la forma en que importamos los componentes o módulos en reaccionar.

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

class BlogPost extends React.Component{

render(){
return(

My first post

My second post

My third post

)
}

}

export default BlogPost;

Al reaccionar aplicaciones necesitamos usar clasName añadir estilos en lugar de clase. salida

Por qué estamos usando className en lugar de clase?

principiantes al reaccionar están probablemente se confunda lo que es razón para usar className en lugar de la clase normal, que utilizamos en los archivos html.

El HTML se escribe dentro de la aplicaciones reaccionan no es un archivo HTML que es un JSX y que se transmite al compilador Babel y convertida en JavaScript, por fin todo lo que escribimos HTML como sintaxis es sólo un JavaScript. clase

En JavaScript es una palabra clave reservada de manera que tenemos que utilizar className añadir estilos lugar de clase.

Si utiliza crear reaccionan aplicación para arrancar su app.At el momento del desarrollo, se puede ver todas las hojas de estilo externas que ha creado pero si ejecuta el comando NPM plazo de construcción sólo se puede ver el archivo index.css porque todos los archivos CSS se concatenan en un solo archivo index.css.