Nuestra primera página

Clase 13 de 37 • Curso de React.js 2019

Resumen

Las páginas en React son componentes y conseguir distinguirlas nos servirá para saber que es un componente que adentro lleva otros componentes.

Al escribir los props no importa el orden en el que lo hagas, únicamente importa el nombre.

Juan Pablo Arnedo

student•

Si quieren pueden usar tambien la destructuracion para traer solo el componente:

import React, { Component } from 'react';

class BadgeNew extends Component{
	.....
}

Bernardo Aguayo Ortega

student•

vega!

Andrés Felipe García Rendón

student•

gracias!

Janice Prendas

student•

Tomen en cuenta que ahora hay dos carpetas styles. Una está dentro de componentes y la otra está dentro de pages. Este es un detalle importante a la hora de importar las hojas de estilo.

Cristian Córdova

student•

Ya decía yo... No entendía de donde estaba importando eso. Sino existia!!

Gracias. xD

José Javier Cueto Mejía

student•

Gracias, con razón no me funcionaba

Guy Sánchez

student•

Boostrap cambio la sintaxis de "font-weight-light y bold", por algo muy sensillo y es "fw-light y fw-bold", para que los nuevos revisen la documentación en bootstrap

Analia del Valle Rosales

student•

Gracias por el dato, no sabía por qué no andaba

Ciro Andres Diaz Rodriguez

student•

Esto tiene que estar en el mero tope! Estaba furioso porque veía que el estilo no me funcionaba y no entendía por qué!

Gracias por el aporte, y ojalá lo ponan en pin, para los que estamos tomando estos cursos con nuevas versiones de React/bootstrap.

Jeison Sneider Ruiz Zemanate

student•

Navbar.css

.Navbar {
  width: 100%;
  padding: 0.5rem 0;
  background-color: #1C3643;
}

.Navbar__brand {
  color: #ffffff;

  display: flex;
  align-items: center;
}

.Navbar__brand:hover {
  color: #ffffff;
  text-decoration: none;
}

.Navbar__brand-logo {
  margin-right: 0.5rem;
}

Héctor Hugo Sandoval Marcelo

student•

Genial, lo estaba buscando, gracias!

Rene Del Carpio

student•

Gracias, héroe!

Jhon Alexander Romero Gonzaga

student•

Para los que deseen trabajar con emmet en VSCode deben irse a configuraciones y luego irse al archivo json.

estando en el archivo json, pegamos el siguiente codigo

&quot;emmet.includeLanguages&quot;: {
        &quot;javascript&quot;: &quot;javascriptreact&quot;
    }

y luego ya solo falta reiniciar el VSCode, y ya pueden trabajar con emmet

Pablo Emilio Escobar Ossa

student•

Bro, llevo rato tratando de arreglar esto, muchas gracias por tu aporte. Ahora sí me va a facilitar al darle TAB.

Bernardo Aguayo Ortega

student•

gracias!

Félix Alejandro Zelaya Orellana

student•

BadgeNew.css

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

David Jesus Palma Lugo

student•

Muchas gracias justo lo que iba a preguntar jaja

Carlos Castillo Sanchez

student•

Excelente aporte, gracias!

TODO1

student•

Tienes estilos y componentes, previamente cargados en tu proyecto, sería bueno que al inicio del video indiques lo que ya tienes preparado, porque causa perdida de tiempo "adivinar" que ya tienes creado previamente

Diego Fernando Gutiérrez Bolívar

student•

Totalmente de acuerdo

Jonathan Gonzalez Botero

student•

Es cierto, para una clase de 10 minutos de explicación nos estas haciendo tomar cerca de 1 hora por que das las cosas por sentado

Fredy Santander Baños

student•

La Url donde se encuentra el archivo "BadgeNew.css" es la siguiente:

https://github.com/Sparragus/platzi-badges/tree/6.NuestraPrimeraPagina/src/pages/styles

Simón Arenas

student•

En este post pueden ver cómo activar el autocompletado.

Deivi Alfredo Arocutipa Serrano

student•

thanks

René Sanchez

student•

Muy buen aporte 💚.

Pamela Cinthya Torres Gutiérrez

student•

listo ya me quedo. Buena clase

Jimmy Buriticá Londoño

student•

Se ve muy bien.

Bruno Castillo

student•

Lucía Amaya Sánchez Hernández

student•

Jajajaja qué bueno, esto. Cámbiete el Header con un svg de los cuatro elementos y ya sería la bomba!!!

David Behar

student•

Yo creo que sí me aviento el curso cambiando los estilos para que sea una página de Avatar, jeje, maybe

Jeison Vargas

student•

Para quienes les ocurra igual que a mi, al intentar traer 'BadgeNew.css' les genera error, hacer lo siguiente:

Debemos descargar primero el archivo 'BadgeNew.css' a la carpeta styles dentro de pages.

Igualmente la imagen de estrellas, debemos descargarla y alojarla en la carpeta correspondientes de 'images'.

ANDRÉS PATRICIO ALVAREZ DÁVILA

student•

De dónde descargaste el archivo BadgeNew.css??

Jeison Vargas

student•

Las imagenes, archivos css adicionales y demas los encuentras navegando en las carpetas del proyecto en el repositorio.

https://github.com/sparragus/platzi-badges

Saludos.

Mayra Yelitza Navas Carrascal

student•

Genial todo como va quedando, :) como no tengo cuenta en Gravatar, y no encontraba la imagen de Richard, aquí les dejo el link por si lo necesitan :D

