Estado de cargando y detalle de post

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

José David García Rodríguez

student•

Para recortar un poco lo que se hace con el componente Loading, puede hacer una validación del tipo ternary operator, por ejemplo:

render() {
    return this.state.loading ? <Loading /> : (
      <section name="post">
        <h1>Post</h1>
        <Link to="/">
          Go to home
        </Link>
        <Link to="/random">
          Go to random
        </Link>
      </section>
    );
  }

Arquimedes

student•

Desde aqui no se me muestra ni el usuario ni los commentarios, a alguien mas le pasa?

Sergio Daniel Xalambrí

student•

Podés compartir tu código en Github para revisarlo? Probablemente tengas un nombre de key mal 🤔

Arquimedes

student•

https://github.com/gidox/React-Simple-Blog-

Tambien esta el issue que tuve con el Comment Component

Dante Jauregui Yallico Jauregui Yallico

student•

Hola Sergio, cuando haces this.props.params.id estas llamando a:

el id = 1 de
async getComments(id = 1) { … } ???

Ese this.props.params entonces seria un in-built de react como this.props.children?

esa parte me confunde porque en ningun lugar he declarado un props llamado params… 😕

Finalmente, cuando debo hacer PropTypes… que tipo de propTypes deberia es para poner?? el eslint me pide que coloque 😃

Sergio Daniel Xalambrí

student•

No es de React, es de React Router, son los parámetros de la url. Más adelante vemos como poner propTypes.

Arquimedes

student•

Soy el unico q le pasa esto al ejecutar el bff TypeError: (0 , _reactRouter.createServerRenderContext) is not a function

Sergio Daniel Xalambrí

student•

Es por la versión de React Router que instalaste, usá la misma versión que se usa en el curso. La versión del curso es la react-router@4.0.0-alpha.5. Al final del curso hay un material de actualización a la versión más nueva.

Arquimedes

student•

graciass!

Estado de cargando y detalle de 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