Cómo aplicar estilos

Clase 11 de 37 • Curso de React.js 2019

Resumen

Para los estilos crearemos una carpeta llamada Styles y allí vivirán todos los archivos de estilos que tienen que ver con los componentes.
Para usar los estilos es necesario importarlos con import
React funciona ligeramente diferente y para los atributos de clases no se utiliza class sino className
Es posible utilizar Bootstrap con React, sólo debe ser instalado con npm install bootstrap y debe ser importado en el index.js
Existen estilos que son usados de manera global o en varios componentes, así que deben ser importados en el index.js

Ernesto Cruz Bravo

student•

Badge.css

.badge {
  background: #ffffff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
  border-radius: 8px 8px 8px 8px;
  overflow: hidden;
  height: 380px;
}

.badge_header {
  padding: 0.5rem 0;
  height: 80px;
  background: #1b1b25;
  display: flex;
  justify-content: center;
}

.badge_section-name {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

.badge_section-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
  background: #f4f4f7;
}

.badge_avatar {
  border-radius: 50%;
  margin-right: 1rem;
  width: 120px;
  height: 120px;
}

.badge_footer {
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #98ca3f;
  font-weight: bold;
  font-style: italic;
}

Jansen Peña

student•

Los estilos usan una convención de nombres llamada BEM, por eso deben tener en cuenta que el nombre de las clases tiene 2 underscore por ejemplo: .Badge__avatar ; puedes leer mas de este sitema de convenciones aquí

También tengan en cuenta que las clases que corresponden con un componente, el nombre empieza por mayúscula, para que sea igual al nombre del componente :)

Héctor Hugo Sandoval Marcelo

student•

Gracias bro!

Matias Gabino Santana Cabrera

student•

_Badge.css _

.Badge {
  background: #ffffff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px 8px 8px 8px;
  overflow: hidden;
  height: 380px;
}

.Badge__header {
  padding: 0.5rem 0;
  height: 80px;
  background: #1b1b25;
  display: flex;
  justify-content: center;
}

.Badge__section-name {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

.Badge__section-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
  background: #f4f4f7;
}

.Badge__avatar {
  border-radius: 50%;
  margin-right: 1rem;
  width: 120px;
  height: 120px;
}

.Badge__footer {
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #98ca3f;
  font-weight: bold;
  font-style: italic;
}

_global.css _

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Anton');


* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Lato', 'Helvetica Neue', sans-serif;
  background-color: #F4F4F7;
}

h1 {
  font-family: 'Anton', sans-serif;
}

a.link-unstyled {
  color: inherit;
}

a.link-unstyled:hover {
  color: inherit;
  text-decoration: none;
}

.btn {
  padding: 0.375rem 2rem;
}

.btn.btn-primary {
  color: #fff;
  background-color: #7DCD40;
  border-color: #7DCD40;
}

.btn.btn-primary:not(:disabled):not(.disabled):hover {
  color: #fff;
  background-color: #7DCD40;
  border-color: #7DCD40;
}

.btn.btn-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: #7DCD40;
  border-color: #7DCD40;
}

.btn.btn-primary:not(:disabled):not(.disabled):focus {
  box-shadow: 0 0 0 0.2rem rgba(125, 205, 64, 0.5);
}

.btn.btn-danger {
  color: #fff;
  background-color: #CD4040;
  border-color: #CD4040;
}

.btn.btn-danger:not(:disabled):not(.disabled):hover {
  color: #fff;
  background-color: #CD4040;
  border-color: #CD4040;
}

.btn.btn-danger:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: #CD4040;
  border-color: #CD4040;
}

.btn.btn-danger:not(:disabled):not(.disabled):focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 64, 64, 0.5);
}

Ariel Jacob

student•

Muchas gracias, me fue útil para hacer el ejercicio.

Ernesto Truyen

student•

Muchas gracias, me aorraste tener que copiar deteniendo el video, XD.

Pamela Cinthya Torres Gutiérrez

student•

Excelente clase, aunque le agregue algo de estilo en el diseño.

Aarón González

student•

¡Vaya! te quedó muy bien

Bernardo Aguayo Ortega

student•

esta hermoso!

Tania Sosa

student•

Ahí va mi badge :D

Carlos Alberto García Rosales

student•

Yo estoy avanzando un proyecto que quiero hacer desde hace tiempo mientras llevo el curso :D.

Enrique Yael C

student•

lo haces con node? como conectaste el backend al frontend ? jeje

Andrés Felipe Castellanos

student•

El css que usa el profe

