LazyLoad de imágenes

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

Diego José Molina Gonzalez

student•

Sergio, cómo podríamos solucionar el siguiente error al cargar las imagenes?

XMLHttpRequest cannot load https://placeholdit.imgix.net/~text?txtsize=56&bg=92c952&txt=600%C3%97600&w=600&h=600. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Gracias!

Manuel Venegas

student•

Tambien tengo ese problema, pero al parecer es un tema con la librería.

Guillermo Camarena Miramontes

student•

Solucinaste el problema?

Gabriel Alejandro Nuñez Natera

student•

No logro cargar las imagenes localmente, me aparece este error en la consola:

XMLHttpRequest cannot load https://placeholdit.imgix.net/~text?txtsize=56&bg=92c952&txt=600%C3%97600&w=600&h=600. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Intente agregar las siguientes cabeceras a la respuesta del servidor en server.jsx

response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

Pero nada 😦 el codigo de mi server es:

import http from 'http';
import React from 'react';
import { renderToString, renderToStaticMarkup } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { IntlProvider } from 'react-intl';
import { Provider } from 'react-redux';

import Pages from './pages/containers/Page';
import Layout from './pages/components/Layout';

import messages from './messages.json';

import store from './store';

const domain = process.env.NODE_ENV === 'production'
? 'https://gabrielnz-platzi-blog-sfs.now.sh/'
: 'http://localhost:3001';

function requestHandler(request, response) {
  const locale = request.headers['accept-language'].indexOf('es') >= 0 ? 'es' : 'en';
  const context = {};

  const html = renderToString(
    <Provider store={store}>
      <IntlProvider locale={locale} messages={messages[locale]}>
        <StaticRouter
          location={request.url}
          context={context}
        >
          <Pages />
        </StaticRouter>
      </IntlProvider>
    </Provider>,
  );

  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  response.setHeader('Content-Type', 'text/html');

  if (context.url) {
    response.writeHead(301, {
      Location: context.url,
    });
    response.end();
  }

  response.write(
    renderToStaticMarkup(
      <Layout
        title="React blog"
        content={html}
        domain={domain}
      />,
    ),
  );
  response.end();
}

const server = http.createServer(requestHandler);

server.listen(3000);

Alguna idea?

Diego José Molina Gonzalez

student•

Me sumo a la pregunta!

Jesus Abraham Berzunza Pavón

student•

Que tal Sergio, Podrias explicar mejor la utilidad de base 64?

Sergio Daniel Xalambrí

student•

En el defaultSource? Podemos colocar 2 cosas, o un enlace, en ese caso el navegador va a descargar la imagen de ese enlace, o un string con un base64 con el contenido de la imagen, de esa forma no es necesario descargar la imagen por defecto. Esto último sirve si la imagen por defecto es muy ligera, si la imagen es pesada lo mejor es usar un enlace.

Jesus Abraham Berzunza Pavón

student•

Gracia😃

LazyLoad de imágenes

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