Mostrar listado de comentarios en cada post

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

Clase anteriorSiguiente clase

Resumen

Vamos a mostrar los comentarios

Luis Alfredo Locon Peña

student•

En el modulo de archivos de esta clase el Elemento post.jsx no es el correcto. Usar el zip para cualquier duda!

Arquimedes

student•

Aca tambien me da problemas me dice esto:

Uncaught (in promise) TypeError: Failed to construct 'Comment': Please use the 'new' operator, this DOM object constructor cannot be called as a function.```

Sergio Daniel Xalambrí

student•

Cómo estás usando Comment? Con los archivos del curso te sigue pasando eso? Pareciera que estás llamando Comment() como una función 🤔

Miguel Rivas

student•

cuando haces {…comment} ó {…post} en el caso del Home.jsx, es para cargar todos los datos, verdad ?, es que no me queda claro de todo los puntos …

Sergio Daniel Xalambrí

student•

Exactamente. Si tenés este objeto

const props = {
	className: 'box',
	id: 'first-box',
};

Hacer:

<div {...props} />

Es lo mismo que:

<div className={props.className} id={props.id} />

Solo que si props fuese un objeto muy grande o que no sabemos exactamente que datos posee (llegan desde un API por ejemplo) hacer {...props} te permite pasar todos sin definir cada prop a mano.

Jorge Méndez Ortega

student•

Disculpen tengo una pregunta eh visto que sergio utiliza algo como esto
hace una especie de if ternario utilizando solo esto

(condicion) && {lo que se ejecuta}

Francisco J Jimenez H

student•

tengo dos preguntas, que hace el metodo .map y que hace el metodo de Promise.all

Sergio Daniel Xalambrí

student•

Map sirve para transformar listas (arrays). Promise.all es para poder ejecutar muchas promesas al mismo tiempo y esperar que se terminen todas.

Te recomiendo mucho tomar el curso de Fundamentos de JS donde se enseña todo esto.

Francisco J Jimenez H

student•

muchas gracias

Miguel Armando Alejandre Montemayor

student•

¿Porque cuando quieres ir a un comment desde el perfil te manda a error404?

Diego Forero

Team Platzi•

No veo en el video donde da un 404, puedes dar un poco más de información.

Miguel Armando Alejandre Montemayor

student•

Siempre que react-routes no puede resolver una ruta, renderiza el componente Error404.jsx. Tal como lo especificamos en Page.jsx en el componente <Miss />:

function Pages() {
	return (
		<main role="application">
		  	{/* lista de posts */}
			<Match 
				pattern="/"
				exactly
				component={Home}
			/>
			{/* detalles del posts */}
			<Match 
				pattern="/posts/:id"
				exactly
				component={Post}
			/>
			{/* Perfil de usuario */}
			<Match 
				pattern="/users/:id"
				exactly
				component={Profile}
			/>
			{/* Error 404 */}
			<Miss component={Error404}/> 
		</main>
	);
}

Mostrar listado de comentarios en cada post

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