Consumir el API y mostrar datos en la home

Clase 27 de 58 • Curso Profesional de React con Redux 2016

Resumen

Ahora vamos a consumir la API y mostrar los post en la home de la aplicación.

Gabriel Alejandro Nuñez Natera

student•

Actualmente utilizar PropTypes directamente de la libreria principal de React esta deprecado, en su lugar recomiendan utilizar la libreria prop-types.

Para instalarla:

npm install --save prop-types

Para importarla y usarla:

import PropTypes from 'prop-types';

Les dejo el enlace al sitio oficial para mas informacion: https://facebook.github.io/react/docs/typechecking-with-proptypes.html

Saludos 😃

Manuel Galindez

student•

Chicos en el componente Post hay un pequeño bug que pueden corregir antes de avanzar al siguente video.

Si vemos en la validación que se hace para ver si los datos ya existen y así renderizar el username y la cantidad de comentarios esta de esta forma:

{!this.props.loading && (
          <div>
            <a href={`//${this.state.user.website}`} target="_black" rel="nofollow">
              {this.state.user.name}
            </a>
            <span>
              hay {this.state.comments.length} comentarios
            </span>
          </div>
        )}

Pero en realidad no existe una props.loading, la que existen viene siendo el estado ( this.state.loading ), por lo tanto deben corregirlo de esta forma.

{!this.state.loading && (
          <div>
            <a href={`//${this.state.user.website}`} target="_black" rel="nofollow">
              {this.state.user.name}
            </a>
            <span>
              hay {this.state.comments.length} comentarios
            </span>
          </div>
        )}

Jonathan Martin Ortega Jimenez

student•

Cual es la diferencia entre crear archivos .jsx en vez de crearlos como .js?

Sergio Daniel Xalambrí

student•

Es una convención que se usa al trabajar con React, si el archivo exporta un componente de React entonces le ponemos .jsx, si no .js.

Así es fácil por ejemplo hacer una búsqueda solo en componente de React al buscar *.jsx usando el editor y con solo ver el formato del archivo sabés que eso es un componente de React.

EdwinDeLeonG

student•

Hola, a partir de este punto, me esta saliendo un Warning de Webpac y aunque todo me funciona quisiera saber si se puede arreglar o si a otra persona le sale y porque sale esto:

WARNING in .//encoding/lib/iconv-loader.js
Critical dependencies:
9:12-34 the request of a dependency is an expression
@ .//encoding/lib/iconv-loader.js 9:12-34

Sergio Daniel Xalambrí

student•

No te preocupes, es normal, los Warnings indican una advertencia pero todo debe funcionar con normalidad.

Lo que indica esa advertencia es que la forma que usa una de nuestras dependencias para cargar una subdependencia es una expresión, esto quiere decir que no es un string ya armado si no que es dinámico y por lo tanto webpack va a cargar muchos posibles módulos (todos los que hagan match con esa expresión).

Ya que es algo interno de una de nuestras dependencias no podemos hacer nada para arreglarlo, igual no es un error por lo que no te va a afectar en nada.

EdwinDeLeonG

student•

Ok. Gracias…

Bryam Rodriguez

student•

Hola, se me queda en “Loading posts” y en consola me sale: Uncaught (in promise) TypeError: Cannot read property ‘getList’ of undefined

A qué se debe?

Sergio Daniel Xalambrí

student•

Importaste bien el api? revisa también los nombres, el error significa que el objeto del cual getList es propiedad no existe, revisa que este bien api.posts.getList.

Bryam Rodriguez

student•

Encontré mi error: Olvidé hacer el export al final del archivo api.js

export default api;

Whoops!

Fran Delgado

student•

Si tenéis instalado ATOM para realizar este curso, os recomiendo Atom React.js Snippets para autocompletar los principales snippets de React en vuestro código.

Javier Alejandro Perez Fernandez

student•

No me quedó claro porqué definimos unos PropTypes? Que pasa si no definimos los Post.propTypes?

Dante Jauregui Yallico Jauregui Yallico

student•

Hola Sergio!

porque usaste esto en el componente POST.JSX:

