Los detalles de un Badge

Clase 31 de 37 • Curso de React.js 2019

Willy David Da Conceicao Lozada

student•

CRUD es el acrónimo de "Crear, Leer, Actualizar y Borrar" (del original en inglés: Create, Read, Update and Delete) Adicional todas las operaciones de tipo CRUD son aplicadas a la base de datos, es decir, creamos elementos de la base de dato, leemos y actualizamos. En el curso estamos haciendo uso de verbos HTTP para lograr las peticiones con la arquitectura restApi

Federico Guillermo Moreira Tejera

student•

Muy buen aporte Willy.

Willy David Da Conceicao Lozada

student•

Siempre para ayudar amigo

Mariana Valencia Gallego

student•

Todo lo que sale de este curso es oro :D

Agustin Aníbal Ducca Pantaleón

student•

Lo genial de cómo fue estructurada esta clase es que sirve de repaso de conceptos que se vieron al inicio del curso (como la creación de páginas, rutas, etc), algo super necesario cuando se está tan cerca del examen de certificación. Gracias!

Bernardo Aguayo Ortega

student•

cool!

Usuario anónimo

user•

css BadgeDetails

.BadgeDetails__hero {
  width: 100%;
  padding: 2rem 0;
  background: url('../../images/stars.svg'), #1B1B25;
  background-repeat: repeat;
  margin-bottom: 1rem;
  color: #ffffff;
}

.BadgeDetails__hero-attendant-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.BadgeDetails__buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}```

Carlos Ferrer

student•

Alguien sabría decirme como hace Richard para que al escribir .container>.row>.col*2 le salgan automáticamente escritos los divs anidados y con sus respectivas clases? Y también me pregunto ¿como hace para colapsar bloques de código? Googleando he encontrado que con control+0 se contraen todos los métodos y con control+j se despliegan, pero no no he encontrado lo que hace él, que contrae bloques concretos

Alexander Valencia

student•

al escribir .container>.row>.col*2 emmet que te ayuda a construir el html mucho mas fácil, ya que es para html no puedes usarlo por defecto para trabajar en jsx.

para poder hacerlo si trabajas en VScode debes ir a File>Preferences>Settings y en la parte superior derecha debes buscar este icono { } y le das click.

te abrirá un archivo JSON, en el debe agregar

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

Guarda y ya podrás usar el emmet para jsx.

Kevin Eslí Díaz Alonso

student•

@alex16jpv muy bueno

Daniel Cutipa

student•

para no estar psasando cada campo por props a <Badge> es mejor usar desestruturado: ejm:

<Badge firstName={badge.firstName} lastName={} y asi sucesivamente>

mas facil usarlo de esta manera

<Badge {...badge}>

Luis Alejandro Vera Hernandez

student•

Interesante uso, muchas gracias

Juan Enrique García Costas

student•

Me pareció super interesante esta estructura de emmet. Me la apunto!

Noe Mikhael Huaccharaque Ruiz

student•

en la pagina : el hero deveria ser un componente o no ?

Jonathan Rangel Bernal

student•

Eso queda totalmente al criterio del developer, en este caso no lo hizo porque el hero especifico de está página es diferente al de las otras por el hecho de que el diseño que esta usando tiene el nombre del usuario en el, y en las demás paginas esto no pasa, si tuviera mas paginas que requieran usuar nuevamente algún hero, entonces si seria bueno hacerlo componente para reusarlo. Espero haberme explicado correctamente :)

Aracely Marentes Becerra

student•

Me gusta mucho como vamos usando los componentes que ya hicimos en nuevos componentes

César Ernesto Rivas Martínez

student•

Cuando te das cuenta de que podes reutilizar componentes previamente creados, es porque estas haciendo un buen trabajo, lo difícil es llegar a tener ese nivel de abstracción. Saludos

Alejo Vera

student•

Mi nivel del entendimiento del curso se resume a esto: Copie el typo de applicationCache, y concientemente lo copié pensando que así era :) Supongo que de a poco aprenderé

Jerson Morrow

student•

Alguien podria decirme como Richard modfica al mismo tiempo dos codigos parecidos, como lo hizo con el this.state.data que los agarro al mismo tiempo y los cambio por el badge.firstName y badge.lastName??? intente presionando todas las teclas pero no logro saber como jejejejjeje

Diego Forero

Team Platzi•

Hola seleccionas el primer termino que quieras trabajar y presionas CTRL + D y con eso seleccionas la siguiente ocurrencia, presionas esta combinación de teclas para seleccionar cada ocurrencia y vas a poder reemplazar al mismo tiempo las ocurrencias seleccionadas.

Juan Luis Rojas León

student•

Presionas CMD + D para mac o CTRL + D en windows.

Jair Neri

student•

Como organizo tan rapido los props en el min 10:32 ??

Johel Alonzo Gamarra Canahuire

student•

Lo hizo con la extensión, de Visual Studio Code, "Prettier". Al guardar lo acomoda de esa manera.

Christopher Alexander Pereira Guzman

student•

tengo el prettier pero no me lo acomoda de esa manera al guardar no se si es que tenga que configurarlo de alguna manera especial o algo

Roso Peñaranda

student•

¿Por qué no se utiliza el constructor para inicializar state?

Juan Luis Rojas León

student•

Aquí

Abraham Sanchez

student•

Es una nueva característica de las versiones mas actuales de EcmaScript. Se llama class field declarations.

Sigue siendo como una opción mas de sintaxis de azúcar para ahorrar escribir tanto código redundante. También puedes declarar métodos declarando el nombre de la propiedad asignandole arrow functions. Esto evita que tenga que hacer binds en el constructor. El único detalle que veo es que no podrias ser capaz de recibir los props en casi de usarlos.

Wilson Alejandro Gonzalez Gaitan

student•

Los nuevos recursos no se encuentra en el repositorio?

Edward Steven Ramos Palacios

teacher•

Puedes revisar el branch del proyecto completo y revisar.

Aseret Jimenez

student•

Hola, si se encuentran en el repositorio, tienes que situarte en la rama 20.DetallesDeUnBadge Aquí dejo el enlace

GUIFOR PAUL PLAZA AGUIRRE

student•

Excelente una vez mas

LUIS MIGUEL GUERRERO GUTIERREZ

student•

MMM que interesante

Edith Hernández Navarrete

student•

Genial el curso, estoy fascinada con las clases!!

Paul Cortes

student•

Excelente clase, todo es muy valioso, cada dato que da el profe es muy bueno

Mayra Yelitza Navas Carrascal

student•

Muy buena clase, realmente se ven varios temas pasados de las primeras clases. Es bueno repasar un poco. :)

Elvis Saavedra

student•

Siento que se puedo haber refactorizado y reutilizado muchas partes. Incluso los estilos podrían estar mejor estructurados.

Los detalles de un Badge

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