.Badge { background: #FFFFFF; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.10); border-radius: 8px 8px 8px 8px; overflow: hidden; height: 380px; }

.Badge__header { padding: 0.5rem 0; height: 80px; background: #1B1B25; display: flex; justify-content: center; }

.Badge__section-name { display: flex; justify-content: center; align-items: center; padding: 1rem 0; }

.Badge__section-info { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0.5rem 0; background: #F4F4F7; }

.Badge__avatar { border-radius: 50%; margin-right: 1rem; width: 120px; height: 120px; }

.Badge__footer { height: 54px; display: flex; justify-content: center; align-items: center; color: #98CA3F; font-weight: bold; font-style: italic; }

Mario Sánchez

student•

global.css

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Anton');


* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Lato', 'Helvetica Neue', sans-serif;
  background-color: #F4F4F7;
}

h1 {
  font-family: 'Anton', sans-serif;
}

a.link-unstyled {
  color: inherit;
}

a.link-unstyled:hover {
  color: inherit;
  text-decoration: none;
}

.btn {
  padding: 0.375rem 2rem;
}

.btn.btn-primary {
  color: #fff;
  background-color: #7DCD40;
  border-color: #7DCD40;
}

.btn.btn-primary:not(:disabled):not(.disabled):hover {
  color: #fff;
  background-color: #7DCD40;
  border-color: #7DCD40;
}

.btn.btn-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: #7DCD40;
  border-color: #7DCD40;
}

.btn.btn-primary:not(:disabled):not(.disabled):focus {
  box-shadow: 0 0 0 0.2rem rgba(125, 205, 64, 0.5);
}

.btn.btn-danger {
  color: #fff;
  background-color: #CD4040;
  border-color: #CD4040;
}

.btn.btn-danger:not(:disabled):not(.disabled):hover {
  color: #fff;
  background-color: #CD4040;
  border-color: #CD4040;
}

.btn.btn-danger:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: #CD4040;
  border-color: #CD4040;
}

.btn.btn-danger:not(:disabled):not(.disabled):focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 64, 64, 0.5);
}```

Jaime David Burbano Montoya

student•

Esto no es recomendable, lo ideal es que tengas separado tus estilos por cada componente

Juan David Reyes

student•

Mis notas, encuentro muy útil hacer estos ejercicios de síntesis:

David Behar

student•

Aplicar Estilos

En create-react-app tenemos una configuración de Webpack que nos permite importar estilos directamente en un archivo de javascript. . Para eso podemos importar directamente los estilos del componente con un importado del archivo

import './estilos.css'

. Ésto nos va a importar los estilos a nuestro archivo, pero los estilos no se aislan completamente (se importan en el momento de crear el componente, pero siguen interactuando con toda la aplicación) . Para evitar estos problemas de especificidad tenemos que generar convenciones de nombrado de estilos (clases), una de las más populares es BEM (Bloque__elemento—modificador), ésto va a hacer que no se sobreescriban nuestros estilos. . Para aplicar los estilos sobre clases de CSS, la convención dice que envés de utilizar el atributo (prop) class, utilicemos className:

const Componente = ()=&gt;(
	&lt;div className=&quot;clase&quot;&gt;Childrens del componente&lt;/div&gt;
);

Matías Wasiak

student•

Muchas gracias por el aporte!

Jansen Peña

student•

Los estilos los pueden “traer” por medio de GIT del branch master así:

git checkout master  src/components/styles

Para mayor referencia:

https://platzi.com/clases/git-github-2017/

Janice Prendas

student•

Jimmy Buriticá Londoño

student•

Muy bien

Wandy Rafael Santana Evangelista

student•

Repitanlo conmigo, no usar class, es className.

Stiven Jiménez

student•

si al copiar el css y poner boostrap se te rompe el badge es porque boostrap tiene un estilo en una clase llamada badge https://getbootstrap.com/docs/4.5/components/badge/ la solución es cambiarle el nombre de la clase al badge por otra y ponerla en el css de igual manera

Ivan Joseph

student•

Comparto mi código en vanilla ReactJs sin JSX

Vander Idme

student•

Omar Yahir Mendoza Vidrio

student•

Excelente muchas gracias !!

Luis Alejandro Vera Hernandez

student•

Me gusta tu resumen. Lo tendre anotado. Gracias por el aporte

Martín Acosta

student•

¿Cómo importar Bootstrap? npm install bootstrap y en el archivo index.js agregar la línea: import 'bootstrap/dist/css/bootstrap.css';

Fabio Andres Arango Grajales

student•

seria bueno profe trabajar material UI https://material-ui.com/ React components that implement Google’s Material Design.

Francisca Alejandra Salinas Castillo

student•

Cool!

Kevin Jeremy Salazar Jimenez

student•

¿Del 1 al 10?

![](

Willy David Da Conceicao Lozada

student•

Franco Canalejo

student•

Que les parece? Todavia no utilice Bootstrap porque no pude evitar personalizarlo un poco con CSS je

Jose Manuel Hernandez De la Cruz

student•

Wow se ve súper pro!! podrías compartir los estilos del efecto neón!!

Franco Canalejo

student•

Aqui te lo adjunto!

.class-name {

					border: 1px solid crimson;
    			border-radius: 10px;
    			box-shadow: 0 0 5px 1px red;

}

Cómo aplicar estilos

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión