Yo era de angularjs, ahora recogiendo reaccionar. Incluso yo estaba usando angular 1.x, que ya está basado en componentes, pero aún tiene una plantilla. Pero en reaccionar, la estructura de archivos y la forma en que usamos para codificar el front-end ha cambiado, como en lugar de escupir archivos por páginas, ahora crea archivos por componente. Promueve la reutilización, pero ¿eso significa que también cambió la forma en que aplicamos el css?
Vi esta import { navBar } from 'styles/navbar.css' en navBar.jsx. Hmm, ¿cómo funciona css junto con JSX? ¿navBar css no carga ese archivo? ¿Qué complemento de paquete web se necesita para eso? viene por defecto? Estoy usando react-create-app de facebook, así que no sabía mucho sobre la configuración.
Utiliza css-loader y style-loader para incluir archivos CSS en su paquete webpack. De forma predeterminada, genera un código JavaScript que crea un elemento de style con el contenido del archivo CSS importado y lo agrega al elemento head en su index.html .
Por lo tanto, definitivamente puede usar archivos CSS externos para diseñar sus componentes React, solo asegúrese de que cada clase CSS tenga el espacio de nombres adecuado para evitar conflictos de nombres con las clases de otros componentes.
Por ejemplo, podría adoptar el esquema de nombres BEM . Si su componente se llama NavBar , entonces el elemento raíz de ese componente podría tener un className de x-nav-bar (el prefijo x está ahí para evitar conflictos con marcos como bootstrap) y todos los elementos secundarios, si es necesario diseñarlos. , tendrá nombres de clase como x-nav-bar__${childName} .
Este tipo de import { navBar } from 'styles/navbar.css' no es relevante para JSX sino para css-loader . Este es un cargador de paquetes web que maneja css y es compatible con cssModules , que le permite encapsular nombres de selectores para evitar fugas de css.
Entonces, en breve, esa importación expone un objeto con mapeo entre su selector a una cadena única (generalmente un hash).
Por ejemplo:
// styles.css .foo { color: red; } .bar { color: green; } // Component.jsx import styles from './styles.css'; console.log(styles); /* This will print something like { foo: '_h234jh', bar: '_234m23' } */