avatarUrl="https://www.gravatar.com/avatar/21594ed15d68ace3965642162f8d2e84?d=identicon"

Sebastián Buitrago

student•

gracias heroe sin capa, llevaba como tres clases buscandolo

Eliana Huamani

student•

Si por una razon no c les autocompleta html o js en los proyectos de react ... agreguen esto en el setting.json file :

"emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.triggerExpansionOnTab": true A mi me funcino!!

Josué Isaac Fuentes López

student•

Gracias, muchas gracias

Guillermo García López

student•

Gran aporte gracias.

Manuel Rivera

student•

Estaba haciendo el ejercicio y no me salía nada en consola, estuve indagando y les comparto por que razón pasaba eso.

Si un React Class name comienza con una lowercasel etra, entonces no hay métodos dentro de la class llamada, es decir, nada se procesa, y no recibe ningún mensaje de error en la consola del navegador, porque las letras pequeñas se tratan como HTMLelementos, es una regla que todo React components debe comenzar con un upper case letra, así que siempre use mayúsculas.

Los componentes definidos por el usuario deben estar en mayúscula. :D

Camilo Vega

student•

Creo que el profesor debe ser mas claro en como hace las cosas y no dar por sentado muchas otras!

Yurley Sanchez

student•

¿Como cuáles?

Guillermo García López

student•

A mí me pasó con ciertos archivos que el profesor utiliza en su proyecto, pero que todavía no tengo en mi proyecto: como estilos e imágenes.

Erick Uriel Carreño Villarreal

student•

BadgeNew.css

Si tienes duda de dónde salió, no te compliques, yo hice los siguiente: Fui al repositorio y la encontré, solo crea por tu cuenta el folder y el file .css y copia en el lo siguiente:

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

en backgroung url le pones el nombre y extensión de tu imagen y listo.

Héctor Hugo Sandoval Marcelo

student•

Gracias bro

Erick Uriel Carreño Villarreal

student•

En el minuto 8:17 en la parte de archivos no existe el pages/styles/BadgeNew.ss, y en el minuto 8:37 magicamente ya está ahí, pero no se explicó como se creó, creo que hay que poner atención a detalles, al menos lo hubiera comentado...

LUIS CARLO LOPEZ DUARTE

student•

Correcto, esto me tiene sumamente desesperado. Los videos de 10 minutos usualmente los termino en 30 o 40 minutos, por tener que estar descubriendo que fue lo que hizo Richard...

Andres Cabrera Cabrera

student•

Por el hecho de que esta utilizando Bootstrap es que la parte de css casi no la pone a trabajar, les recomendaría que vieran algo de css para que entiendan mejor, incluso creo hay un curso de Bootstrap aquí en Platzi.

Alexis Antonio Moraga Gallardo

student•

Algo que note mientras iba realizando el ejercicio, es que react no es capas de retornar mas de un elemento en el return de la clase. me explico. si tu intentas retornar por ejemplo dos parrafos estos no pueden estar en la primera linea de tu return, estos deben estar bajo un contenedor padre, en esencia todo el contenido que retornes tienes que estar englobado dentro de un elemento padre de esta forma

import React from "react";

class NavBar extends React.Component{
    render(){
        return(
                <div>
                    <h1>Esto Si</h1>
                    <h2>Funciona</h2>
		</div>
                
        )
    }
}
export default NavBar;

ya que si lo hacemos de esta forma obtenemos el siguiente error, en el cual se nos indica que debemos encapsular nuestro código en un contenedor

import React from "react";

class NavBar extends React.Component{
    render(){
        return(
                
                    <h1>Esto No</h1>
                    <h2>Funciona</h2>
                
        )
    }
}
export default NavBar;

index.js:1375 ./src/components/NavBar.js
Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (8:21)``````

Gabriel De Andrade

student•

Hola! Excelente observación, de todas maneras si mal no recuerdo esto lo vemos en clases siguientes, pero un truco, si quieres devolver los elementos pero no quieres tener un div que los contenga puedes usar React.Fragment de esta forma:

<React.Fragment>
	<h1>Hello</h1>
	<p>How are you?</p>
</React.Fragment>

React.Fragment también tiene una manera más corta de escribirlo que es básicamente escribir una etiqueta sin nombre. Así:

<>
	<h1>Hello</h1>
	<p>How are you?</p>
</>

De todas maneras esto lo verás más adelante y con la práctica :D

Enrique Ortuno

student•

No seria mejor, digo yo en mi humilde opinion, crear folders por componente y dentro de cada folder el .js y los .css por cada componente? Esto haria que los componentens se sientan mas 'auto-contenidos'?

Eduardo Hidalgo Díaz Rugama

student•

Respecto a mantener en el mismo lugar el css y el js, si. No te recomiendo hacer tantos folder (como por ejemplo hacer un folder por componente).

Eso te traerá problemas fuertes cuando el proyecto crezca y quieras hacer deploys a producción. Es mejor hacer un folder contenedor que se llame "componentes" (por ejemplo) y meterlos ahí. Podrías hacer subfolders que los agrupen o clasifiquen, pero hasta ahí es correcto.

aquí hay un blog sobre como estructurar react, en un comentario hasta abajo menciono justamente esto que comentas.

https://platzi.com/blog/como-estructurar-tu-proyecto-react/

Enrique Ortuno

student•

Gracias @eduardo, creo que me ire por la division por componentes, segun tu articulo

Nuestra primera página

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