<a href={//${**this.state.user.website**}}

es decir donde declaraste el objeto “user.website” ??

porque veo el API y no se ve que traes ese dato en especifico… 😮

Sergio Daniel Xalambrí

student•

El user que obtenemos del API es un objeto que entre las varias propiedades tiene una llamada website. Podés ver un ejemplo en el API -> http://jsonplaceholder.typicode.com/users/1

David Flores Medrano

student•

A mi tambien se me queda en Loading post… y el webpack me advierte esto

WARNING in ./~/encoding/lib/iconv-loader.js
    9:12-34 Critical dependency: the request of a dependency is an expression

    ERROR in ./~/iconv-lite/encodings/dbcs-data.js
    Module not found: Error: Can't resolve 'json' in '/Volumes/cloud/Dropbox/CURSOS/REACT con redux'
    BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                     You need to specify 'json-loader' instead of 'json'.

Diego Forero

Team Platzi•

En las configuraciones de webpack del cliente y del servidor en la parte de loaders pon json-loader en lugar de solo json
Esto es por el cambio de versión de webpack

David Flores Medrano

student•

gracias! ya no sale nada en webpack… pero sigue en Loading posts…

y en la consola me sale un aviso:

Uncaught TypeError: (0 , _reactRouterDom.render) is not a function
    at Object.<anonymous> (app.js:8184)
    at __webpack_require__ (app.js:20)
    at module.exports (app.js:66)
    at app.js:69
chrome-extension://gencefjnoopnjaoneaaopndiipdcllnb/Launcher.js:3 *** *** *** request_settings

Grover Jesus Trujillo Benites

student•

Cual es la librería que permite utilizar el async y await ?

Carlos Sampol

Team Platzi•

Async y await se pueden usar si usas Babel 😃

Alejandro Sanabria

Team Platzi•

Realmente no es una libreria, el que se encarga es el compilador en este caso babel.

Necesitas instalar el plugin necesario para usarlo:

npm i -D babel-plugin-transform-async-to-generator

Y luego en tu .babelrc

{
  "plugins": ["transform-async-to-generator"]
}

Wildin Mota

student•

No entiendo, por qué me da este error en el webpack, es como si no me leyera el ES6.

Alejandro Sanabria

Team Platzi•

@Manokero lo que te falta es el preset de react en la configuración de babel, lo instalas con:

npm i -D babel-preset-react

y luego lo pones en el .babelrc

{
	presets: ['react', 'es2015']
}

Cesar Andres Ardila Buitrago

student•

Hola, tengo este error al ejecutar webpack

ERROR in Entry module not found: Error: Can’t resolve ‘babel’ in 'C:\xampp\h
tdocs\react\proyecto_platzi’
BREAKING CHANGE: It’s no longer allowed to omit the ‘-loader’ suffix when us
ing loaders.
You need to specify ‘babel-loader’ instead of ‘babel’.

Sergio Daniel Xalambrí

student•

En la última versión de Webpack necesitas agregar -loader al final de los nombres de cada loader, tal como dice el mensaje de error.

Cesar Andres Ardila Buitrago

student•

Muchas gracias lo mismo toca hacer con json en la configuracion del webpack

camilo andres reina cifuentes

student•

Sergio para un proyecto grande como puedo renderizar todo ? ya que dices que usar dangerouslySetInnerHTML no es muy recomendable.

Sergio Daniel Xalambrí

student•

Te respondí acá -> https://platzi.com/discussions/sergio-en-un-proyecto-grande-nos-dices-que-usar-dangerouslysetinnerhtml-no-es-muy-recomendable-que-forma-recomiendas/#best-answer

Jonathan Huertas

student•

¿Soy el único al que se le salta el vídeo? Por ejemplo va en el minuto uno y de repente salta al minuto 3

Ricardo Azpeitia P.

student•

Intenta con el server B

Jonathan Huertas

student•

Parece más un tema del reproductor que de conexión, pero vale, lo probaré. Gracias.

Jose Chirinos

student•

Tengo este error:
Uncaught TypeError: _http2.default.createServer is not a function

alguna idea del problema?

Sergio Daniel Xalambrí

student•

http2? como estás importando http en server.js? hace un console.log de createServer, parece un error en el import.

David Camacho

student•

Buenos días, al correr el comando webpack -w me genera este error, ocurre hasta descargando el proyecto de acá… Alguien tiene alguna idea? https://ibb.co/f0oxHv

Diego Forero

Team Platzi•

Tienes un error en el archivo Home.jsx en la linea 36, puede ser un error de digitación o estas cerrando mal el tag.

David Camacho

student•

Pensaba exactamente lo mismo, pero ni con el proyecto que esta en la plataforma me funciona, genera el mismo error.

Michael

student•

8:54 , en el href ¿porque doble slash? como llama esta sintaxis?

Sergio Daniel Xalambrí

student•

No tiene un nombre, es simplemente para evitar escribir el protocolo, al colocar solo // lo que hace el navegador es colocar el protocolo del sitio actual al sitio destino, si estas en http usa http, si estas en https usa https, si abriste un html directo del sistema de archivos usando el protocolo file entonces coloca file.

Carlos Andrés Millan Satizabal

student•

Cuando recargo la página, me aparece el siguiente error en el inspector:

Uncaught ReferenceError: process is not defined
at Object.<anonymous> (app.js:1087)
at webpack_require (app.js:20)
at Object.<anonymous> (app.js:700)
at webpack_require (app.js:20)
at Object.<anonymous> (app.js:277)
at webpack_require (app.js:20)
at Object.<anonymous> (app.js:96)
at webpack_require (app.js:20)
at Object.<anonymous> (app.js:75)
at webpack_require (app.js:20)

que será?

Sergio Daniel Xalambrí

student•

Estas usando process en algún lado? Revisa que esté bien configurado Webpack.

Manuel Galindez

student•

Porque en los estados iniciales del componente Post al user de le coloca de tipo objeto y no array ?

this.state = {
    loading: true,
    user: { },
    comments: [ ]
};

Sergio Daniel Xalambrí

student•

Porque es un objeto con los datos del usuario, no un array de usuarios.

Juan Carlos Correa Herrera

student•

¿Por qué aquí no se aplica webpack?

Sergio Daniel Xalambrí

student•

Ya configuramos Webpack antes, no necesitamos volver a configurar Webpack, simplemente seguí usándolo como en los vídeos anteriores.

Juan Carlos Correa Herrera

student•

Ah ok, en mi caso debo ejecutar el comando “webpack” para ver los cambios realizados, luego ejecutar los comandos “npm run …” para levantar los dos servidores, y como aquí veo que haces los cambios y se reflejan en el navegador por eso mi duda 😮 creo que me habré perdido algo 😛

Consumir el API y mostrar datos en la home

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS